Spotify Inspired Smooth Parallax Scrolling Effect with jQuery - Parallax Scroll

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.