jQuery Plugin For Stacked Page Scrolling Effect - jQuery Stacks

File Size: 3.43 KB
Views Total: 7774
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Stacked Page Scrolling Effect - jQuery Stacks

Stacks is a dead simple jQuery plugin used to reveal stacked content sections when vertical page scrolling. The goal is to change the positions of html elements so it looks like they are stacking on top of each other while scrolling.

How to use it:

1. Add several content sections to your web page.

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

2.Make these DIV elements full window.

div {
  width: 100%;
  height: 100vh;
  text-align: center;
  background-size: cover;
  background-position: 50% 50%;

}

3. Put jQuery JavaScript library and the jQuery stacks plugin at the end of the document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/jquery.stacks.js"></script>

4. Active the stacked page scrolling effect.

$('div').stack();

5. Add your own background images to the content sections.

.one {
  background-image: url('1.jpg');
}

.two {
  background-image: url('2.jpg');
}

.three {
  background-image: url('3.jpg');
}

Change log:

2016-07-21

  • Changed the way the stacks are z-indexed. This method stops us from using a negative z-index, which is a UX issue because you can't select text or images on negatively z-indexed containers. Instead, we count all of the items and then index them as n-1 rather than 0-1. Also, cleaned up the code to match the jQuery style guide.

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