My client has been asking about a javascript slider with hexagon effect. Something like http://huracan.lamborghini.com/#!/en/gallery (click on a car, then next/previous).
I have been searching the web for a few hours now, but i can't seem to find anything!
Anybody seen this before?
Thanks for your help!
Well, quick google on transitions,javascript and css3 got me to this:
http://www.joelambert.co.uk/flux/
There is an effect named "Blocks2". You might look into the source code of that and adjust it as needed.
Let me know what you think.
Related
I'm very new to this, but have a little programming background, so hopefully someone out there can parse through this with me.
I spend a LOT of time looking at Reddit for work and being able to quickly see which comments are newer than others would be super helpful. My ultimate goal is to have a color scale that will quickly guide me to the new comments. Something like Red is less than 30 minutes, Green is 30-60 minutes, and Blue is 60+ minutes or something like that.
I've been doing some research into building Chrome Extensions, and I found some similar topics, but they don't test the text in the field and update the CSS dynamically.
I would absolutely love some help walking through this. Also, if you have a partial solution, I'm open to that as well. Thank you in advance for your time and help!
UPDATE: I've been asked to provide code samples, but that's the real crux of my problem is I A) don't know how to even begin approaching this, and B) my web searching is not showing any results for me to play with. To be clear, I'm not asking anyone to make this extension for me. I'm looking for help identifying a CSS class area on a site, checking the text within it, and then applying a CSS addition based on results. If you can help point me to the right resources, I'd be very grateful!
I've seen something like this here: http://modularfield.net/tapes
How is this done? Is this some kind of library? Because I could not find anything on the site that would give me a hint, how this is achieved.
It's a bit buried, but I was able to find the script that they use for that effect. So, here it is: http://mdfield.net/assets/js/geo.js
This can be achieved with canvas. The animation in the background is probably using something like PhysicsJS but will take some coding!
The mask following the mouse pointer is fairly straight forward and was demoed here: Animated image mask following mouse in HTML
You will need to change the image though as placekitten.com doesnt seem to be working:
img.src = 'http://placehold.it/500/500';
i used this tutorial for inspiration by creating this effect on my modularfield.net page: http://tympanus.net/codrops/2014/09/23/animated-background-headers/
greetings from cologne
Does anyone know if any open source animate sliders exist, like the one on this Wordpress theme: http://vencorp.venmond.com/index-revolution.php
The only ones I can find are plugins for Wordpress websites, I was hoping there would be some standalone versions.
Thanks
Are you looking for a carousel/cycle type thing?
Like this? http://jquery.malsup.com/cycle/ or this http://sorgalla.com/jcarousel/
Just to clarify, I wanted something very similar to the example I showed. Other well known sliders are too basic.
I found a solution though and I thought I'd answer in case it helps anyone else.
I opted for: http://www.themepunch.com/codecanyon/revolution/liveguide/02.Sample-Fullwidth.html
...which you can buy at http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848
Seems really good so far.
i bet everyone of you has seen www.tumblr.com
right on the registration page on the bottom you see the '30 reasons...' link that slides the complete page up and reveals a second one.
i found ways to do this with putting two sides into one and just scrolling to the second part, but tumblr seems to have 2 different pages there that swap somehow with a slide effect.
im pretty sure it is done with some jQuery but i have not found any more information about how to achieve something like this.
it is a question out of pure interest because i really love the effect =)
it would be great if someone would give me a hint how to do something like that.
thanks in advance,
sebastian
It is indeed a nice effect. It's a bit of a combination of CSS and javascript really. I would use jQuery for sure. I've knocked up a little jsFiddle to show you how it can be done:
http://jsfiddle.net/SufZD/
I'm trying to convert a site from flash to HTML/CSS/JS ( don't ask why, I just have to ) but I'm stuck about the animations that I need.
Please follow the link and look at the site: http://www.sultanahmetkoftesi.com
As you can see, the moving layers are accelerated when you move the mouse. That is exactly what I want to do.
I'd be glad if you can provide an example or snippet.
Pure Javascript or jQuery code is fine for me.
Maybe these two projects can somehow help you...
1. http://css-tricks.com/1660-jquery-robot/
2. http://webdev.stephband.info/parallax.html
Good luck...
You may also want to look at http://spritely.net/