created by John Polacek Follow @johnpolacek
A jQuery plugin for making scrolling presentation decks
For example: animations, fullscreen images or parallaxing
Powered by Scrollorama
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"
Slide Animations Example
(What The Heck Is Responsive Web Design)
Image Slides Example
(Infographics Are Cool)
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