forked from johnpolacek/scrolldeck.js
/
index.html
138 lines (121 loc) · 6.31 KB
/
index.html
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>scrolldeck.js</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollorama.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.scrolldeck.js"></script>
</head>
<body>
<a href="https://github.com/johnpolacek/scrolldeck.js">
<img style="position: absolute; top: 0; right: 0; border: 0; z-index: 999999999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub" alt="Fork me on GitHub" />
</a>
<div id="header">
<a href="#howtouse" class="nav-button">How to Use</span></a>
<a href="#examples" class="nav-button">Examples</span></a>
<a href="#credits" class="nav-button">Credits</span></a>
</div>
<div class="slide">
<div id="instructions">
Use left/right arrow to change slides
</div>
<h1 id="title">scrolldeck</h1>
<p id="author">
created by <a href="http://twitter.com/johnpolacek">John Polacek</a>
<a href="https://twitter.com/johnpolacek" 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.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</p>
<p>A jQuery plugin for making scrolling presentation decks <br />
<small>For example: <a href="decks/responsive">animations</a>, <a href="decks/infographics">fullscreen images</a> or <a href="decks/parallax">parallaxing</a></small></p>
<p id="powered"><small>Powered by <a href="http://johnpolacek.github.com/scrollorama">Scrollorama</a></small></p>
<p>
<small>
Download:
<a class="download" href="https://github.com/johnpolacek/scrolldeck.js/zipball/master">zip</a>
<a class="download" href="https://github.com/johnpolacek/scrolldeck.js/tarball/master">tar</a>
</small>
</p>
</div>
<div class="slide" id="howtouse">
<h1>How to Use</h1>
<p>Build a web page with each slide as a div.
<small class="pro-tip">Pro-Tip: <a href="http://blog.responsivenews.co.uk/post/13925578846/fluid-grids-orientation-resolution-independence">Use rem’s</a> to make content scale <br />(resize this window to see)</small>
</p>
</div>
<div class="slide">
<p>Create section navigation by linking to slide id’s <small>(optional)</small></p>
<p>After linking all the required scripts (jQuery, Scrollorama, scrollTo, easing & scrolldeck), create the slide deck on document ready event.</p>
<p><blockquote><pre>
$(document).ready(function() {
var deck = new $.scrolldeck();
});</pre></blockquote></p>
</div>
<div class="slide">
<p>You can configure the settings as follows<br /><small>(example has the default config values assigned)</small></p>
<p><blockquote><pre>
$(document).ready(function() {
var deck = new $.scrolldeck({
buttons: '.nav-button',
slides: '.slide',
duration: 600,
easing: 'easeInOutExpo',
offset: 0
});
});</pre></blockquote></p>
<p><small class="pro-tip">Pro-Tip: To hide the scrollbar, set <code>html{overflow:hidden;}</code> in your css</small>
</p>
</div>
<div class="slide" id="animations">
<p>Add animations to slides by adding the <code>"animate-in"</code> <br />
or <code>"animate-build"</code> classes to elements in your slides.</p>
<p><blockquote><pre>
<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>
</pre></blockquote></p>
<p><small>Available animations are <code>"fly-in-left"</code>, <code>"fly-in-right"</code>, <br /><code>"space-in"</code> and the default which is <code>"fade-in"</code></small></p>
</div>
<div class="slide" id="examples">
<div class="container">
<h1>Examples</h1>
<p><a href="http://johnpolacek.github.com/scrolldeck.js/decks/responsive/">Slide Animations Example</a><br /><small>(What The Heck Is Responsive Web Design)</small></p>
<p><a href="http://johnpolacek.github.com/scrolldeck.js/decks/infographics">Image Slides Example</a><br /><small>(Infographics Are Cool)</small></p>
<p><a href="http://johnpolacek.github.com/scrolldeck.js/decks/parallax">jQuery Parallax Plugin Example</a></p>
</div>
</div>
<div class="slide" id="credits">
<h1>Credits</h1>
<p>scrolldeck.js & <a href="http://johnpolacek.github.com/scrollorama">Scrollorama</a> by <a href="http://twitter.com/johnpolacek">John Polacek</a></p>
<p><a href="http://demos.flesler.com/jquery/scrollTo/">jQuery ScrollTo</a> by <a href="https://twitter.com/#!/flesler">Ariel Flesler</a></p>
<br />
<p><small>Inspired by other cool slide deck js libraries:<br />
<a href="http://dressrush.com/blog/post/12506021124/dressrush-online-pitch-deck">Pitch Deck</a>,
<a href="http://imakewebthings.github.com/deck.js/">deck.js</a> and
<a href="http://lab.hakim.se/reveal-js/#/">reveal.js</a>
</small></p>
</div>
<img src="img/resize.png" id="resize-graphic" />
<script>
$(document).ready(function() {
var deck = new $.scrolldeck({
buttons: '.nav-button',
easing: 'easeInOutExpo'
});
// add other animations using the scrolldeck.controller (see Scrollorama plugin)
console.log(deck.controller);
deck.controller.animate('#instructions',{ duration: 100, property:'opacity', end: 0 });
});
</script>
</body></html>