Easy Background Parallax Effect with jQuery - Parallaxify

File Size: 2.88 KB
Views Total: 4349
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Easy Background Parallax Effect with jQuery - Parallaxify

Parallaxify.js is a lightweight (less than 1kb) and fast jQuery plugin for creating a background parallax effect on vertical page scrolling. The goal is to make your background image scroll at a different speed than the document but always stay within its container.

How to use it:

1. Download the plugin and include the JavaScript parallaxify.js after jQuery library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="parallaxify.js"></script>

2. Add a background image to your container.

.parallax {
  background-image      : url('1.jpg');
  background-size       : cover;
  background-position-x : 50%;
  background-position-y : 0%;
  background-repeat     : no-repeat;

3. Enable the background parallax scrolling effect on the container.


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