Parallax scrolling is a popular technique in web design to add dynamic effects to a page during scrolling. Parallax allows us to animate almost every CSS attribute based on the scroll position on your site. Used in the right way it gives your website a subtle 3D effect, creates the illusion of depth and allows to highlight certain elements.

Since 2015, we've been adding style and flair to your design with subtle parallax effects. Like an iPhone that swooshes into view from a stack of phones as you scroll them into view - we've made some really stylish content over the last couple of years. Now, we've got a big upgrade and tons of more options.

One of the limitations we had before was with background images. With a div, we're animating the background-image instead of the object itself. We don't want the div to move, just the background image. So, previously we were limited to a simple y (vertical), x (horizontal) and some easing and viewport options. Now, we can apply any effect to background images that we could apply to regular objects.

Parallax effects get really stylish with nesting multiple layers. A common use could be a big headline over a fantastic background photo. As the user scrolls down, the background scrolls at a slower speed giving the user a three-dimensional feel. The headline could move a little slower, and slowly blur out of focus. With a more sophisticated design, we could add an additional layer with a color filter that goes over your photograph. As the user scrolls down, we can change the color of the filter, the color of the text, etc.

Additionally, we can easily apply the effects (or specific ones) to happen only on certain screen sizes. We can animate things one way for desktops and large screens, and a completely different way for notebooks and tablets.