I'm looking for a jquery plugin/code to do something similar to this sites:
http://melanie-f.com/en/
http://www.adidas.co.uk/climazone
The elements float with some sort of easing following the scroll movement, so they create kind of a parallax effect.
Someone else posted something similar, but the demo link is down right now: Parallax effect make elements follow scroll with delay
I've been searching really hard, but I can't seem to find anything apart from the post above.
I'm not really good at coding JS from scratch, so that's why I'm looking for a plugin.
Thanks a lot in advance for the help...
(And I'm really sorry if the subject of this question is duplicated.)
Related
I've been coming across a lot of websites recently that have a very satisfying friction / momentum-based scrolling effect on them. An example would be https://useplink.com/en/. I've been searching for the correct terminology for this effect for a very long time but I could never find what I was looking for (guides, tutorials, libraries & e.t.c. that could help me understand how it works). If anyone knows what this is correctly referred to as or has any libraries related to it an answer would be greatly appreciated.
Thanks!
Not sure if there is an official name for it, I have heard, momentum scrolling, inertia and kinetic scrolling, on that last one there is a set of 5 good articles here that you can take a look to get a grasp around the concept:
https://ariya.io/tags/kinetic
I just came cross an impressive portfolio, which you can see here: https://kulbachny.com/
I was wondering, how did he achieve that 'stretched and blurred' effect when moving the cursor hover his image?
I can imagine it has to do with canvas and maybe Three.js/WebGL (not so sure)(?)
I'd love to achieve the same effect, but I guess that's not so simple..
If you know how to do it, could you please explain how something such this can be built?
And if too long to explain, could you refer to good guides or technologies / libraries to study in order to be able to build this kind of animations?
Thanks a lot
I can't see what his own site is build with. But site's of his portofolio are made with TweenMax Javascript framework. You can look up yourself some TweenMax tutorials.
Hello i just found this site http://www.bluestacks.com/ and i was wondering how they ended up achieving such incredible effect. I know they used css3 and jquery but havent seen any tutorials on how to make stuff like this. I will like to create something like that any suggestions on how to do it or where to get such tutorials will be greatly appreciated.
It's a huge fad (that is kind of dead now, in my opinion). It's called parallax scrolling.
Google for plugins, or follow a link like this: http://www.jqueryrain.com/demo/jquery-parallax-plugin/
DOes anyone know a good Javascript library that resembles Udemy's approach to presenting lectures?
http://www.udemy.com/mit-600-intro-to-computer-science-programming-fall-2008/#lecture/14053
It slides up and down, with a slow animation, along a vertical line, something like a timeline. I have seen something similar, but can't remember the name. Maybe you guys can help me out.
I think this will suit your requirements.
impress.js
I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT
I have the artwork ready and have found many jquery libraries that will allow me to scroll horiz/vertical - but i'm not sure how to combine both together at a specific co-ordinate.
Could anyone please point me in a the right direction?
Edit: I did originally sign this post off having looked into Superscrolarama and thinking all was solved - but having struggled with implementing it - I dont think its quite the saviour I thought it was, I need both horizontal and vertical parallax as well as scrolling to achieve above, which it doesn't seem to support - so any other tips I'd be very grateful for!
I threw something together is jsfiddle for you.
http://jsfiddle.net/9R4hZ/40/
The script initializes the start positions of all of the objects first. Then handlers are set up for arrow key and mouse wheel. After that is the meat of the algorithm in the parallaxScroll function.
It uses the ARROWS or MOUSEWHEEL for scrolling.
There are from [left, right, top, bottom] transitions.
The HTML and CSS are really simple.
The JS/jQuery that runs it is self explanatory.
It's an interesting effect, that seems to be geared for artsy type sites.
Did you look into librairies like Scrollrama http://johnpolacek.github.com/scrollorama/ or Curtain http://curtain.victorcoulon.fr/?
I know in your question you mention that you already looked into different librairies but depending how they work it's difficult to really suggest how to use proper coordinates.
*edit1
If you didn't see it yet, the auther of scrollorama also did superscrollorama which give a bit more controler over the animation for example animation when an element is pinned.
http://johnpolacek.github.com/superscrollorama/
This article in smashinghub.com shows a collection of JQuery plugin for scrolling and parallax effect I'm totally sure one of them will help you.
it looks like jQuery Scroll Path is the most advanced of them or suit your requirements.
I realize I'm jumping in late here, and this might seem ultra obvious, but have you tried reverse engineering what they have done on https://victoriabeckham.landrover.com/INT? It looks like the ScrollAnimator script does a bulk of the work. I would download their site & mess with it locally, subtracting parts until I figured out which components provide which pieces of functionality. Then I would read through those to understand how they made it happen.
you have use scrollpath plugin
make path