John Polacek’s jQuery Scrolling Deck is a plugin that makes your scrolling presentation easy.

Here’s a rundown of the code:

$(document).ready(function() {

var deck = new $.scrolldeck();

});

You can modify the settings

$(document).ready(function() {
  var deck = new $.scrolldeck({
    buttons: '.nav-button',
    slides: '.slide',
    duration: 600,
    easing: 'easeInOutExpo',
                    offset: 0
  });
});

You can also hide the scrollbar by setting the HTML{overflow:hidden;} in your CSS.

Add animations by adding “animate-in” or “animate-build” classes to the elements at your slides.

<div>
    <p data-animation="fly-in-left">This paragraph will fly in from the left.</p>
    <p data-animation="fly-in-right">This paragraph will fly in from the right.</p>
</div>

<div>
    <p>This slide will get be ’pinned‘ to the top of the screen until all the slide animation builds are complete.</p>
    <p>This paragraph will fade in (the default animation)</p>
    <p data-animation="space-in">This paragraph will fade in while its letter spacing contracts to normal.</p>
</div>

Click on the image to view the full tutorial and demo as well as download the file.

Incoming search terms for the article:

• scrolldeck tutorial
• scroll deck
• jquery scroll
• jquery scrolling
• scroll deck tutorial
• scrolldeck
• jquery scrolldeck
• jquery scroll deck
• deck jquery
• jquery deck