jQuery parallax examples and plugins

Welcome to our collection of jQuery code examples! In this carefully curated compilation, we have gathered a wide array of code snippets that demonstrate the power and versatility of the jQuery library.

Portfolio Parallax Page

Author:
Ivan Grozdic | January 20, 2019
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
bootstrap.css, jquery.js

jQuery Parallax Scrolling

Author:
Andrej Sharapov | January 17, 2019
Made with:
HTML (Pug) / CSS (SCSS) / JS

About a code

CSS mix-blend-mode & awesome parallax scrolling.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Parallax Self Portrait

Author:
ryan_brwn | June 16, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

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

Google's Collapsing Parallax

Author:
Ryan Tarson | December 12, 2017
Made with:
HTML / CSS / JS

About a code

Google Android inspired collapsing parallax in jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js
Parallax Grid

Parallax Grid

Author:
Casey Callis | June 14, 2017
Made with:
HTMLCSSJS (jquery.js, parallax.js)

About a code

Used parallax.js to set up this interactive panning image grid. Uses cursor position if you're on a desktop or laptop.

Simple Parallax Header with Blur

Author:
tsimenis | April 5, 2016
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Fixed Background, Fixed Title

Author:
Derek Palladino | January 8, 2016
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
waypoints.js

Card 3D View Parallax

Author:
Alban Bujupaj | December 1, 2015
Made with:
HTML / CSS (SCSS) / JS

About a code

Card 3d view parallax in jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js
Full Page Parallax Scroll Effect

Full Page Parallax Scroll Effect

Author:
Emily Hayman | August 17, 2015
Made with:
HTMLCSS/SCSSJS (jquery.js, lodash.js)

About a code

A lightweight full page parallax scroll effect.

Parallax

Parallax

Author:
Romswell Roswell Parian Paucar | March 25, 2015
Made with:
HTMLCSSJS (jquery.js, jquery-ui.js)

About a code

Experiment with parallax effects.

Parallax Effect

Author:
James Dow | December 16, 2014
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Canvas Parallax Mountains

Canvas Parallax Mountains

Author:
Jack Rugile | January 28, 2013
Made with:
HTMLCSSJS/CoffeeScript (jquery.js, sketch.js)

About a code

Move your mouse to change speed and move up and down.

Parallax Scrolling

Parallax Scrolling

Author:
Marcel Schulz | November 9, 2012
Made with:
HTMLCSSJS (jquery.js)

About a code

Simple parallax scrolling.

Snake Parallax

Author:
snakeparallax | August 28, 2019
About a code

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

Parallax Effect Using SimpleParallax

Author:
Codegrid | June 29, 2019
Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
bootstrap.css, bootstrap.js, simpleparallax.js
Parallax.js

Parallax.js

Author:
PixelCog Inc. | June 8, 2014
Made with:
2543 stars105 watchers

Tilt.js

Tilt.js

Author:
Gijs Rogé | January 13, 2017
Made with:
1973 stars58 watchers

Jparallax

Jparallax

Author:
stephband | April 1, 2019
Made with:
1151 stars82 watchers

jInvertScroll

jInvertScroll

Author:
pixxelfactory | August 30, 2013
Made with:
576 stars29 watchers

Parallaxify

Parallaxify

Author:
Felix Pflaum | June 20, 2013
Made with:
322 stars25 watchers

Parallax scroll

Parallax scroll

Author:
Matthieu Chavigny | March 4, 2015
Made with:
218 stars19 watchers

Paroller.js

Paroller.js

Author:
tgomilar | March 4, 2017
Made with:
189 stars9 watchers

SimpleParallax

SimpleParallax

Author:
eosenna | November 9, 2017
Made with:
133 stars8 watchers

Hongkong.js

Hongkong.js

Author:
Hans Christian Reinl | July 16, 2014
Made with:
46 stars4 watchers

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨