30+ jQuery Parallax - Free Code + Demos
Collection of 30+ jQuery Parallax. All items are 100% free and open-source.
1. Portfolio Parallax Page
Author: Ivan Grozdic (ig_design)
Links: Source Code / Demo
Created on: January 20, 2019
Made with: HTML, CSS, JS
2. CSS Mix-blend-mode & Awesome Parallax Scrolling
Author: Andrej Sharapov (andrejsharapov)
Links: Source Code / Demo
Created on: January 17, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
3. Parallax Self Portrait
I drew a self-portrait using a Wacom tablet a few years ago. Here I’m using JS to detect device tilt or mouse movement to create a sense of depth to the drawing. It sort of works like a magic eye. Try it out on your iPhone, iPad, or Mac. – – – Tilt on Mobile doesn't seem to work on Cod...Read More
Author: ryan_brwn (ryankbrown)
Created on: June 16, 2018
Made with: HTML, SCSS, JS
Tags: parallax, animation, tilt, motion, 3d
4. Google's Collapsing Parallax
Google Android inspired Collapsing Parallax. I'm sure its out there somewhere but I havn't seen anyone recreate the android collapsing parallax so I decided to remake, but for the web!
Author: Ryan Tarson (RTarson)
Links: Source Code / Demo
Created on: December 11, 2017
Made with: HTML, CSS, JS
Tags: google, collapsing parallax, animation, google hamburger, android
5. Parallax CSS Grid
I used parallax.js to set up this interactive panning image grid. Uses cursor position if you're on a desktop or laptop.
Author: Casey Callis (caseycallis)
Links: Source Code / Demo
Created on: June 14, 2017
Made with: HTML, CSS, JS
Tags: parallax, html, css, interactive
6. Card 3D View Parallax
Author: Alban Bujupaj (abujupaj)
Links: Source Code / Demo
Created on: November 30, 2015
Made with: HTML, SCSS, JS
Tags: minimal, card, awesome, mousemove, 3d
7. Full Page Parallax Scroll Effect
A lightweight full page parallax scroll effect.
Author: Emily Hayman (eehayman)
Links: Source Code / Demo
Created on: August 16, 2015
Made with: HTML, SCSS, JS
Tags: parallax, css, javascript, full-page, scroll-effect
8. Slideshow Parallax With TweenMax
Author: Bruno Carvalho (bcarvalho)
Links: Source Code / Demo
Created on: April 19, 2017
Made with: HTML, SCSS, JS
9. Canvas Parallax Mountains
This pen is a modification of my previous Canvas Parallax Skyline pen, only with mountains this time! This one isn't totally optimized yet though. Still having trouble finding exactly when I can reset a point to the end of the canvas, with the least runoff on the edges. Right now I am over...Read More
Author: Jack Rugile (jackrugile)
Links: Source Code / Demo
Created on: January 28, 2013
Made with: HTML, CSS, CoffeeScript
Tags: canvas-mountains-parallax-perspective-generative
10. Parallax Scrolling
Author: Marcel Schulz (MarcelSchulz)
Created on: November 9, 2012
Made with: HTML, CSS, JS
Tags: parallax, scrolling, 2d
11. Parallax.js
Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin
Links: Demo, Github Page
Created on: June 8, 2014
12. Tilt.js
A tiny 60+fps parallax tilt hover effect for jQuery.
Links: Demo, Github Page
Created on: January 13, 2017
13. JParallax
jQuery plugin for creating interactive parallax effect
Links: Github Page
Created on: March 31, 2009
14. Parallaxify
parallaxify is a jQuery plugin that adds parallax effects to elements and backgrounds based on gyroscope sensor or mouse input
Links: Demo, Github Page
Created on: June 20, 2013
15. Paroller.js
Parallax scrolling jQuery plugin
Links: Demo, Github Page
Created on: March 3, 2017
16. Hongkong.js
A parallax scroll effect plugin
Links: Demo, Github Page
Created on: July 16, 2014
17. Parallax Scrolling With JQuery
Author: sergio (sergiocebrian)
Links: Source Code / Demo
Created on: December 5, 2014
Made with: HTML, CSS, JS
Tags: jquery
18. Parallax Scroll Page
Forked from anikey99's Pen Parallax Scroll Page.
Author: Tanya Uzunova (TUzy)
Links: Source Code / Demo
Created on: April 25, 2016
Made with: HTML, CSS, JS
Tags: parallax, scroll
19. High Performance Parallax Scrolling Animations With RequestAnimationFrame And Jquery For Touch And Desktop
Author: heinrich (dermitderoboe)
Links: Source Code / Demo
Created on: March 22, 2017
Made with: HTML, CSS, JS
20. Simple Parallax Effect (jQuery)
Author: Mohamed A. Farouk (captainmoha)
Links: Source Code / Demo
Created on: August 19, 2015
Made with: HTML, CSS, JS
Tags: jquery, parallax, effect, css
21. CSS + JQuery Parallax Effect
Author: Andrew Procacci (acprocacci)
Links: Source Code / Demo
Created on: November 9, 2016
Made with: HTML, CSS, JS
22. Parallax-Scroll
https://github.com/aentan/Parallax-Scroll
Author: vavik (vavik96)
Links: Source Code / Demo
Created on: March 12, 2016
Made with: HTML, CSS, JS
Tags: parallax
23. Parallax Scrolling
This pen is just a simple basic example of parallax scrolling. You will get to learn a lot from this pen. This pen has been made in the simplest way possible. Topics: Dashboard, Grids, Menu, Pagination
Author: Jyotirmoy Barman (jewel998)
Links: Source Code / Demo
Created on: November 15, 2019
Made with: HTML, CSS, JS
Tags: pagination, dark mode, aos, smooth-scroll, grid
24. JQuery Mouse Parallax
Author: Mikhail Zhuikov (oceaniclife)
Links: Source Code / Demo
Created on: June 15, 2017
Made with: HTML, CSS, JS
25. Parallax Background MouseMove Jquery
A simple and quite nice jquery code to make a background with some imgs Forked from Romulo_Ctba's Pen Parallax Background mouseMove Jquery.
Author: john wozniak (jjwozn0977)
Links: Source Code / Demo
Created on: September 14, 2014
Made with: HTML, CSS, JS
Tags: parallax
26. Z-index Overlap Shadow Lift Fake-parallax
Author: ljNest (ljnest)
Links: Source Code / Demo
Created on: August 6, 2020
Made with: HTML, CSS, JS
Tags: z-index, shadow, parallax, animation
jQuery Parallax Examples
1. Portfolio Parallax Page
Author: Ivan Grozdic (ig_design)
Links: Source Code / Demo
Created on: January 20, 2019
Made with: HTML, CSS, JS
2. CSS Mix-blend-mode & Awesome Parallax Scrolling
Author: Andrej Sharapov (andrejsharapov)
Links: Source Code / Demo
Created on: January 17, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
3. Parallax Self Portrait
I drew a self-portrait using a Wacom tablet a few years ago. Here I’m using JS to detect device tilt or mouse movement to create a sense of depth to the drawing. It sort of works like a magic eye. Try it out on your iPhone, iPad, or Mac. – – – Tilt on Mobile doesn't seem to work on Cod...Read More
Author: ryan_brwn (ryankbrown)
Created on: June 16, 2018
Made with: HTML, SCSS, JS
Tags: parallax, animation, tilt, motion, 3d
4. Google's Collapsing Parallax
Google Android inspired Collapsing Parallax. I'm sure its out there somewhere but I havn't seen anyone recreate the android collapsing parallax so I decided to remake, but for the web!
Author: Ryan Tarson (RTarson)
Links: Source Code / Demo
Created on: December 11, 2017
Made with: HTML, CSS, JS
Tags: google, collapsing parallax, animation, google hamburger, android
5. Parallax CSS Grid
I used parallax.js to set up this interactive panning image grid. Uses cursor position if you're on a desktop or laptop.
Author: Casey Callis (caseycallis)
Links: Source Code / Demo
Created on: June 14, 2017
Made with: HTML, CSS, JS
Tags: parallax, html, css, interactive
6. Card 3D View Parallax
Author: Alban Bujupaj (abujupaj)
Links: Source Code / Demo
Created on: November 30, 2015
Made with: HTML, SCSS, JS
Tags: minimal, card, awesome, mousemove, 3d
7. Full Page Parallax Scroll Effect
A lightweight full page parallax scroll effect.
Author: Emily Hayman (eehayman)
Links: Source Code / Demo
Created on: August 16, 2015
Made with: HTML, SCSS, JS
Tags: parallax, css, javascript, full-page, scroll-effect
8. Slideshow Parallax With TweenMax
Author: Bruno Carvalho (bcarvalho)
Links: Source Code / Demo
Created on: April 19, 2017
Made with: HTML, SCSS, JS
9. Canvas Parallax Mountains
This pen is a modification of my previous Canvas Parallax Skyline pen, only with mountains this time! This one isn't totally optimized yet though. Still having trouble finding exactly when I can reset a point to the end of the canvas, with the least runoff on the edges. Right now I am over...Read More
Author: Jack Rugile (jackrugile)
Links: Source Code / Demo
Created on: January 28, 2013
Made with: HTML, CSS, CoffeeScript
Tags: canvas-mountains-parallax-perspective-generative
10. Parallax Scrolling
Author: Marcel Schulz (MarcelSchulz)
Created on: November 9, 2012
Made with: HTML, CSS, JS
Tags: parallax, scrolling, 2d
jQuery Parallax Plugins
1. Parallax.js
Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin
Links: Demo, Github Page
Created on: June 8, 2014
2. Tilt.js
A tiny 60+fps parallax tilt hover effect for jQuery.
Links: Demo, Github Page
Created on: January 13, 2017
3. JParallax
jQuery plugin for creating interactive parallax effect
Links: Github Page
Created on: March 31, 2009
4. Parallaxify
parallaxify is a jQuery plugin that adds parallax effects to elements and backgrounds based on gyroscope sensor or mouse input
Links: Demo, Github Page
Created on: June 20, 2013
5. Paroller.js
Parallax scrolling jQuery plugin
Links: Demo, Github Page
Created on: March 3, 2017
6. Hongkong.js
A parallax scroll effect plugin
Links: Demo, Github Page
Created on: July 16, 2014
More Awesome Lists:
Share: