jQuery Amazing Scrolling Presentation Plugin - scrolldeck
File Size: | 3.04 MB |
---|---|
Views Total: | 10074 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

scrolldeck is a cool jQuery plugin that make it easier to create amazing scrolling presentation like Slide Animations, Image Slides and parallax effects for your project.
You might also like:
- Simple Parallax Scrolling Plugin For jQuery - scrolly
- Parallax Scrolling Effects Plugin with jQuery - Stellar.js
- Animated Parallax Effect Background - jQuery4u
- Beautiful Slideshow with Parallax Effect
- Animated Page Scrolling Effect with jQuery - superscrolloram
Basic Usage:
1. Include necessary javascript files on your web page
<script src="js/jquery-1.8.2.min.js"></script> <script src="js/jquery.scrollTo-1.4.3.1.min.js"></script> <script src="js/jquery.scrollorama.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.scrolldeck.js"></script>
2. Markup
<div class="slide"> <p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left.</p> <p class="animate-in" data-animation="fly-in-right">This paragraph will fly in from the right.</p> </div> <div class="slide"> <p>This slide will get be ’pinned‘ to the top of the screen until all the slide animation builds are complete.</p> <p class="animate-build" data-build="1">This paragraph will fade in (the default animation)</p> <p class="animate-build" data-animation="space-in" data-build="2">This paragraph will fade in while its letter spacing contracts to normal.</p> </div>
3. The javascript
$(document).ready(function() { var deck = new $.scrolldeck({ buttons: '.nav-button', slides: '.slide', duration: 600, easing: 'easeInOutExpo', offset: 0 }); });
More Examples:
Change log:
2015-05-17
- adjust slide height
This awesome jQuery plugin is developed by johnpolacek. For more Advanced Usages, please check the demo page or visit the official website.