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>Parallax - UIkit tests</title>
|
8 | <script src="js/test.js"></script>
|
9 | <style type="text/css">
|
10 |
|
11 | .test-color { border: 10px #fff solid; }
|
12 |
|
13 | </style>
|
14 | </head>
|
15 |
|
16 | <body>
|
17 |
|
18 |
|
19 | <div class="uk-section-default">
|
20 | <div class="uk-section uk-background-cover uk-background-primary uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -400; sepia:100" uk-height-viewport="offset-top: true">
|
21 |
|
22 | <h1 class="uk-heading-xlarge uk-margin-auto uk-margin-auto-vertical">Parallax</h1>
|
23 |
|
24 | </div>
|
25 | </div>
|
26 |
|
27 | <div class="uk-section uk-section-default">
|
28 | <div class="uk-container">
|
29 |
|
30 | <h2>Target</h2>
|
31 |
|
32 | <div id="test-target" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: -400">
|
33 | <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
|
34 | <h1 uk-parallax="target: #test-target; opacity: 0; y: -200; scale: 2">Headline</h1>
|
35 | <p uk-parallax="target: #test-target; opacity: 0; y: 200; scale: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
36 | </div>
|
37 | </div>
|
38 |
|
39 | <h2>Units (Viewport)</h2>
|
40 |
|
41 | <div id="test-units" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: -20vw">
|
42 | <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
|
43 | <h1 uk-parallax="target: #test-units; opacity: 0; y: -20vw">Headline</h1>
|
44 | <p uk-parallax="target: #test-units; opacity: 0; y: 20vw">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
45 | </div>
|
46 | </div>
|
47 |
|
48 | <h2>Start + End (Reverse)</h2>
|
49 |
|
50 | <div id="test-reverse" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -200">
|
51 | <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
|
52 | <h1 uk-parallax="target: #test-reverse; opacity: 0,1; y: -200,0; scale: 2,1; viewport: 0.5">Headline</h1>
|
53 | <p uk-parallax="target: #test-reverse; opacity: 0,1; y: 200,0; scale: 0,1; viewport: 0.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
54 | </div>
|
55 | </div>
|
56 |
|
57 | <h2>Easing</h2>
|
58 |
|
59 | <div id="test-easing" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -200">
|
60 | <div class="uk-grid uk-margin-auto uk-margin-auto-vertical uk-flex-inline">
|
61 | <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: -3">-3</div></div>
|
62 | <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: -2">-2</div></div>
|
63 | <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: -1">-1</div></div>
|
64 | <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: -0.5">-0.5</div></div>
|
65 | <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: 0">0</div></div>
|
66 | <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: 0.5">0.5</div></div>
|
67 | <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: 1">1</div></div>
|
68 | <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: 2">2</div></div>
|
69 | <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: 3">3</div></div>
|
70 | </div>
|
71 | </div>
|
72 |
|
73 | <h2>Color and Viewport</h2>
|
74 |
|
75 | <div id="test-color" class="test-color uk-height-large uk-margin uk-overflow-hidden uk-flex uk-flex-top" uk-parallax="background-color: yellow,white; border-color: #00f,#f00; viewport: 0.5">
|
76 | <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
|
77 | <h1 uk-parallax="target: #test-color; opacity: 0,1; y: -200%,0; viewport: 0.5">Headline</h1>
|
78 | <p uk-parallax="target: #test-color; opacity: 0,1; viewport: 0.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
79 | <p uk-parallax="target: #test-color; y: 200%,0; color: #0f0; viewport: 0.5">
|
80 | <span uk-icon="icon: uikit; ratio: 2"></span>
|
81 | <span uk-icon="icon: heart; ratio: 2"></span>
|
82 | <span uk-icon="icon: check; ratio: 2"></span>
|
83 | </p>
|
84 | </div>
|
85 | </div>
|
86 |
|
87 | <h2>Filter</h2>
|
88 |
|
89 | <div id="test-filter" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');" uk-parallax="invert: 100; viewport: 0.5">
|
90 | <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
|
91 | <h1 uk-parallax="target: #test-filter; opacity: 0,1; y: -200%,0; viewport: 0.5">Headline</h1>
|
92 | <p uk-parallax="target: #test-filter; opacity: 0,1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
93 | <p uk-parallax="target: #test-filter; blur: 20,0; viewport: 0.5">
|
94 | <span uk-icon="icon: uikit; ratio: 2"></span>
|
95 | <span uk-icon="icon: heart; ratio: 2"></span>
|
96 | <span uk-icon="icon: check; ratio: 2"></span>
|
97 | </p>
|
98 | </div>
|
99 | </div>
|
100 |
|
101 | <h2>Multiple Steps</h2>
|
102 |
|
103 | <div class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,200,0,200">
|
104 | <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
|
105 | <h1 uk-parallax="x: -200,200,-200,200; scale: 2,1,2,1;">Headline</h1>
|
106 | <p uk-parallax="x: 200,-200,200,-200; scale: 1,0,1,0,1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
107 | </div>
|
108 | </div>
|
109 |
|
110 | <h2>SVG Stroke</h2>
|
111 |
|
112 | <div id="test-stroke" class="uk-child-width-expand uk-text-center" uk-grid>
|
113 | <div uk-parallax="target: #test-stroke; stroke: 45; viewport: 0.8">
|
114 |
|
115 | <img width="400" height="400" src="images/icons.svg#cloud-upload" uk-svg alt="">
|
116 |
|
117 | </div>
|
118 | <div uk-parallax="target: #test-stroke; stroke: 100%,0; viewport: 0.8">
|
119 |
|
120 | <img width="400" height="400" src="images/icons.svg#cloud-upload" uk-svg alt="">
|
121 |
|
122 | </div>
|
123 | </div>
|
124 |
|
125 | <h2>JavaScript Options</h2>
|
126 |
|
127 | <div class="uk-overflow-auto">
|
128 | <table class="uk-table uk-table-striped">
|
129 | <thead>
|
130 | <tr>
|
131 | <th>Option</th>
|
132 | <th>Value</th>
|
133 | <th>Default</th>
|
134 | <th>Description</th>
|
135 | </tr>
|
136 | </thead>
|
137 | <tbody>
|
138 | <tr>
|
139 | <td><code>easing</code></td>
|
140 | <td>Number</td>
|
141 | <td>1</td>
|
142 | <td>Animation easing during scrolling.</td>
|
143 | </tr>
|
144 | <tr>
|
145 | <td><code>target</code></td>
|
146 | <td>String</td>
|
147 | <td>false</td>
|
148 | <td>Element dimension reference for animation duration.</td>
|
149 | </tr>
|
150 | <tr>
|
151 | <td><code>viewport</code></td>
|
152 | <td>Number</td>
|
153 | <td>1</td>
|
154 | <td>Animation range depending on the viewport.</td>
|
155 | </tr>
|
156 | <tr>
|
157 | <td><code>media</code></td>
|
158 | <td>Integer|String</td>
|
159 | <td>false</td>
|
160 | <td>Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).</td>
|
161 | </tr>
|
162 | </tbody>
|
163 | </table>
|
164 | </div>
|
165 |
|
166 | <h2>Animated properties</h2>
|
167 |
|
168 | <p>You can define multiple steps by using a comma separated list of values. (e.g. x: 0,50,150)</p>
|
169 |
|
170 | <div class="uk-overflow-auto">
|
171 | <table class="uk-table uk-table-striped">
|
172 | <thead>
|
173 | <tr>
|
174 | <th>Option</th>
|
175 | <th>Default Unit</th>
|
176 | <th>Description</th>
|
177 | </tr>
|
178 | </thead>
|
179 | <tbody>
|
180 | <tr>
|
181 | <td><code>x</code></td>
|
182 | <td><code>px</code></td>
|
183 | <td>Animate translateX.</td>
|
184 | </tr>
|
185 | <tr>
|
186 | <td><code>y</code></td>
|
187 | <td><code>px</code></td>
|
188 | <td>Animate translateY.</td>
|
189 | </tr>
|
190 | <tr>
|
191 | <td><code>bgy</code></td>
|
192 | <td><code>px</code></td>
|
193 | <td>Animate a background image (y-axis).</td>
|
194 | </tr>
|
195 | <tr>
|
196 | <td><code>bgx</code></td>
|
197 | <td><code>px</code></td>
|
198 | <td>Animate a background image (x-axis).</td>
|
199 | </tr>
|
200 | <tr>
|
201 | <td><code>rotate</code></td>
|
202 | <td><code>deg</code></td>
|
203 | <td>Animate rotation clockwise.</td>
|
204 | </tr>
|
205 | <tr>
|
206 | <td><code>scale</code></td>
|
207 | <td></td>
|
208 | <td>Animate scaling.</td>
|
209 | </tr>
|
210 | <tr>
|
211 | <td><code>color</code></td>
|
212 | <td></td>
|
213 | <td>Animate color (needs start and stop value).</td>
|
214 | </tr>
|
215 | <tr>
|
216 | <td><code>background-color</code></td>
|
217 | <td></td>
|
218 | <td>Animate background-color (needs start and stop value).</td>
|
219 | </tr>
|
220 | <tr>
|
221 | <td><code>border-color</code></td>
|
222 | <td></td>
|
223 | <td>Animate border color (needs start and stop value).</td>
|
224 | </tr>
|
225 | <tr>
|
226 | <td><code>opacity</code></td>
|
227 | <td></td>
|
228 | <td>Animate the opacity.</td>
|
229 | </tr>
|
230 | <tr>
|
231 | <td><code>blur</code></td>
|
232 | <td><code>px</code></td>
|
233 | <td>Animate the blur filter.</td>
|
234 | </tr>
|
235 | <tr>
|
236 | <td><code>hue</code></td>
|
237 | <td><code>deg</code></td>
|
238 | <td>Animate the hue rotation filter.</td>
|
239 | </tr>
|
240 | <tr>
|
241 | <td><code>grayscale</code></td>
|
242 | <td><code>%</code></td>
|
243 | <td>Animate the grayscale filter.</td>
|
244 | </tr>
|
245 | <tr>
|
246 | <td><code>invert</code></td>
|
247 | <td><code>%</code></td>
|
248 | <td>Animate the invert filter.</td>
|
249 | </tr>
|
250 | <tr>
|
251 | <td><code>saturate</code></td>
|
252 | <td><code>%</code></td>
|
253 | <td>Animate the saturate filter.</td>
|
254 | </tr>
|
255 | <tr>
|
256 | <td><code>sepia</code></td>
|
257 | <td><code>%</code></td>
|
258 | <td>Animate the sepia filter.</td>
|
259 | </tr>
|
260 | <tr>
|
261 | <td><code>stroke</code></td>
|
262 | <td></td>
|
263 | <td>Animate strokes within SVG images.</td>
|
264 | </tr>
|
265 | </tbody>
|
266 | </table>
|
267 | </div>
|
268 |
|
269 | </div>
|
270 | </div>
|
271 |
|
272 | </body>
|
273 | </html>
|