scrolldeck

created by Chicago Web Developer John Polacek.
I work at at AuctionsByCellular.
We make mobile bidding and auction software for charities.

Follow @johnpolacek

A jQuery plugin for making scrolling presentation decks
For example: animations, fullscreen images or parallaxing

Powered by Scrollorama

Download: zip tar

How to Use

Build a web page with each slide as a div. Pro-Tip: Use rem’s to make content scale
(resize this window to see)

Create section navigation by linking to slide id’s (optional)

After linking all the required scripts (jQuery, Scrollorama, scrollTo, easing & scrolldeck), create the slide deck on document ready event.

$(document).ready(function() {
  var deck = new $.scrolldeck();
});

You can configure the settings as follows
(example has the default config values assigned)

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

Pro-Tip: To hide the scrollbar, set html{overflow:hidden;} in your css

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

<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>

Available animations are "fly-in-left", "fly-in-right",
"space-in" and the default which is "fade-in"

Credits

scrolldeck.js & Scrollorama by John Polacek

jQuery ScrollTo by Ariel Flesler

Inspired by other cool slide deck js libraries:
Pitch Deck, deck.js and reveal.js