-
Notifications
You must be signed in to change notification settings - Fork 40
/
index.html
executable file
·310 lines (310 loc) · 14.1 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
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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Arrow Navigation Styles</title>
<meta name="description" content="Arrow Navigation Styles: Ideas and styles for arrow navigations" />
<meta name="keywords" content="arrow navigation, effect, web design, inspiration" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="svg-wrap">
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-left-1" d="M46.077 55.738c0.858 0.867 0.858 2.266 0 3.133s-2.243 0.867-3.101 0l-25.056-25.302c-0.858-0.867-0.858-2.269 0-3.133l25.056-25.306c0.858-0.867 2.243-0.867 3.101 0s0.858 2.266 0 3.133l-22.848 23.738 22.848 23.738z" />
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-right-1" d="M17.919 55.738c-0.858 0.867-0.858 2.266 0 3.133s2.243 0.867 3.101 0l25.056-25.302c0.858-0.867 0.858-2.269 0-3.133l-25.056-25.306c-0.858-0.867-2.243-0.867-3.101 0s-0.858 2.266 0 3.133l22.848 23.738-22.848 23.738z" />
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-left-2" d="M26.667 10.667q1.104 0 1.885 0.781t0.781 1.885q0 1.125-0.792 1.896l-14.104 14.104h41.563q1.104 0 1.885 0.781t0.781 1.885-0.781 1.885-1.885 0.781h-41.563l14.104 14.104q0.792 0.771 0.792 1.896 0 1.104-0.781 1.885t-1.885 0.781q-1.125 0-1.896-0.771l-18.667-18.667q-0.771-0.813-0.771-1.896t0.771-1.896l18.667-18.667q0.792-0.771 1.896-0.771z" />
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-right-2" d="M37.333 10.667q1.125 0 1.896 0.771l18.667 18.667q0.771 0.771 0.771 1.896t-0.771 1.896l-18.667 18.667q-0.771 0.771-1.896 0.771-1.146 0-1.906-0.76t-0.76-1.906q0-1.125 0.771-1.896l14.125-14.104h-41.563q-1.104 0-1.885-0.781t-0.781-1.885 0.781-1.885 1.885-0.781h41.563l-14.125-14.104q-0.771-0.771-0.771-1.896 0-1.146 0.76-1.906t1.906-0.76z" />
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-left-3" d="M44.797 17.28l0.003 29.44-25.6-14.72z" />
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-right-3" d="M19.203 17.28l-0.003 29.44 25.6-14.72z" />
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-left-4" d="M15.946 48l0.003-10.33 47.411 0.003v-11.37h-47.414l0.003-10.304-15.309 16z" />
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-right-4" d="M48.058 48l-0.003-10.33-47.414 0.003v-11.37h47.418l-0.003-10.304 15.306 16z" />
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-left-5" d="M48 10.667q1.104 0 1.885 0.781t0.781 1.885-0.792 1.896l-16.771 16.771 16.771 16.771q0.792 0.792 0.792 1.896t-0.781 1.885-1.885 0.781q-1.125 0-1.896-0.771l-18.667-18.667q-0.771-0.771-0.771-1.896t0.771-1.896l18.667-18.667q0.771-0.771 1.896-0.771zM32 10.667q1.104 0 1.885 0.781t0.781 1.885-0.792 1.896l-16.771 16.771 16.771 16.771q0.792 0.792 0.792 1.896t-0.781 1.885-1.885 0.781q-1.125 0-1.896-0.771l-18.667-18.667q-0.771-0.771-0.771-1.896t0.771-1.896l18.667-18.667q0.771-0.771 1.896-0.771z" />
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-right-5" d="M29.333 10.667q1.104 0 1.875 0.771l18.667 18.667q0.792 0.792 0.792 1.896t-0.792 1.896l-18.667 18.667q-0.771 0.771-1.875 0.771t-1.885-0.781-0.781-1.885q0-1.125 0.771-1.896l16.771-16.771-16.771-16.771q-0.771-0.771-0.771-1.896 0-1.146 0.76-1.906t1.906-0.76zM13.333 10.667q1.104 0 1.875 0.771l18.667 18.667q0.792 0.792 0.792 1.896t-0.792 1.896l-18.667 18.667q-0.771 0.771-1.875 0.771t-1.885-0.781-0.781-1.885q0-1.125 0.771-1.896l16.771-16.771-16.771-16.771q-0.771-0.771-0.771-1.896 0-1.146 0.76-1.906t1.906-0.76z" />
</svg>
</div>
<div class="container">
<!-- Top Navigation -->
<div class="codrops-top clearfix">
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/ArticleIntroEffects/"><span>Previous Demo</span></a>
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=19164"><span>Back to the Codrops Article</span></a></span>
</div>
<header class="codrops-header">
<h1>Arrow Navigation Styles <span>Ideas for arrow navigation effects and styles</span><span class="info">Scroll down</span></h1>
</header>
<section class="color-1">
<h2>Slide</h2>
<nav class="nav-slide">
<a class="prev" href="/item1">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-1"></svg></span>
<div>
<h3>Nothing to Loose <span>by Zach Wallis</span></h3>
<img src="img/1.png" alt="Previous thumb"/>
</div>
</a>
<a class="next" href="/item3">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-1"></svg></span>
<div>
<h3>Metro Love Stories <span>by Andrea Satorini</span></h3>
<img src="img/2.png" alt="Next thumb"/>
</div>
</a>
</nav>
</section>
<section class="color-2">
<h2>Image Bar</h2>
<nav class="nav-imgbar">
<a class="prev" href="/item1">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-2"></svg></span>
<img src="img/3.jpg" alt="Previous thumb"/>
</a>
<a class="next" href="/item3">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-2"></svg></span>
<img src="img/4.jpg" alt="Next thumb"/>
</a>
</nav>
</section>
<section class="color-3">
<h2>Circle Pop</h2>
<nav class="nav-circlepop">
<a class="prev" href="/item1">
<span class="icon-wrap"></span>
</a>
<a class="next" href="/item3">
<span class="icon-wrap"></span>
</a>
</nav>
</section>
<section class="color-4">
<h2>Round Slide</h2>
<nav class="nav-roundslide">
<a class="prev" href="/item1">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-4"></svg></span>
<h3>Hannah Leigh</h3>
</a>
<a class="next" href="/item3">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-4"></svg></span>
<h3>Greg Kennedy</h3>
</a>
</nav>
</section>
<section class="color-5">
<h2>Split</h2>
<nav class="nav-slit">
<a class="prev" href="/item1">
<span class="icon-wrap"><svg class="icon" width="22" height="22" viewBox="0 0 64 64"><use xlink:href="#arrow-left-1"></svg></span>
<div>
<h3>City Lights</h3>
<img src="img/5.png" alt="Previous thumb"/>
</div>
</a>
<a class="next" href="/item3">
<span class="icon-wrap"><svg class="icon" width="22" height="22" viewBox="0 0 64 64"><use xlink:href="#arrow-right-1"></svg></span>
<div>
<h3>Street Hills</h3>
<img src="img/6.png" alt="Next thumb"/>
</div>
</a>
</nav>
</section>
<section class="color-6">
<h2>Reveal</h2>
<nav class="nav-reveal">
<a class="prev" href="/item1">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-3"></svg></span>
<div>
<h3>Moments of Freedom and Other Stories <span>by Marina Wasilovna</span></h3>
<img src="img/7.png" alt="Previous thumb"/>
</div>
</a>
<a class="next" href="/item3">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-3"></svg></span>
<div>
<h3>Garage Rocket Ships for Sarah and Ben<span>by Aldous Morrison</span></h3>
<img src="img/8.png" alt="Next thumb"/>
</div>
</a>
</nav>
</section>
<section class="color-7">
<h2>Thumb Flip</h2>
<nav class="nav-thumbflip">
<a class="prev" href="/item1">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-5"></svg></span>
<img src="img/9.png" alt="Previous thumb"/>
</a>
<a class="next" href="/item3">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-5"></svg></span>
<img src="img/10.png" alt="Next thumb"/>
</a>
</nav>
</section>
<section class="color-8">
<h2>Double Flip</h2>
<nav class="nav-doubleflip">
<a class="prev" href="/item1">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-5"></svg></span>
<div>
<img src="img/11.png" alt="Previous thumb"/>
<h3>Party Girl</h3>
</div>
</a>
<a class="next" href="/item3">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-5"></svg></span>
<div>
<img src="img/12.png" alt="Next thumb"/>
<h3>True Honey</h3>
</div>
</a>
</nav>
</section>
<section class="color-9">
<h2>Multi Thumb</h2>
<nav class="nav-multithumb">
<a class="prev" href="/item1">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-3"></svg></span>
<div>
<img src="img/13.png" alt="Thumb 1"/>
<img src="img/14.png" alt="Thumb 2"/>
<img src="img/15.png" alt="Thumb 3"/>
</div>
</a>
<a class="next" href="/item3">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-3"></svg></span>
<div>
<img src="img/16.png" alt="Thumb 1"/>
<img src="img/17.png" alt="Thumb 2"/>
<img src="img/18.png" alt="Thumb 3"/>
</div>
</a>
</nav>
</section>
<section class="color-5">
<h2>Circle Slide</h2>
<nav class="nav-circleslide">
<a class="prev" href="/item1">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-1"></svg></span>
<div><img src="img/23.png" alt="Previous thumb"/></div>
</a>
<a class="next" href="/item3">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-1"></svg></span>
<div><img src="img/24.png" alt="Next thumb"/></div>
</a>
</nav>
</section>
<section class="color-3">
<h2>Grow Pop</h2>
<nav class="nav-growpop">
<a class="prev" href="/item1">
<span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-left-2"></svg></span>
<div>
<span>Previous Story</span>
<h3>Child full of grace saviour of the human race</h3>
<p>by Holly Brighton</p>
<img src="img/22.png" alt="Previous thumb"/>
</div>
</a>
<a class="next" href="/item3">
<span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-right-2"></svg></span>
<div>
<span>Next Story</span>
<h3>Ancient rulage of grains and the trees of the night</h3>
<p>by Mark Ustinov</p>
<img src="img/21.png" alt="Next thumb"/>
</div>
</a>
</nav>
</section>
<section class="color-4">
<h2>Diamond</h2>
<nav class="nav-diamond">
<a class="prev" href="/item1">
<span class="icon-wrap"><svg class="icon" width="28" height="28" viewBox="0 0 64 64"><use xlink:href="#arrow-left-1"></svg></span>
<div><img src="img/10.png" alt="Previous thumb"/></div>
</a>
<a class="next" href="/item3">
<span class="icon-wrap"><svg class="icon" width="28" height="28" viewBox="0 0 64 64"><use xlink:href="#arrow-right-1"></svg></span>
<div><img src="img/7.png" alt="Next thumb"/></div>
</a>
</nav>
</section>
<section class="color-10">
<h2>Fill Slide</h2>
<nav class="nav-fillslide">
<a class="prev" href="/item1">
<span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-left-4"></svg></span>
<div>
<h3>Hunger at her heels freedom in her eyes</h3>
<span>by Maria S. Walton</span>
<img src="img/19.png" alt="Previous thumb"/>
</div>
</a>
<a class="next" href="/item3">
<span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-right-4"></svg></span>
<div>
<h3>She dances on her knees pirate prince at her side</h3>
<span>by Emily Van Groen</span>
<img src="img/20.png" alt="Next thumb"/>
</div>
</a>
</nav>
</section>
<section class="color-1">
<h2>Fill Path</h2>
<nav class="nav-fillpath">
<a class="prev" href="/item1">
<span class="icon-wrap"></span>
<h3><strong>Danny</strong> Fleming</h3>
</a>
<a class="next" href="/item3">
<span class="icon-wrap"></span>
<h3><strong>Susan</strong> Walter</h3>
</a>
</nav>
</section>
<section class="related">
<p>If you enjoyed this demo you might also like:</p>
<a href="http://tympanus.net/Development/DotNavigationStyles/">
<img src="http://tympanus.net/codrops/wp-content/uploads/2014/01/DotNavigationStyles-300x162.png" />
<h3>Dot Navigation Styles</h3>
</a>
<a href="http://tympanus.net/Development/CreativeLinkEffects/">
<img src="http://tympanus.net/codrops/wp-content/uploads/2013/08/CreativeLinkEffects1-300x162.png" />
<h3>Creative Link Effects</h3>
</a>
</section>
</div><!-- /container -->
<script>
// For Demo purposes only
[].slice.call( document.querySelectorAll('nav > a') ).forEach( function(el) {
el.addEventListener( 'click', function(ev) { ev.preventDefault(); } );
} );
</script>
</body>
</html>