Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
223 lines (197 sloc) 9.52 KB
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href='' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.lettering-0.6.1.min.js"></script>
<script src="js/jquery.scrollorama.js"></script>
<a href="">
<img style="position: fixed; top: 0; right: 0; border: 0; z-index: 11;" src="" alt="Fork me on GitHub" alt="Fork me on GitHub" />
<p id="console"></p>
<div class="scrollblock" id="intro">
<h1 id="title">scrollorama</h1>
<p id="author">
created by <a href="">John Polacek</a>
<a href="" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @johnpolacek</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src="//";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<p id="desc">The jQuery plugin for doing cool scrolly stuff<br />
<small>Want to do super-scrolly stuff?<br />Check out <a href="">Scrollorama2: SuperScrollorama</a></small></p>
<p id="download">
<span class="accent">&#9733;</span> DOWNLOAD <span class="accent">&#9733;</span><br />
<a class="download" href="">zip</a>
<a class="download" href="">tar</a>
<div class="scrollblock" id="examples-transition">
<h3 id="fade-in">Fade In</h3>
<h3 id="fly-in">Fly In</h3>
<h3 id="rotate-in">Rotate In</h3>
<h3 id="zoom-in">Zoom In</h3>
<p id="any"><small><span class="accent">&#9733;</span> Any numeric CSS property <span class="accent">&#9733;</span></small></p>
<div class="scrollblock" id="examples-pin">
<h2>Pin It</h2>
<h3 id="unpin">&#9733; Then unpin it &#9733;</h3>
<div class="scrollblock" id="examples-parallax">
<h2 id="parallax1">Parallax</h2>
<h3 id="parallax2">Parallax</h3>
<h3 id="parallax3">Parallax</h3>
<div class="scrollblock" id="examples-easing">
<h2 id="easing">Easing</h2>
<div id="easing_bottom"></div>
<div class="scrollblock" id="howtouse">
<h1>How To Use</h1>
<p id="disclaimer">Disclaimer: This is an experimental, just-for-fun sort of project and hasn&rsquo;t been thoroughly tested.</p>
<div id="instructions">
<p>Design and build your site, dividing your content into blocks.</p>
<p class="divider">&#9733; &#9733; &#9733;</p>
<p>Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter.</p>
$(document).ready(function() {
var scrollorama = $.scrollorama({
<p class="divider">&#9733; &#9733; &#9733;</p>
<p>Target an element and animate its properties.</p>
duration:400, property:'opacity'
<p id="instructions-animation">The animation parameters you can use are:</p>
<ul class="param-list">
<span class="param">duration</span>
<span class="param-def">number of pixels of scrolling the animation lasts</span>
<span class="param">delay</span>
<span class="param-def">number of pixels of scrolling before the animation starts<small>(animation is set to begin when the top of the scroll block is at the bottom of browser window)</small></span>
<span class="param">property</span>
<span class="param-def">css property being animated <small>(must be numeric)</small></span>
<span class="param">start</span>
<span class="param-def">value of the css property at the start of the animation <small>(if unassigned, will be the element&rsquo;s current property value)</small></span>
<span class="param">end</span>
<span class="param-def">value of the css property at the end of the animation <small>(if unassigned, will be the element&rsquo;s current property value)</small></span>
<span class="param">pin</span>
<span class="param-def">set to true if you want the scroll block to be pinned during its animations <small>(note: block will be pinned for all its element&rsquo;s animations)</small></span>
<span class="param">easing</span>
<span class="param-def">'bounce baby, bounce.' use the same easing equations you're used to.
<small>(if unassigned, will be a linear transition)</small></span>
<p class="divider">&#9733; &#9733; &#9733;</p>
<p>Hook into the <code>onBlockChange</code> event.</p>
scrollorama.onBlockChange(function() {
alert('You just scrolled to block#'+scrollorama.blockIndex);
<p class="divider">&#9733; &#9733; &#9733;</p>
<p>Note: If you are not using the pinning feature, it is recommended you disable it.
<small>Pinning requires scroll blocks to be converted to absolute positioning, which can break some layouts.</small>
$(document).ready(function() {
var scrollorama = $.scrollorama({
<div class="scrollblock" id="credits">
<p>scrollorama by <a href="">John Polacek</a></p>
<p><a href="">Lettering.js</a> by <a href="">Dave Rupert</a></p>
<p><a href="">Bowlby One SC Font</a> by <a href="">Vernon Adams</a></p>
<p class="divider">&#9733; &#9733; &#9733;</p>
<p><small>If you like scrollorama, give <a href="">scrolldeck</a> a try</small></p>
$(document).ready(function() {
// initialize the plugin, pass in the class selector for the sections of content (blocks)
var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
// assign function to add behavior for onBlockChange event
scrollorama.onBlockChange(function() {
var i = scrollorama.blockIndex;
.text('onBlockChange | blockIndex:'+i+' | current block: '+scrollorama.settings.blocks.eq(i).attr('id'));
// lettering.js for coolness
$('#title span')
// animate the title letters to explode
scrollorama.animate('#title',{ duration: 300, property:'zoom', end: 8 });
scrollorama.animate('#author',{ duration: 10, property:'z-index', end: 0 });
$('#title span').each(function() {
scrollorama.animate($(this),{ duration: 400, property:'top', end: Math.random()*120-180 });
scrollorama.animate($(this),{ duration: 300, property:'rotate', start:0, end:Math.random()*720-360 });
// animate some examples
scrollorama.animate('#unpin',{ duration:500, property:'padding-top', start:400, pin:true });
scrollorama.animate('#fade-in',{ delay: 400, duration: 300, property:'opacity', start:0 });
scrollorama.animate('#fly-in',{ delay: 400, duration: 300, property:'left', start:-1400, end:0 });
scrollorama.animate('#rotate-in',{ duration: 800, property:'rotate', start:720 });
scrollorama.animate('#zoom-in',{ delay: 200, duration: 600, property:'zoom', start:8 });
scrollorama.animate('#any',{ delay: 700, duration: 200, property:'opacity', start:0 });
scrollorama.animate('#any',{ delay: 800, duration: 200, property:'letter-spacing', start:18 });
// animate the parallaxing
scrollorama.animate('#parallax2',{ delay: 400, duration: 600, property:'top', start:800, end:-800 });
scrollorama.animate('#parallax3',{ delay: 200, duration: 1200, property:'top', start:500, end:-500 });
// animate some easing examples
var $easing = $('#easing'),
$clone = $easing.clone().appendTo('#examples-easing')
$easing.css({ color: '#131420', textShadow: '0 1px 0 #363959' });
easing_array = [ 'easeOutBounce',
'easeOutExpo' ];
.each( function( idx, el ){
scrollorama.animate( $(this), { delay:400, duration: 500,
property:'top', end: 300,
easing: easing_array[idx] });
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2821890-9']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);