Search code examples
jquerycssparallax

Parallax Floating/Easing Effect

Anyone have a recommendation on how to achieve this effect of elements floating as you scroll? https://www.couleecreative.com. Preferably jQuery/CSS.

Solution

  • You can use the jquery.parallax-scroll plugin.
    Below an example of how to use it::

    Translation to the right by 650 pixels when vertical scroll position is over 90 pixels, then translation to the bottom by 500 pixels when vertical scroll position is over 400 pixels during a scroll distance of 60 pixels

    <li data-parallax='{"x": 650, "from-scroll": 90, "distance": 0}' data-parallax2='{"y": 500, "from-scroll": 400, "distance": 60}'>3</li>