Minimalist Parallax Scroll Effect In jQuery - Parallax.js

Minimalist Parallax Scroll Effect In jQuery - Parallax.js
File Size: 3.63 KB
Views Total: 1959
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

An extremely simple jQuery plugin to create a high-performance, mobile-compatible parallax scroll effect by alerting the vertical position of your background image on scroll.

How to use it:

1. Add a background image to your parallax container.

<div class="parallax" 
     style="height:500px; background-image: url(bg.jpg)" 
     Parallax Container

2. Add the main JavaScript file parallax.jquery.js after you've loaded the latest jQuery library.

<script src="" 
<script src="parallax.jquery.js"></script>

3. Make the background image's position fixed within the parallax container.

.parallax {
  background-size: cover;
  background-attachment: fixed;
  background-position:center center

4. Initialize the parallax plugin.

var parallax = new Parallax($('#example'));

5. Activate the parallax effect on scroll.


This awesome jQuery plugin is developed by dninja21. For more Advanced Usages, please check the demo page or visit the official website.