Skip to content
This repository
Fetching contributors…

Cannot retrieve contributors at this time

file 103 lines (89 sloc) 5.465 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>skrollr - parallax scrolling for the masses</title>

<link href="skrollr.css" rel="stylesheet" type="text/css" />
<link href="demo/style.css" rel="stylesheet" type="text/css" />
</head>

<body class="notransition">
<div id="bg1" data-0="background-position:0% 0%;" data-end="background-position:-100% -1500%;"></div>
<div id="bg2" data-0="background-position:0% 0%;" data-end="background-position:-50% -1200%;"></div>
<div id="bg3" data-0="background-position:0% 0%;" data-end="background-position:-25% -800%;"></div>
<div id="progress" data-0="width:0%;background:hsl(200, 100%, 50%);" data-end="width:100%;background:hsl(920, 100%, 50%);"></div>

<div id="intro" data-0="" data-100="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:-10%;transform:rotate(-90deg);">
<h1><a href="https://github.com/Prinzhorn/skrollr">skrollr</a></h1>
<h2>parallax scrolling for the masses</h2>
<p>let's get scrollin' ;-)</p>
<p class="arrows">&nbsp;&nbsp;</p>
</div>

<div id="transform" data-500="transform:scale(0) rotate(0deg);" data-1000="transform:scale(1) rotate(1440deg);opacity:1;" data-1600="" data-1700="transform:scale(10) rotate(3240deg);opacity:0;">
<h2>transform</h2>
<p>scale, skew and rotate the sh** out of any element</p>
</div>

<div id="properties" data-1700="top:100%;" data-2200="top:0%;" data-3000="display:block;" data-3700="top:-100%;display:none;">
<h2>all numeric properties</h2>
<p>width, height, padding, font-size, z-index, blah blah blah</p>
</div>

<div id="easing_wrapper" data-3900="" data-4900="background:rgba(0, 0, 0, 0);color[swing]:rgb(0,0,0);" data-5900="background:rgba(0,0,0,1);color:rgb(255,255,255);" data-10000="top:0%;" data-12000="top:-100%;">
<div id="easing" data-3900="left:100%" data-4600="left:25%;">
<h2>easing?</h2>
<p>sure.</p>
<p>let me dim the <span data-3900="" data-4900="color[swing]:rgb(0,0,0);" data-5900="color:rgb(255,255,0);">lights</span> for this one...</p>
<p data-5900="opacity:0;font-size:100%;" data-6500="opacity:1;font-size:150%;">you can set easings for each property and define own easing functions</p>
</div>

<div class="drop notransition" data-6500="left:15%;bottom:100%;" data-9500="bottom:0%;">linear</div>
<div class="drop notransition" data-6500="left:25%;bottom[quadratic]:100%;" data-9500="bottom:0%;">quadratic</div>
<div class="drop notransition" data-6500="left:35%;bottom[cubic]:100%;" data-9500="bottom:0%;">cubic</div>
<div class="drop notransition" data-6500="left:45%;bottom[swing]:100%;" data-9500="bottom:0%;">swing</div>
<div class="drop notransition" data-6500="left:55%;bottom[WTF]:100%;" data-9500="bottom:0%;">WTF</div>
<div class="drop notransition" data-6500="left:65%;bottom[inverted]:100%;" data-9500="bottom:0%;">inverted</div>
<div class="drop notransition" data-6500="left:75%;bottom[bounce]:100%;" data-9500="bottom:0%;">bounce</div>
</div>

<div id="download" data-10000="top[cubic]:100%;border-radius[cubic]:0em;background:rgb(0,50,100);border-width:0px;" data-12000="top:10%;border-radius:2em;background:rgb(190,230,255);border-width:10px;">
<h2>the end</h2>
<p>by the way, you can also animate colors (you did notice this, didn't you?)</p>
<p><strong>Now get this thing on <a href="https://github.com/Prinzhorn/skrollr">GitHub</a> and spread the word, it's open source!</strong> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://prinzhorn.github.com/skrollr/" data-via="Prinzhorn">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
<p>Check out more <a href="https://github.com/Prinzhorn/skrollr/tree/master/examples#examples">examples</a>.</p>
<p>Handcrafted by <a href="https://twitter.com/Prinzhorn" class="twitter-follow-button" data-show-count="false">Follow @Prinzhorn</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
</div>

<div style="position:fixed;right:0;top:0;padding:.5em;background:#fff;z-index:102;">
<input type="checkbox" name="cbTransition" id="cbTransition" />
<label for="cbTransition">Smooth scrolling</label>
</div>

<script type="text/javascript">
if(location.search === '?debug') {
document.write('<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"><' + '/script>');
}
</script>

<script type="text/javascript" src="skrollr.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="plugins/skrollr.ie.js"></script>
<![endif]-->
<script type="text/javascript">
var s = skrollr.init({
beforerender: function(data) {
//console.log('beforerender');
},
render: function() {
//console.log('render');
},
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});

document.getElementById('cbTransition').onchange = function() {
if(this.checked) {
document.body.className = '';
} else {
document.body.className = 'notransition';
}
};
</script>
</body>

</html>
Something went wrong with that request. Please try again.