Easy Parallax Scrolling Effect with jQuery - Parallaxor
File Size: | 1.96 MB |
---|---|
Views Total: | 3317 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Parallaxor is a lightweight jQuery plugin to create the familiar parallax scrolling effect for fix positioned elements inside a position: relative
container.
Basic Usage:
1. Load jQuery library and the jQuery parallaxor plugin's script in the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="jquery.parallaxor.js"></script>
2. Insert a fix positioned element and a parallax image into your document.
<div id="header"> <h1>jQuery Parallaxor</h1> <img src="parallax.jpg"> </div>
3. The CSS to make the h1
element fix positioned.
#header h1 { position: absolute; left:50%; top:50%; z-index: 2; ... }
4. Call the plugin on the parent element.
$('#header').parallaxor({ // Represents the distance from the top of the browser // after which the layers start moving. top: 0, // Object holding all the layers that // you want to move inside the container. layers: { 'img': { // how much the layer should move inside the container // when the container is into the browser's view range. distance: '50%', // up, down, left, right. direction : 'down' } } });
5. The plugin will automatically generate a 'parallaxor-container' wrapper for your parallax elements. Add the following CSS snippet into your CSS file.
.parallaxor-container { position: relative; overflow: hidden; }
Change log:
2015-03-01
- add cache support
This awesome jQuery plugin is developed by alexandrubau. For more Advanced Usages, please check the demo page or visit the official website.