jQuery Amazing Scrolling Presentation Plugin - scrolldeck

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:

• Slide Animations Example
• Image Slides Example
• jQuery Parallax Plugin Example

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.