forked from benoitpointet/jquery-scrollsnap-plugin
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (140 loc) · 6.91 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>jQuery Scrollsnap plugin</title>
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="demo/foundation/stylesheets/foundation.min.css">
<link rel="stylesheet" href="demo/snippet/jquery.snippet.min.css">
<link rel="stylesheet" href="demo/css/presentation.css">
<script src="demo/foundation/javascripts/modernizr.foundation.js"></script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="demo/foundation/javascripts/jquery.js"></script>
<script src="demo/snippet/jquery.snippet.min.js"></script>
<script src="src/jquery.event.special.js"></script>
<script src="src/jquery.easing.min.js"></script>
<script src="src/jquery.scrollsnap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.snap',
proximity: 100,
easing: 'easeOutBack'
});
$('#scrollingy300').scrollsnap({
snaps: 'img',
proximity: 160
});
$('#scrollingx300').scrollsnap({
direction: 'x',
snaps: 'img',
proximity: 160
});
$("code pre").snippet("javascript",{style:"vim",showNum:false});
});
</script>
</head>
<body>
<div class="row">
<div class="twelve columns">
<h1>Scrollsnap</h1>
<p>A jQuery plugin that enhances the scrolling experience, by providing a snapping behaviour.</p>
</div>
</div>
<div class="row">
<div class="six columns">
<h3 class="snap">Scroll snapping</h3>
<p>Scrollsnap allows to define 'anchor points' onto which the window snaps when you scroll through a web page or parts of it.</p>
<p>Scroll this page and notice how the window will snap to each snapping element (visible thru their snap line decoration).</p>
<p>Scroll on the colored rectangles (horizontally and vertically), and notice how it snaps perfectly to each of the colored rectangles.</p>
<div id="scrollingy300">
<img src='http://placehold.it/300x160/00ff00/000000&text=scroll me down'/>
<img src='http://placehold.it/300x160/00ffff/000000&text=keep scrolling' />
<img src='http://placehold.it/300x160/ff00ff/000000&text=keep scrolling' />
<img src='http://placehold.it/300x160/ff0000/000000&text=scroll me up' />
</div>
<div id="scrollingx300">
<img src='http://placehold.it/300x160/00ff00/000000&text=scroll me right'/>
<img src='http://placehold.it/300x160/00ffff/000000&text=keep scrolling' />
<img src='http://placehold.it/300x160/0000ff/000000&text=keep scrolling' />
<img src='http://placehold.it/300x160/ff00ff/000000&text=keep scrolling' />
<img src='http://placehold.it/300x160/ff0000/000000&text=scroll me left' />
</div>
</div>
<div class="six columns">
<h3 class="snap">Compatibility</h3>
<p>Scrollsnap is compatible with any recent and decent browser:<br>
<span class="success label">chrome 24+</span><br>
<span class="success label">firefox 18+</span><br>
<span class="success label">safari 5+</span><br>
<span class="success label">iOS safari 5+</span><br>
<span class="success label">internet explorer 9+</span><br>
</p>
<h3 class="snap">Alternatives</h3>
<p>There are a few alternatives around, have a look at them before choosing a snaping solution.<br>
<ul>
<li>
<a href='http://wtm.github.io/jquery.snapscroll/'>jQuery SnapScroll</a>
</li>
<li>
<a href='http://guidobouman.github.io/jquery-panelsnap/'>jQuery PanelSnap</a>
</li>
<li>
<a href='http://jsfiddle.net/djsbaker/dxzk4/'>A barebone jQuery script</a>
</li>
</ul>
</p>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h3 class="snap">Use it</h3>
<h5>Installation</h5>
<p>It of course requires <a href="">jQuery</a>, but also two jquery plugins: <a href="https://github.com/ssorallen/jquery-scrollstop">jquery.scrollstop</a> that implements a special scrollstop events, and <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jquery.easing.js</a>, that provides extra <a href="http://easings.net/">easing functions</a>. These plugins are here provided along the <strong>jquery.scrollsnap.js</strong> source file, for ease of use.</p>
<p>Note that the Scrollsnap plugin only implements the snapping logic and provides no styling.</p>
<h5 class="snap">Usage</h5>
<code><pre>
<script src="demo/foundation/javascripts/jquery.js"></script>
<script src="src/jquery.event.special.js"></script>
<script src="src/jquery.easing.min.js"></script>
<script src="src/jquery.scrollsnap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.snap',
proximity: 50
});
});
</script></pre></code>
<h5 class="snap">Configuration</h5>
<p>
The following parameters can be passed to the <strong>scrollsnap()</strong> method to influence its behaviour:
<dl>
<dt>direction:</dt><dd>the direction of scrolling; default: 'y'.</dd>
<dt>snaps:</dt><dd>the CSS selector of snapping elements; default: '*'.</dd>
<dt>proximity:</dt><dd>the maximal distance from the viewport top from which the snapping occurs; default: 12.</dd>
<dt>offset:</dt><dd>the offset the snapping move must take; default: 0.</dd>
<dt>duration:</dt><dd>the number of milliseconds during which the snapping animation takes place; default: 200.</dd>
<dt>easing:</dt><dd><a href="http://easings.net/">easing function</a>; default: 'swing' (the default jquery easing).</dd>
</dl>
</p>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h3 class="snap">Contribute</h3>
<p><a href="https://github.com/benoitpointet/jquery-scrollsnap-plugin">Fork me on github.</a></p>
</div>
</div>
<a href="https://github.com/benoitpointet/jquery-scrollsnap-plugin"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
</body>
</html>