Collection of free jQuery parallax code examples and plugins (for vertical or horizontal scrolling) from Codepen, Github and other resources. Update of November 2021 collection. 1 new item.

Related Articles:

  1. CSS Parallax Effects

Table of Contents:

  1. jQuery Parallax Examples
  2. jQuery Parallax Plugins

jQuery Parallax Examples

Author

  • Ivan Grozdic

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

Author

  • Andrej Sharapov

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

Author

  • ryan_brwn

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

Author

  • Ryan Tarson

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

Demo image: Parallax Grid

Author

  • Casey Callis

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.

Author

  • tsimenis

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: -

Author

  • Derek Palladino

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

Author

  • Alban Bujupaj

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

Demo image: Full Page Parallax Scroll Effect

Author

  • Emily Hayman

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.

Demo image: Parallax

Author

  • Romswell Roswell Parian Paucar

Links

Made with

  • HTML
  • CSS
  • JS (jquery.js, jquery-ui.js)

About the code

Parallax

Experiment with parallax effects.

Author

  • James Dow

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Parallax Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Canvas Parallax Mountains

Author

  • Jack Rugile

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.

Demo image: Parallax Scrolling

Author

  • Marcel Schulz

Links

Made with

  • HTML
  • CSS
  • JS (jquery.js)

About the code

Parallax Scrolling

Simple parallax scrolling.

jQuery Parallax Plugins

Author

  • snakeparallax

Links

About a code

Snake Parallax

A jQuery plugin that creates a simple, clean, and powerfull parallax effect.

Author

  • Codegrid

Links

About a code

Parallax Effect Using SimpleParallax

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, bootstrap.js, simpleparallax.js

Demo image: Parallax.js
Made by
  • PixelCog Inc.
Github activity
  • 2543 stars
  • 105 watchers
Links
About the plugin

Parallax.js

Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin.

Demo image: Tilt.js
Made by
  • Gijs RogĂ©
Github activity
  • 1973 stars
  • 58 watchers
Links
About the plugin

Tilt.js

A tiny 60+fps parallax tilt hover effect for jQuery.

Demo image: Jparallax
Made by
  • stephband
Github activity
  • 1151 stars
  • 82 watchers
Links
About the plugin

Jparallax

jQuery plugin for creating interactive parallax effect.

Demo image: jInvertScroll
Made by
  • pixxelfactory
Github activity
  • 576 stars
  • 29 watchers
Links
About the plugin

jInvertScroll

A lightweight jQuery vertical scroll - horizontal move plugin with parallax effect.

Demo image: Parallaxify
Made by
  • Felix Pflaum
Github activity
  • 322 stars
  • 25 watchers
Links
About the plugin

Parallaxify

Parallaxify is a jQuery plugin that adds parallax effects to elements and backgrounds based on gyroscope sensor or mouse input.

Demo image: Parallax scroll
Made by
  • Matthieu Chavigny
Github activity
  • 218 stars
  • 19 watchers
Links
About the plugin

Parallax scroll

Smooth parallax animations on vertical page scrolling using requestAnimationFrame and CSS3 3D transitions.

Demo image: Paroller.js
Made by
  • tgomilar
Github activity
  • 189 stars
  • 9 watchers
Links
About the plugin

Paroller.js

A lightweight jQuery plugin that enables parallax scrolling effect.

Demo image: SimpleParallax
Made by
  • eosenna
Github activity
  • 133 stars
  • 8 watchers
Links
About the plugin

SimpleParallax

jQuery plugin to apply a nice Parallax effect on images in a minute.

Demo image: hongkong
Made by
  • Hans Christian Reinl
Github activity
  • 46 stars
  • 4 watchers
Links
About the plugin

Hongkong.js

jQuery based plugin for parallax scrolling.