Collection of free jQuery parallax examples and plugins (for vertical or horizontal scrolling) from codepen and other resources. Update of November 2019 collection. 4 new items.
Related Articles:
Table Of Contents:
jQuery Parallax Examples
Links
Made with
- HTML / CSS / JS
About a code
Portfolio Parallax Page
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, jquery.js
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
jQuery Parallax Scrolling
CSS mix-blend-mode & awesome parallax scrolling.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Parallax Self Portrait
Used jQuery to detect device tilt or mouse movement to create a sense of depth to the drawing.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Links
Made with
- HTML / CSS / JS
About a code
Google's Collapsing Parallax
Google Android inspired collapsing parallax in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Links
Made with
- HTML
- CSS
- JS (jquery.js, parallax.js)
About the code
Parallax Grid
Used parallax.js to set up this interactive panning image grid. Uses cursor position if you're on a desktop or laptop.
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Simple Parallax Header with Blur
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Fixed Background, Fixed Title
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: waypoints.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Card 3D View Parallax
Card 3d view parallax in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML
- CSS/SCSS
- JS (jquery.js, lodash.js)
About the code
Full Page Parallax Scroll Effect
A lightweight full page parallax scroll effect.
Links
Made with
- HTML
- CSS
- JS (jquery.js, jquery-ui.js)
About the code
Parallax
Experiment with parallax effects.
Links
Made with
- HTML
- CSS
- JS/CoffeeScript (jquery.js, sketch.js)
About the code
Canvas Parallax Mountains
Move your mouse to change speed and move up and down.
Links
Made with
- HTML
- CSS
- JS (jquery.js)
About the code
Parallax Scrolling
Simple parallax scrolling.
jQuery Parallax Plugins
Links
About a code
Snake Parallax
A jQuery plugin that creates a simple, clean, and powerfull parallax effect.
Links
About a code
Parallax Effect Using SimpleParallax
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, bootstrap.js, simpleparallax.js
- 2543 stars
- 105 watchers
Parallax.js
Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin.
- 1973 stars
- 58 watchers
Tilt.js
A tiny 60+fps parallax tilt hover effect for jQuery.
- 1151 stars
- 82 watchers
Jparallax
jQuery plugin for creating interactive parallax effect.
- 576 stars
- 29 watchers
jInvertScroll
A lightweight jQuery vertical scroll - horizontal move plugin with parallax effect.
- 322 stars
- 25 watchers
Parallaxify
Parallaxify is a jQuery plugin that adds parallax effects to elements and backgrounds based on gyroscope sensor or mouse input.
- 218 stars
- 19 watchers
Parallax scroll
Smooth parallax animations on vertical page scrolling using requestAnimationFrame and CSS3 3D transitions.
- 189 stars
- 9 watchers
Paroller.js
A lightweight jQuery plugin that enables parallax scrolling effect.
- 133 stars
- 8 watchers
SimpleParallax
jQuery plugin to apply a nice Parallax effect on images in a minute.
- 46 stars
- 4 watchers
Hongkong.js
jQuery based plugin for parallax scrolling.