jQuery Plugin For Stacked Scrolling Effect - Stacked Strips
File Size: | 12.4 KB |
---|---|
Views Total: | 2276 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Stacked Strips is a super tiny (2kb) jQuery plugin to create a stacked scrolling effect for your one page scrolling website & single page applications. The plugin has the ability to scroll fixed page sections one by one as you scroll down the webpage.
See also:
- jQuery Plugin To Create Stacked One Page Scrolling Effect - Stackpage
- jQuery Plugin For Stacked Page Scrolling Effect - jQuery Stacks
- Minimalist jQuery Plugin For Scrolling Stack Of Pages - Scroll Deck
How to use it:
1. Load the jQuery Stacked Stripes plugin after you've loaded jQuery library in the document.
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script src="js/jquery.stacked-strips.js"></script>
2. Create a set of content sections for your webpage. Note that the stacked strips plugin requires more than 1 content section to work.
<section> Content 1 </section> <section> Content 2 </section> <section> Content 3 </section> ...
3. Add the required CSS styles as shown below to your webpage.
.fixed { position: fixed; top: 0; left: 0; width: 100%; } .unfixed { position: relative; width: 100%; }
4. Active the Stacked Scrolling Effect with default options.
$('section').stacked_strips({ type: 'standard' // start position in pixels. active_position: 50, // or a pixel value strip_size: 'full', // add a class to the previous section after_class: false, // fixed mode fixed: true });
Change log:
2017-02-17
- options updated
This awesome jQuery plugin is developed by rgrandi. For more Advanced Usages, please check the demo page or visit the official website.