forked from codrops/Windy
/
index4.html
executable file
·187 lines (163 loc) · 13.4 KB
/
index4.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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/windy.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<noscript><link rel="stylesheet" type="text/css" href="css/noJS.css" /></noscript>
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Tutorials/CustomDropDownListStyling/">
<strong>« Previous Demo: </strong>Custom Drop-Down List Styling
</a>
<span class="right">
<a href="http://www.flickr.com/people/smanography/">Images by Sherman Geronimo-Tan</a>
<a href="http://tympanus.net/codrops/?p=11220">
<strong>Back to the Codrops Article</strong>
</a>
</span>
</div><!--/ Codrops top bar -->
<header class="codrops-header">
<h1><strong>Windy</strong> – A Plugin for Swift Content Navigation</h1>
<h2>Navigate content by leafing through it.</h2>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
</nav>
</header>
<section class="main">
<div class="windy-demo">
<ul id="wi-el" class="wi-container">
<li><img src="images/demo1/1.jpg" alt="image1"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li>
<li><img src="images/demo1/2.jpg" alt="image2"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>
<li><img src="images/demo1/3.jpg" alt="image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li>
<li><img src="images/demo1/4.jpg" alt="image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li>
<li><img src="images/demo1/5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>
<li><img src="images/demo1/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li>
<li><img src="images/demo1/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li>
<li><img src="images/demo1/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li>
<li><img src="images/demo1/9.jpg" alt="image9"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>
<li><img src="images/demo1/10.jpg" alt="image10"/><h4>Blossom Delight</h4><p>Craft beer gentrify nihil pariatur aliqua high life, irony cosby sweater.</p></li>
<li><img src="images/demo1/11.jpg" alt="image11"/><h4>Heartbeat</h4><p>Cliche vinyl consequat, carles wolf Austin williamsburg post-ironic mcsweeney's.</p></li>
<li><img src="images/demo1/12.jpg" alt="image12"/><h4>Inner Organs</h4><p>Deserunt reprehenderit pour-over marfa VHS occaecat, aesthetic belly DIY.</p></li>
<li><img src="images/demo1/13.jpg" alt="image13"/><h4>Wanted Darkness</h4><p>Organic irony incididunt blog retro, fanny pack nisi salvia.</p></li>
<li><img src="images/demo1/14.jpg" alt="image14"/><h4>Blessed Fever</h4><p>Twee biodiesel fugiat ut. Thundercats mcsweeney's occaecat brooklyn mollit.</p></li>
<li><img src="images/demo1/15.jpg" alt="image15"/><h4>Origins</h4><p>Quinoa marfa banksy nostrud brunch bushwick PBR. Mcsweeney's bushwick banksy.</p></li>
<li><img src="images/demo1/16.jpg" alt="image16"/><h4>Fire Lime</h4><p>Brunch fugiat locavore, swag photo booth keffiyeh labore small batch.</p></li>
<li><img src="images/demo1/17.jpg" alt="image17"/><h4>Host Rumor</h4><p>Helvetica wayfarers ea enim, street art you probably haven't heard of.</p></li>
<li><img src="images/demo1/18.jpg" alt="image18"/><h4>Lovely Feast</h4><p>Semiotics ennui VHS high life you probably haven't heard of them sed craft beer.</p></li>
<li><img src="images/demo1/19.jpg" alt="image19"/><h4>Red Greatness</h4><p>Cray 8-bit cliche, consequat VHS mumblecore salvia tattooed typewriter.</p></li>
<li><img src="images/demo1/20.jpg" alt="image20"/><h4>Hollow Soul</h4><p>Kale chips enim eiusmod narwhal, magna before they sold out locavore.</p></li>
<li><img src="images/demo1/1.jpg" alt="image1"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li>
<li><img src="images/demo1/2.jpg" alt="image2"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>
<li><img src="images/demo1/3.jpg" alt="image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li>
<li><img src="images/demo1/4.jpg" alt="image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li>
<li><img src="images/demo1/5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>
<li><img src="images/demo1/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li>
<li><img src="images/demo1/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li>
<li><img src="images/demo1/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li>
<li><img src="images/demo1/9.jpg" alt="image9"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>
<li><img src="images/demo1/10.jpg" alt="image10"/><h4>Blossom Delight</h4><p>Craft beer gentrify nihil pariatur aliqua high life, irony cosby sweater.</p></li>
<li><img src="images/demo1/11.jpg" alt="image11"/><h4>Heartbeat</h4><p>Cliche vinyl consequat, carles wolf Austin williamsburg post-ironic mcsweeney's.</p></li>
<li><img src="images/demo1/12.jpg" alt="image12"/><h4>Inner Organs</h4><p>Deserunt reprehenderit pour-over marfa VHS occaecat, aesthetic belly DIY.</p></li>
<li><img src="images/demo1/13.jpg" alt="image13"/><h4>Wanted Darkness</h4><p>Organic irony incididunt blog retro, fanny pack nisi salvia.</p></li>
<li><img src="images/demo1/14.jpg" alt="image14"/><h4>Blessed Fever</h4><p>Twee biodiesel fugiat ut. Thundercats mcsweeney's occaecat brooklyn mollit.</p></li>
<li><img src="images/demo1/15.jpg" alt="image15"/><h4>Origins</h4><p>Quinoa marfa banksy nostrud brunch bushwick PBR. Mcsweeney's bushwick banksy.</p></li>
<li><img src="images/demo1/16.jpg" alt="image16"/><h4>Fire Lime</h4><p>Brunch fugiat locavore, swag photo booth keffiyeh labore small batch.</p></li>
<li><img src="images/demo1/17.jpg" alt="image17"/><h4>Host Rumor</h4><p>Helvetica wayfarers ea enim, street art you probably haven't heard of.</p></li>
<li><img src="images/demo1/18.jpg" alt="image18"/><h4>Lovely Feast</h4><p>Semiotics ennui VHS high life you probably haven't heard of them sed craft beer.</p></li>
<li><img src="images/demo1/19.jpg" alt="image19"/><h4>Red Greatness</h4><p>Cray 8-bit cliche, consequat VHS mumblecore salvia tattooed typewriter.</p></li>
<li><img src="images/demo1/20.jpg" alt="image20"/><h4>Hollow Soul</h4><p>Kale chips enim eiusmod narwhal, magna before they sold out locavore.</p></li>
<li><img src="images/demo1/1.jpg" alt="image1"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li>
<li><img src="images/demo1/2.jpg" alt="image2"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>
<li><img src="images/demo1/3.jpg" alt="image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li>
<li><img src="images/demo1/4.jpg" alt="image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li>
<li><img src="images/demo1/5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>
<li><img src="images/demo1/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li>
<li><img src="images/demo1/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li>
<li><img src="images/demo1/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li>
<li><img src="images/demo1/9.jpg" alt="image9"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>
<li><img src="images/demo1/10.jpg" alt="image10"/><h4>Blossom Delight</h4><p>Craft beer gentrify nihil pariatur aliqua high life, irony cosby sweater.</p></li>
<li><img src="images/demo1/11.jpg" alt="image11"/><h4>Heartbeat</h4><p>Cliche vinyl consequat, carles wolf Austin williamsburg post-ironic mcsweeney's.</p></li>
<li><img src="images/demo1/12.jpg" alt="image12"/><h4>Inner Organs</h4><p>Deserunt reprehenderit pour-over marfa VHS occaecat, aesthetic belly DIY.</p></li>
<li><img src="images/demo1/13.jpg" alt="image13"/><h4>Wanted Darkness</h4><p>Organic irony incididunt blog retro, fanny pack nisi salvia.</p></li>
<li><img src="images/demo1/14.jpg" alt="image14"/><h4>Blessed Fever</h4><p>Twee biodiesel fugiat ut. Thundercats mcsweeney's occaecat brooklyn mollit.</p></li>
<li><img src="images/demo1/15.jpg" alt="image15"/><h4>Origins</h4><p>Quinoa marfa banksy nostrud brunch bushwick PBR. Mcsweeney's bushwick banksy.</p></li>
<li><img src="images/demo1/16.jpg" alt="image16"/><h4>Fire Lime</h4><p>Brunch fugiat locavore, swag photo booth keffiyeh labore small batch.</p></li>
<li><img src="images/demo1/17.jpg" alt="image17"/><h4>Host Rumor</h4><p>Helvetica wayfarers ea enim, street art you probably haven't heard of.</p></li>
<li><img src="images/demo1/18.jpg" alt="image18"/><h4>Lovely Feast</h4><p>Semiotics ennui VHS high life you probably haven't heard of them sed craft beer.</p></li>
<li><img src="images/demo1/19.jpg" alt="image19"/><h4>Red Greatness</h4><p>Cray 8-bit cliche, consequat VHS mumblecore salvia tattooed typewriter.</p></li>
<li><img src="images/demo1/20.jpg" alt="image20"/><h4>Hollow Soul</h4><p>Kale chips enim eiusmod narwhal, magna before they sold out locavore.</p></li>
</ul>
<nav>
<span id="nav-prev">prev</span>
<span id="nav-next">next</span>
</nav>
</div>
<p class="info"><strong>Tip:</strong> to see the a continuous flow, keep your mouse down on the navigation arrows.</p>
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.windy.js"></script>
<script type="text/javascript">
$(function() {
var $el = $( '#wi-el' ),
windy = $el.windy({
infinite: true
}),
allownavnext = true,
allownavprev = true;
$( '#nav-prev' ).on( 'mousedown', function( event ) {
allownavprev = true;
navprev();
} ).on( 'mouseup mouseleave', function( event ) {
allownavprev = false;
} );
$( '#nav-next' ).on( 'mousedown', function( event ) {
allownavnext = true;
navnext();
} ).on( 'mouseup mouseleave', function( event ) {
allownavnext = false;
} );
function navnext() {
if( allownavnext ) {
windy.next();
setTimeout( function() {
navnext();
}, 150 );
}
}
function navprev() {
if( allownavprev ) {
windy.prev();
setTimeout( function() {
navprev();
}, 150 );
}
}
/* example to add items
setTimeout(function(){
$el.prepend('<li><img src="images/demo1/3.jpg" alt="image1"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li>');
// or:
// $el.append('<li><img src="images/demo1/3.jpg" alt="image1"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li>');
windy.update();
},2000)
*/
});
</script>
</body>
</html>