Awesome jQuery scrolling decks plugin
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 }); });
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">This paragraph will fade in (the default animation)</p> <p class="animate-build" data-animation="space-in">This paragraph will fade in while its letter spacing contracts to normal.</p> </div>
The article source:http://johnpolacek.github.com/scrolldeck.js/
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form form validation gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu