UNPKG

15.2 kBHTMLView Raw
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 <!-- uk-flex-top is needed to make vertical margin work for IE11 -->
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>