Spotify Inspired Smooth Parallax Scrolling Effect with jQuery - Parallax Scroll
File Size: | 534 KB |
---|---|
Views Total: | 4105 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Parallax Scroll is a lightweight jQuery plugin for creating parallax scrolling effects with images that work smoothly on both mobile and desktop devices.
See also:
- Spotify-Like Parallax Scrolling Effect with jQuery - Parallax.js
- Simple Spotify-Like jQuery Image Parallax Effect Plugin - Parallax ImageScroll
How to use it:
1. Load the latest version of jQuery library and jQuery parallax scroll plugin at the end of your document.
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script src="jquery.parallax-scroll.js"></script>
2. The Html markup. Use Html5 data-*
attributes to specify the height/width of your parallax image.
<div class="parallax-scroll" id="parallax-image" data-width="1024" data-height="768"> <div class="content"> Your content goes here </div> </div>
3. The required CSS/CSS3 rules for the parallax scrolling effect.
.parallax-scroll { width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; color: #fff; } .parallax-scroll .content { color: #fff; text-align: center; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
4. Add a parallax image using background-image
property.
#parallax-image { background-image: url('demo.jpg'); }
5. Initialize the plugin and we're done.
$('.parallax-scroll').parallaxScroll();
This awesome jQuery plugin is developed by aentan. For more Advanced Usages, please check the demo page or visit the official website.