Simple Flexible Parallax Scrolling Plugin With jQuery - Parally
File Size: | 5.98 KB |
---|---|
Views Total: | 9125 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Parally is a simple, flexible jQuery parallax scrolling plugin which can be applied to background images or any other DOM elements.
Basic usage:
1. To get started, you need to load both jQuery library and the jQuery Parally plugin in the document.
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script> <script src="parally.js"></script>
2. Apply the plugin to the container which has a background image.
<div class="background-demo"></div>
.background-demo { background-image: url(1.jpg); background-size: cover; background-position: 50% 50%; height: 400px; }
$('.background-demo').parally();
3. Apply the plugin to a specified dom element (e.g. img
tag) using CSS3 transform mode.
<img src="1.png">
$('img').parally({ mode: 'transform' });
4. All default configuration options.
$('#selector').parally({ // scrolling speed speed: 0.2, // 'background' // 'transform' // function(x,y){} mode: 'background', // set background images' X position xpos: '50%', // use the outer height of element outer: true, // vertical offset in pixels offset: 0 });
This awesome jQuery plugin is developed by michhhh. For more Advanced Usages, please check the demo page or visit the official website.