1 | <!DOCTYPE html>
|
2 | <html lang="en-gb" dir="ltr">
|
3 |
|
4 | <head>
|
5 | <meta charset="utf-8">
|
6 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
7 | <title>Scrollspy - UIkit tests</title>
|
8 | <script src="js/test.js"></script>
|
9 | <style>
|
10 |
|
11 | .test-fixed {
|
12 | position: fixed;
|
13 | top: 20px;
|
14 | right: 20px;
|
15 | z-index: 1;
|
16 | }
|
17 |
|
18 | </style>
|
19 | </head>
|
20 |
|
21 | <body>
|
22 |
|
23 | <div class="uk-card uk-card-default uk-card-body test-fixed">
|
24 | <h3 class="uk-card-title">Scrollspy Nav</h3>
|
25 | <ul class="uk-nav uk-nav-default" uk-scrollspy-nav="closest: li; scroll: true">
|
26 | <li><a href="#animation-repeat">Single</a></li>
|
27 | <li><a href="#animation-delay">Group</a></li>
|
28 | <li><a href="#animation-fade">Fade</a></li>
|
29 | <li><a href="#animation-scale-up">Scale Up</a></li>
|
30 | <li><a href="#animation-scale-down">Scale Down</a></li>
|
31 | <li><a href="#animation-slide-left">Slide Left</a></li>
|
32 | <li><a href="#animation-slide-right">Slide Right</a></li>
|
33 | <li><a href="#animation-slide-top">Slide Top</a></li>
|
34 | <li><a href="#animation-slide-bottom">Slide Bottom</a></li>
|
35 | <li><a href="#animation-different">Different Animations</a></li>
|
36 | <li><a href="#animation-stroke">Stroke</a></li>
|
37 | <li><a href="#animation-stroke-fade">Stroke + Fade</a></li>
|
38 | <li><a href="#adjacent1">Adjacent 1</a></li>
|
39 | <li><a href="#adjacent2">Adjacent 2</a></li>
|
40 | </ul>
|
41 | </div>
|
42 |
|
43 | <div class="uk-container">
|
44 |
|
45 | <h1>ScrollSpy</h1>
|
46 |
|
47 | <h2 id="animation-repeat">Single, Repeat, Delay</h2>
|
48 |
|
49 | <div class="uk-child-width-1-4@m" uk-grid uk-height-match="target: .uk-card">
|
50 | <div>
|
51 | <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-fade">
|
52 | <p>The element is animated only the first time it appears in the viewport.</p>
|
53 | </div>
|
54 | </div>
|
55 | <div>
|
56 | <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-right; repeat: true">
|
57 | <p>The element is animated every time it appears in the viewport.</p>
|
58 | </div>
|
59 | </div>
|
60 | <div>
|
61 | <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-right; delay: 1500; repeat: true">
|
62 | <p>The element is animated every time it appears in the viewport but delayed by 1.5s.</p>
|
63 | </div>
|
64 | </div>
|
65 | </div>
|
66 |
|
67 | <h2 id="animation-delay">Group, Repeat, Delay</h2>
|
68 |
|
69 | <div class="uk-child-width-1-4@m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: .uk-card; delay: 300; repeat: true">
|
70 | <div>
|
71 | <div class="uk-card uk-card-default uk-card-body">
|
72 | <p>The animation of this element is delayed by some milliseconds.</p>
|
73 | </div>
|
74 | </div>
|
75 | <div>
|
76 | <div class="uk-card uk-card-default uk-card-body">
|
77 | <p>The animation of this element is delayed by some milliseconds.</p>
|
78 | </div>
|
79 | </div>
|
80 | <div>
|
81 | <div class="uk-card uk-card-default uk-card-body">
|
82 | <p>The animation of this element is delayed by some milliseconds.</p>
|
83 | </div>
|
84 | </div>
|
85 | <div>
|
86 | <div class="uk-card uk-card-default uk-card-body">
|
87 | <p>The animation of this element is delayed by some milliseconds.</p>
|
88 | </div>
|
89 | </div>
|
90 | </div>
|
91 |
|
92 | <h2 id="animation-fade">Group: Fade</h2>
|
93 |
|
94 | <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-fade; target: .uk-card; delay: 300; repeat: true">
|
95 | <div>
|
96 | <div class="uk-card uk-card-default uk-card-body">
|
97 | <h3 class="uk-card-title">Fade</h3>
|
98 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
99 | </div>
|
100 | </div>
|
101 | <div>
|
102 | <div class="uk-card uk-card-default uk-card-body">
|
103 | <h3 class="uk-card-title">Fade</h3>
|
104 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
105 | </div>
|
106 | </div>
|
107 | <div>
|
108 | <div class="uk-card uk-card-default uk-card-body">
|
109 | <h3 class="uk-card-title">Fade</h3>
|
110 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
111 | </div>
|
112 | </div>
|
113 | <div>
|
114 | <div class="uk-card uk-card-default uk-card-body">
|
115 | <h3 class="uk-card-title">Fade</h3>
|
116 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
117 | </div>
|
118 | </div>
|
119 | </div>
|
120 |
|
121 | <h2 id="animation-scale-up">Group: Scale Up</h2>
|
122 |
|
123 | <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-scale-up; target: .uk-card; delay: 300; repeat: true">
|
124 | <div>
|
125 | <div class="uk-card uk-card-default uk-card-body">
|
126 | <h3 class="uk-card-title">Scale Up</h3>
|
127 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
128 | </div>
|
129 | </div>
|
130 | <div>
|
131 | <div class="uk-card uk-card-default uk-card-body">
|
132 | <h3 class="uk-card-title">Scale Up</h3>
|
133 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
134 | </div>
|
135 | </div>
|
136 | <div>
|
137 | <div class="uk-card uk-card-default uk-card-body">
|
138 | <h3 class="uk-card-title">Scale Up</h3>
|
139 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
140 | </div>
|
141 | </div>
|
142 | <div>
|
143 | <div class="uk-card uk-card-default uk-card-body">
|
144 | <h3 class="uk-card-title">Scale Up</h3>
|
145 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
146 | </div>
|
147 | </div>
|
148 |
|
149 | <div>
|
150 | <div class="uk-card uk-card-default uk-card-body">
|
151 | <h3 class="uk-card-title">Scale Up</h3>
|
152 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
153 | </div>
|
154 | </div>
|
155 | <div>
|
156 | <div class="uk-card uk-card-default uk-card-body">
|
157 | <h3 class="uk-card-title">Scale Up</h3>
|
158 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
159 | </div>
|
160 | </div>
|
161 | <div>
|
162 | <div class="uk-card uk-card-default uk-card-body">
|
163 | <h3 class="uk-card-title">Scale Up</h3>
|
164 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
165 | </div>
|
166 | </div>
|
167 | <div>
|
168 | <div class="uk-card uk-card-default uk-card-body">
|
169 | <h3 class="uk-card-title">Scale Up</h3>
|
170 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
171 | </div>
|
172 | </div><div>
|
173 | <div class="uk-card uk-card-default uk-card-body">
|
174 | <h3 class="uk-card-title">Scale Up</h3>
|
175 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
176 | </div>
|
177 | </div>
|
178 | <div>
|
179 | <div class="uk-card uk-card-default uk-card-body">
|
180 | <h3 class="uk-card-title">Scale Up</h3>
|
181 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
182 | </div>
|
183 | </div>
|
184 | <div>
|
185 | <div class="uk-card uk-card-default uk-card-body">
|
186 | <h3 class="uk-card-title">Scale Up</h3>
|
187 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
188 | </div>
|
189 | </div>
|
190 | <div>
|
191 | <div class="uk-card uk-card-default uk-card-body">
|
192 | <h3 class="uk-card-title">Scale Up</h3>
|
193 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
194 | </div>
|
195 | </div>
|
196 | <div>
|
197 | <div class="uk-card uk-card-default uk-card-body">
|
198 | <h3 class="uk-card-title">Scale Up</h3>
|
199 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
200 | </div>
|
201 | </div>
|
202 | <div>
|
203 | <div class="uk-card uk-card-default uk-card-body">
|
204 | <h3 class="uk-card-title">Scale Up</h3>
|
205 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
206 | </div>
|
207 | </div>
|
208 | <div>
|
209 | <div class="uk-card uk-card-default uk-card-body">
|
210 | <h3 class="uk-card-title">Scale Up</h3>
|
211 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
212 | </div>
|
213 | </div>
|
214 | <div>
|
215 | <div class="uk-card uk-card-default uk-card-body">
|
216 | <h3 class="uk-card-title">Scale Up</h3>
|
217 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
218 | </div>
|
219 | </div>
|
220 | <div>
|
221 | <div class="uk-card uk-card-default uk-card-body">
|
222 | <h3 class="uk-card-title">Scale Up</h3>
|
223 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
224 | </div>
|
225 | </div>
|
226 | <div>
|
227 | <div class="uk-card uk-card-default uk-card-body">
|
228 | <h3 class="uk-card-title">Scale Up</h3>
|
229 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
230 | </div>
|
231 | </div>
|
232 | <div>
|
233 | <div class="uk-card uk-card-default uk-card-body">
|
234 | <h3 class="uk-card-title">Scale Up</h3>
|
235 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
236 | </div>
|
237 | </div>
|
238 | <div>
|
239 | <div class="uk-card uk-card-default uk-card-body">
|
240 | <h3 class="uk-card-title">Scale Up</h3>
|
241 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
242 | </div>
|
243 | </div>
|
244 |
|
245 | </div>
|
246 |
|
247 | <h2 id="animation-scale-down">Group: Scale Down</h2>
|
248 |
|
249 | <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-scale-down; target: .uk-card; delay: 300; repeat: true">
|
250 | <div>
|
251 | <div class="uk-card uk-card-default uk-card-body">
|
252 | <h3 class="uk-card-title">Scale Down</h3>
|
253 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
254 | </div>
|
255 | </div>
|
256 | <div>
|
257 | <div class="uk-card uk-card-default uk-card-body">
|
258 | <h3 class="uk-card-title">Scale Down</h3>
|
259 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
260 | </div>
|
261 | </div>
|
262 | <div>
|
263 | <div class="uk-card uk-card-default uk-card-body">
|
264 | <h3 class="uk-card-title">Scale Down</h3>
|
265 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
266 | </div>
|
267 | </div>
|
268 | <div>
|
269 | <div class="uk-card uk-card-default uk-card-body">
|
270 | <h3 class="uk-card-title">Scale Down</h3>
|
271 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
272 | </div>
|
273 | </div>
|
274 | </div>
|
275 |
|
276 | <h2 id="animation-slide-left">Group: Left</h2>
|
277 |
|
278 | <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-left; target: .uk-card; delay: 300; repeat: true">
|
279 | <div>
|
280 | <div class="uk-card uk-card-default uk-card-body">
|
281 | <h3 class="uk-card-title">Left</h3>
|
282 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
283 | </div>
|
284 | </div>
|
285 | <div>
|
286 | <div class="uk-card uk-card-default uk-card-body">
|
287 | <h3 class="uk-card-title">Left</h3>
|
288 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
289 | </div>
|
290 | </div>
|
291 | <div>
|
292 | <div class="uk-card uk-card-default uk-card-body">
|
293 | <h3 class="uk-card-title">Left</h3>
|
294 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
295 | </div>
|
296 | </div>
|
297 | <div>
|
298 | <div class="uk-card uk-card-default uk-card-body">
|
299 | <h3 class="uk-card-title">Left</h3>
|
300 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
301 | </div>
|
302 | </div>
|
303 | </div>
|
304 |
|
305 | <h2 id="animation-slide-right">Group: Right</h2>
|
306 |
|
307 | <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-right; target: .uk-card; delay: 300; repeat: true">
|
308 | <div>
|
309 | <div class="uk-card uk-card-default uk-card-body">
|
310 | <h3 class="uk-card-title">Right</h3>
|
311 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
312 | </div>
|
313 | </div>
|
314 | <div>
|
315 | <div class="uk-card uk-card-default uk-card-body">
|
316 | <h3 class="uk-card-title">Right</h3>
|
317 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
318 | </div>
|
319 | </div>
|
320 | <div>
|
321 | <div class="uk-card uk-card-default uk-card-body">
|
322 | <h3 class="uk-card-title">Right</h3>
|
323 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
324 | </div>
|
325 | </div>
|
326 | <div>
|
327 | <div class="uk-card uk-card-default uk-card-body">
|
328 | <h3 class="uk-card-title">Right</h3>
|
329 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
330 | </div>
|
331 | </div>
|
332 | </div>
|
333 |
|
334 | <h2 id="animation-slide-top">Group: Top</h2>
|
335 |
|
336 | <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-top; target: .uk-card; delay: 300; repeat: true">
|
337 | <div>
|
338 | <div class="uk-card uk-card-default uk-card-body">
|
339 | <h3 class="uk-card-title">Top</h3>
|
340 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
341 | </div>
|
342 | </div>
|
343 | <div>
|
344 | <div class="uk-card uk-card-default uk-card-body">
|
345 | <h3 class="uk-card-title">Top</h3>
|
346 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
347 | </div>
|
348 | </div>
|
349 | <div>
|
350 | <div class="uk-card uk-card-default uk-card-body">
|
351 | <h3 class="uk-card-title">Top</h3>
|
352 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
353 | </div>
|
354 | </div>
|
355 | <div>
|
356 | <div class="uk-card uk-card-default uk-card-body">
|
357 | <h3 class="uk-card-title">Top</h3>
|
358 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
359 | </div>
|
360 | </div>
|
361 | </div>
|
362 |
|
363 | <h2 id="animation-slide-bottom">Group: Bottom</h2>
|
364 |
|
365 | <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom; target: .uk-card; delay: 300; repeat: true">
|
366 | <div>
|
367 | <div class="uk-card uk-card-default uk-card-body">
|
368 | <h3 class="uk-card-title">Bottom</h3>
|
369 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
370 | </div>
|
371 | </div>
|
372 | <div>
|
373 | <div class="uk-card uk-card-default uk-card-body">
|
374 | <h3 class="uk-card-title">Bottom</h3>
|
375 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
376 | </div>
|
377 | </div>
|
378 | <div>
|
379 | <div class="uk-card uk-card-default uk-card-body">
|
380 | <h3 class="uk-card-title">Bottom</h3>
|
381 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
382 | </div>
|
383 | </div>
|
384 | <div>
|
385 | <div class="uk-card uk-card-default uk-card-body">
|
386 | <h3 class="uk-card-title">Bottom</h3>
|
387 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
388 | </div>
|
389 | </div>
|
390 | </div>
|
391 |
|
392 | <h2 id="animation-different">Different Animations</h2>
|
393 |
|
394 | <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom; target: .uk-card; delay: 300; repeat: true">
|
395 | <div>
|
396 | <div class="uk-card uk-card-default uk-card-body">
|
397 | <h3 class="uk-card-title">Bottom</h3>
|
398 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
399 | </div>
|
400 | </div>
|
401 | <div>
|
402 | <div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-slide-top">
|
403 | <h3 class="uk-card-title">Top</h3>
|
404 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
405 | </div>
|
406 | </div>
|
407 | <div>
|
408 | <div class="uk-card uk-card-default uk-card-body">
|
409 | <h3 class="uk-card-title">Bottom</h3>
|
410 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
411 | </div>
|
412 | </div>
|
413 | <div>
|
414 | <div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-slide-top">
|
415 | <h3 class="uk-card-title">Top</h3>
|
416 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
417 | </div>
|
418 | </div>
|
419 | </div>
|
420 |
|
421 | <h2 id="animation-stroke">Group: Stroke</h2>
|
422 |
|
423 | <div class="uk-child-width-1-4@m uk-text-center uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-stroke; target: svg; delay: 300; repeat: true">
|
424 | <div>
|
425 | <div class="uk-card uk-card-default uk-card-body">
|
426 | <h3 class="uk-card-title">Stroke</h3>
|
427 | <img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
|
428 | </div>
|
429 | </div>
|
430 | <div>
|
431 | <div class="uk-card uk-card-default uk-card-body">
|
432 | <h3 class="uk-card-title">Stroke</h3>
|
433 | <img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
|
434 | </div>
|
435 | </div>
|
436 | <div>
|
437 | <div class="uk-card uk-card-default uk-card-body">
|
438 | <h3 class="uk-card-title">Stroke</h3>
|
439 | <img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
|
440 | </div>
|
441 | </div>
|
442 | <div>
|
443 | <div class="uk-card uk-card-default uk-card-body">
|
444 | <h3 class="uk-card-title">Stroke</h3>
|
445 | <img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
|
446 | </div>
|
447 | </div>
|
448 | </div>
|
449 |
|
450 | <h2 id="animation-stroke-fade">Different Animations: Stroke + Fade</h2>
|
451 |
|
452 | <div class="uk-child-width-1-4@m uk-text-center uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-stroke; target: .uk-card, svg; delay: 300; repeat: true">
|
453 | <div>
|
454 | <div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-fade">
|
455 | <h3 class="uk-card-title">Stroke</h3>
|
456 | <img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
|
457 | </div>
|
458 | </div>
|
459 | <div>
|
460 | <div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-fade">
|
461 | <h3 class="uk-card-title">Stroke</h3>
|
462 | <img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
|
463 | </div>
|
464 | </div>
|
465 | <div>
|
466 | <div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-fade">
|
467 | <h3 class="uk-card-title">Stroke</h3>
|
468 | <img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
|
469 | </div>
|
470 | </div>
|
471 | <div>
|
472 | <div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-fade">
|
473 | <h3 class="uk-card-title">Stroke</h3>
|
474 | <img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
|
475 | </div>
|
476 | </div>
|
477 | </div>
|
478 |
|
479 | <h2>Adjacent Sibling (Test for Scrollspy Nav)</h2>
|
480 |
|
481 | <div id="adjacent1" class="uk-section uk-section-primary uk-text-center">
|
482 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
483 | </div>
|
484 | <div id="adjacent2" class="uk-section uk-section-secondary uk-text-center">
|
485 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
486 | </div>
|
487 |
|
488 | <h2>JavaScript Options</h2>
|
489 |
|
490 | <h3>Scrollspy</h3>
|
491 |
|
492 | <div class="uk-overflow-auto">
|
493 | <table class="uk-table uk-table-striped">
|
494 | <thead>
|
495 | <tr>
|
496 | <th>Option</th>
|
497 | <th>Value</th>
|
498 | <th>Default</th>
|
499 | <th>Description</th>
|
500 | </tr>
|
501 | </thead>
|
502 | <tbody>
|
503 | <tr>
|
504 | <td><code>cls</code></td>
|
505 | <td>String</td>
|
506 | <td>``</td>
|
507 | <td>Class to toggle when the element enters/leaves viewport.</td>
|
508 | </tr>
|
509 | <tr>
|
510 | <td><code>hidden</code></td>
|
511 | <td>Boolean</td>
|
512 | <td>true</td>
|
513 | <td>Hides the element while out of view.</td>
|
514 | </tr>
|
515 | <tr>
|
516 | <td><code>offset-top</code></td>
|
517 | <td>Number</td>
|
518 | <td>0</td>
|
519 | <td>Top offset before triggering in view.</td>
|
520 | </tr>
|
521 | <tr>
|
522 | <td><code>offset-left</code></td>
|
523 | <td>Number</td>
|
524 | <td>0</td>
|
525 | <td>Left offset before triggering in view.</td>
|
526 | </tr>
|
527 | <tr>
|
528 | <td><code>repeat</code></td>
|
529 | <td>Boolean</td>
|
530 | <td>false</td>
|
531 | <td>Applies the 'cls' class every time the element is in view.</td>
|
532 | </tr>
|
533 | <tr>
|
534 | <td><code>delay</code></td>
|
535 | <td>Number</td>
|
536 | <td>0</td>
|
537 | <td>Delay time in ms.</td>
|
538 | </tr>
|
539 | </tbody>
|
540 | </table>
|
541 | </div>
|
542 |
|
543 | <h3>Scrollspy Nav</h3>
|
544 |
|
545 | <div class="uk-overflow-auto">
|
546 | <table class="uk-table uk-table-striped">
|
547 | <thead>
|
548 | <tr>
|
549 | <th>Option</th>
|
550 | <th>Value</th>
|
551 | <th>Default</th>
|
552 | <th>Description</th>
|
553 | </tr>
|
554 | </thead>
|
555 | <tbody>
|
556 | <tr>
|
557 | <td><code>cls</code></td>
|
558 | <td>String</td>
|
559 | <td>uk-active</td>
|
560 | <td>Class to add to the active links.</td>
|
561 | </tr>
|
562 | <tr>
|
563 | <td><code>closest</code></td>
|
564 | <td>String</td>
|
565 | <td>uk-scrollspy-init-inview</td>
|
566 | <td>Target to apply the class to.</td>
|
567 | </tr>
|
568 | <tr>
|
569 | <td><code>scroll</code></td>
|
570 | <td>Boolean</td>
|
571 | <td>false</td>
|
572 | <td>Adds the Scroll component to its links.</td>
|
573 | </tr>
|
574 | <tr>
|
575 | <td><code>overflow</code></td>
|
576 | <td>Boolean</td>
|
577 | <td>true</td>
|
578 | <td>If overflow is set to true, the first or last item will stay active if above or below the navigation.</td>
|
579 | </tr>
|
580 | <tr>
|
581 | <td><code>offset</code></td>
|
582 | <td>Number</td>
|
583 | <td>0</td>
|
584 | <td>Pixel offset added to scroll top.</td>
|
585 | </tr>
|
586 | </tbody>
|
587 | </table>
|
588 | </div>
|
589 |
|
590 | </div>
|
591 |
|
592 | </body>
|
593 | </html>
|