This is a stunning parallax hero header with a scroll overlay action over the title. It uses PUG HTML to set and easily organize the containers, tw...

This is a stunning parallax hero header with a scroll overlay action over the title. It uses PUG HTML to set and easily organize the containers, two for front and background images and another for setting up the title to be overlayed. It also implements CSS for styling and positioning the layers and makes use of JavaScript for the on-Scroll actions. Created by CodePen user Filip Vitas.

This is a lightweight plugin for jQuery that allows you to move in horizontal with a parallax effect while scrolling down. It's extremely easy to s...

This is a lightweight plugin for jQuery that allows you to move in horizontal with a parallax effect while scrolling down. It's extremely easy to setup and requires nearly no configuration. The plugin was written by Alex Franzelin, published on GitHub by pixxelfactory, and licensed under MIT license.

Iceview is a snippet developed by Leandro that generates a parallax effect featuring five layers on top of the background. It gives an illusion of ...

Iceview is a snippet developed by Leandro that generates a parallax effect featuring five layers on top of the background. It gives an illusion of by-the-snowy-mountains city.

A compelling plugin that generates different transitions when you scroll down. It resembles the effect of Apple's website, in which elements appear...

A compelling plugin that generates different transitions when you scroll down. It resembles the effect of Apple's website, in which elements appear and move at different speeds when you scroll. It is a lightweight and smooth creation available for free at GitHub. It was created by Christian Witte.

Parallax.js is a beautiful engine that creates those parallax effects we're used to see in websites, making them even more powerful than ever. It u...

Parallax.js is a beautiful engine that creates those parallax effects we're used to see in websites, making them even more powerful than ever. It uses the motion detection option (or gyroscope) function of the user's mobile device, so the user can tilt it and see how it works. In devices where there's not such features ( in desktop computers and laptops, the engine identifies where the cursor is and works with it instead. The result is a gorgeous set of smooth and organized elements that move at different speeds, creating an ambience of realism. With it you can: - Create circular animations - Create pendulum animations - Apply different speed to each element - Apply general characteristic to a group of elements To use it, just create a list of elements. Apply the "layer" class to each one of them, and specify in the "data-depth" attribute the depth of the element within the scene. The value "0" make the element stand still, while the value "1" makes it move a lot. Play with the values in the middle and see some magic. You can activate or deactivate features to your convenience. This tool was created by Matthew Wagerfield and it can be downloaded for free. It has a MIT license.

Add some simple data attributes to your markup, run $.stellar(). That's all you need to get started.

Add some simple data attributes to your markup, run $.stellar(). That's all you need to get started.

The jQuery plugin for doing cool scrolly stuff

The jQuery plugin for doing cool scrolly stuff

By combining the power of rem and a small JavaScript function to manipulate the font-size of the html element,...

By combining the power of rem and a small JavaScript function to manipulate the font-size of the html element, we can achieve simple but effective parallaxing.Setting all our positions and parallax movements in CSS, this technique minimises DOM manipulations to just one – on the html element – boosting overall performance.The speed and direction of each element is set using margins (for this demo I've used margin-top). Play around with the numbers yourself to get a better understanding.This ...

by: Moony.esby: Demianby: martdesignby: holabeew.comby: lbiby: bart ligthart Jarallax is an open-source javascript library which makes adjusting ...

by: Moony.esby: Demianby: martdesignby: holabeew.comby: lbiby: bart ligthart Jarallax is an open-source javascript library which makes adjusting css based on interaction easy.With Jarallax it's easy to create a parallax scrolling website.