10 Best Parallax Scrolling Effects In JavaScript (2021 Update)

Here is a constantly updated list of the 10 Best Free JavaScript libraries to create the familiar Parallax Scrolling Effect on elements (e.g. images, backgrounds, videos, text, etc) as you scroll down or up the web page.

I hope you like it and don’t forget to spread the world.

Originally Published Dec 04 2018, updated Jan 24 2021

1. locomotive-scroll

Animate Elements On Scroll With Parallax Effect - locomotive-scroll

Demo Download

locomotive-scroll is a modern JS library that applies a smooth, subtle, configurable parallax scroll effect to elements when scrolled into view.


2. Universal Parallax

Universal Parallax

Demo Download

A small JavaScript plugin to implement the smooth, mobile-friendly parallax scrolling effect on your web app.


3. Pure CSS Parallax Background Images

Pure CSS Parallax Background Images

Demo Download

An extremely simple CSS solution to apply Parallax scrolling effects on your background images as you scroll down the webpage.


4. Pure CSS Parallax Scrolling Effect

Pure CSS Parallax Scrolling Effect

Demo Download

A simple pure CSS solution to create subtle parallax effects on Html elements when scrolling the web page.


5. Lightweight Vanilla Javascript Parallax Library – rellax

rellax

Demo Download

rellax is a small vanilla JavaScript library which provides a smooth parallax scrolling effect on any DOM elements.


6. Smooth Multi-layer Parallax Scroll Effect In Vanilla JavaScript

Smooth Multi-layer Parallax Scroll Effect In Vanilla JavaScript

Demo Download

A smooth, mobile-compatible parallax scroll effect built in with vanilla JavaScript and CSS3 2D transforms.


7. scrollar.js

scrollar.js

Demo Download

A vanilla JavaScript plugin that makes it simple to apply a smooth parallax scroll effect on multiple elements with different positions.


8. 3D Parallax Scroll Effect In JavaScript – Paralax.js

3D Parallax Scroll Effect In JavaScript – Paralax.js

Demo Download

A JavaScript & CSS solution that applies an interactive 3D parallax scroll effect to different layers within the document on page scroll.


9. Smooth Inertial & Parallax Scroll Effects In JavaScript – luxy.js

inertial-parallax-scroll-luxy-min

Demo Download

luxy.js is a lightweight JavaScript plugin which applies smooth inertial scroll and parallax scroll effects to your webpage.


10. Fixed-position Parallax Scroll Effect With Pure CSS

Fixed-position Parallax Scroll Effect With Pure CSS

Demo Download

A pure CSS solution of implementing a fixed-position parallax effect on background images when scrolling down the webpage. Works both on mobile and desktop.


Conclusion:

Looking for more JavaScript libraries for parallax scroll effects? Don’t forget to check out the Parallax section.

If you’re a jQuery user, here is a list of 10 best jQuery parallax scroll plugins created for you. Enjoy.

See Also:

You Might Be Interested In: