uikit 3.10.2-dev.c8aa7eda2 → 3.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +35 -14
- package/build/icons.js +4 -4
- package/build/scope.js +4 -6
- package/dist/css/uikit-core-rtl.css +10 -1
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +10 -1
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +10 -1
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +10 -1
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +1 -1
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +1 -1
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +1 -1
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +1 -1
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +1 -1
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +257 -264
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +215 -257
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +1 -1
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +215 -257
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +1 -1
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +1 -1
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +1 -1
- package/dist/js/components/tooltip.min.js +1 -1
- package/dist/js/components/upload.js +1 -1
- package/dist/js/components/upload.min.js +1 -1
- package/dist/js/uikit-core.js +28 -26
- package/dist/js/uikit-core.min.js +1 -1
- package/dist/js/uikit-icons.js +1 -1
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +284 -289
- package/dist/js/uikit.min.js +1 -1
- package/package.json +5 -5
- package/src/js/components/parallax.js +38 -8
- package/src/js/core/grid.js +2 -2
- package/src/js/core/svg.js +9 -7
- package/src/js/mixin/parallax.js +209 -242
- package/src/js/util/dimensions.js +4 -2
- package/src/js/util/viewport.js +9 -13
- package/src/less/components/position.less +2 -0
- package/src/less/components/sticky.less +6 -0
- package/src/scss/components/position.scss +2 -0
- package/src/scss/components/sticky.scss +6 -0
- package/tests/index.html +1 -1
- package/tests/js/index.js +1 -1
- package/tests/notification.html +5 -5
- package/tests/parallax.html +66 -50
- package/tests/sticky-parallax.html +274 -0
- package/tests/sticky.html +2 -2
- package/tests/tab.html +1 -1
package/tests/notification.html
CHANGED
|
@@ -93,31 +93,31 @@
|
|
|
93
93
|
<tbody>
|
|
94
94
|
<tr>
|
|
95
95
|
<td><code>message</code></td>
|
|
96
|
-
<td>
|
|
96
|
+
<td>String</td>
|
|
97
97
|
<td>false</td>
|
|
98
98
|
<td>Notification message to show.</td>
|
|
99
99
|
</tr>
|
|
100
100
|
<tr>
|
|
101
101
|
<td><code>status</code></td>
|
|
102
|
-
<td>
|
|
102
|
+
<td>String</td>
|
|
103
103
|
<td>null</td>
|
|
104
104
|
<td>Notification status color.</td>
|
|
105
105
|
</tr>
|
|
106
106
|
<tr>
|
|
107
107
|
<td><code>timeout</code></td>
|
|
108
|
-
<td>
|
|
108
|
+
<td>Number</td>
|
|
109
109
|
<td>5000</td>
|
|
110
110
|
<td>Visibility duration before a notification disappears.</td>
|
|
111
111
|
</tr>
|
|
112
112
|
<tr>
|
|
113
113
|
<td><code>group</code></td>
|
|
114
|
-
<td>
|
|
114
|
+
<td>String</td>
|
|
115
115
|
<td>null</td>
|
|
116
116
|
<td>Useful if you want to close all notifications in a specific group.</td>
|
|
117
117
|
</tr>
|
|
118
118
|
<tr>
|
|
119
119
|
<td><code>pos</code></td>
|
|
120
|
-
<td>
|
|
120
|
+
<td>String</td>
|
|
121
121
|
<td>top-center</td>
|
|
122
122
|
<td>Notification display position.</td>
|
|
123
123
|
</tr>
|
package/tests/parallax.html
CHANGED
|
@@ -15,9 +15,8 @@
|
|
|
15
15
|
|
|
16
16
|
<body>
|
|
17
17
|
|
|
18
|
-
<!-- uk-flex-top is needed to make vertical margin work for IE11 -->
|
|
19
18
|
<div class="uk-section-default">
|
|
20
|
-
<div class="uk-section uk-background-cover uk-background-primary uk-overflow-hidden uk-light uk-flex
|
|
19
|
+
<div class="uk-section uk-background-cover uk-background-primary uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -400; sepia:100" uk-height-viewport="offset-top: true">
|
|
21
20
|
|
|
22
21
|
<h1 class="uk-heading-xlarge uk-margin-auto uk-margin-auto-vertical">Parallax</h1>
|
|
23
22
|
|
|
@@ -27,56 +26,76 @@
|
|
|
27
26
|
<div class="uk-section uk-section-default">
|
|
28
27
|
<div class="uk-container">
|
|
29
28
|
|
|
30
|
-
<h2>
|
|
29
|
+
<h2>Viewport Units</h2>
|
|
31
30
|
|
|
32
|
-
<div id="test-
|
|
31
|
+
<div id="test-viewport-units" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: -20vw">
|
|
33
32
|
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
|
|
34
|
-
<h1 uk-parallax="target: #test-
|
|
35
|
-
<p uk-parallax="target: #test-
|
|
33
|
+
<h1 uk-parallax="target: #test-viewport-units; opacity: 0; y: -20vw">Headline</h1>
|
|
34
|
+
<p uk-parallax="target: #test-viewport-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>
|
|
36
35
|
</div>
|
|
37
36
|
</div>
|
|
38
37
|
|
|
39
|
-
<h2>
|
|
38
|
+
<h2>Start and End Steps</h2>
|
|
40
39
|
|
|
41
|
-
<div id="test-
|
|
40
|
+
<div id="test-start-end-steps" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -200">
|
|
42
41
|
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
|
|
43
|
-
<h1 uk-parallax="
|
|
44
|
-
<p uk-parallax="
|
|
42
|
+
<h1 uk-parallax="opacity: 0,1; y: -200,0; scale: 2,1;">Headline</h1>
|
|
43
|
+
<p uk-parallax="opacity: 0,1; y: 200,0; scale: 0,1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
45
44
|
</div>
|
|
46
45
|
</div>
|
|
47
46
|
|
|
48
|
-
<h2>
|
|
47
|
+
<h2>Multiple Steps</h2>
|
|
49
48
|
|
|
50
|
-
<div id="test-
|
|
49
|
+
<div id="test-multiple-steps" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,200,0,200">
|
|
51
50
|
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
|
|
52
|
-
<h1 uk-parallax="
|
|
53
|
-
<p uk-parallax="
|
|
51
|
+
<h1 uk-parallax="x: -200,200,-200,200; scale: 2,1,2,1;">Headline</h1>
|
|
52
|
+
<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>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<h2>Target</h2>
|
|
57
|
+
|
|
58
|
+
<div id="test-target" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: -400">
|
|
59
|
+
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
|
|
60
|
+
<h1 uk-parallax="target: #test-target; opacity: 0; y: -200; scale: 2">Headline</h1>
|
|
61
|
+
<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>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
<h2>Start and End</h2>
|
|
66
|
+
|
|
67
|
+
<div id="test-start-end" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: -400">
|
|
68
|
+
<div class="uk-grid uk-margin-auto uk-flex-inline">
|
|
69
|
+
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; y: 396; easing: 0;">0 / 0</div></div>
|
|
70
|
+
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100%; end: 100%; y: 396; easing: 0;">100% / 100%</div></div>
|
|
71
|
+
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 40vh; end: 40vh; y: 396; easing: 0;">40vh / 40vh</div></div>
|
|
72
|
+
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100% + 50; end: 100% + 50; y: 396; easing: 0;">100% + 50 / 100% + 50</div></div>
|
|
54
73
|
</div>
|
|
55
74
|
</div>
|
|
56
75
|
|
|
57
76
|
<h2>Easing</h2>
|
|
58
77
|
|
|
59
|
-
<div id="test-easing" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex
|
|
78
|
+
<div id="test-easing" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -200">
|
|
60
79
|
<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>
|
|
80
|
+
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -3">-3</div></div>
|
|
81
|
+
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -2">-2</div></div>
|
|
82
|
+
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -1">-1</div></div>
|
|
83
|
+
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -0.5">-0.5</div></div>
|
|
84
|
+
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 0">0</div></div>
|
|
85
|
+
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 0.5">0.5</div></div>
|
|
86
|
+
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 1">1</div></div>
|
|
87
|
+
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 2">2</div></div>
|
|
88
|
+
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 3">3</div></div>
|
|
70
89
|
</div>
|
|
71
90
|
</div>
|
|
72
91
|
|
|
73
|
-
<h2>Color
|
|
92
|
+
<h2>Color</h2>
|
|
74
93
|
|
|
75
|
-
<div id="test-color" class="test-color uk-height-large uk-margin uk-overflow-hidden uk-flex
|
|
94
|
+
<div id="test-color" class="test-color uk-height-large uk-margin uk-overflow-hidden uk-flex" uk-parallax="start: 100%; end: 100%; background-color: yellow,white; border-color: #00f,#f00;">
|
|
76
95
|
<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;
|
|
78
|
-
<p uk-parallax="target: #test-color; opacity: 0,1;
|
|
79
|
-
<p uk-parallax="target: #test-color; y: 200%,0; color: #0f0;
|
|
96
|
+
<h1 uk-parallax="target: #test-color; start: 100%; end: 100%; opacity: 0,1; y: -200%,0;">Headline</h1>
|
|
97
|
+
<p uk-parallax="target: #test-color; start: 100%; end: 100%; opacity: 0,1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
98
|
+
<p uk-parallax="target: #test-color; start: 100%; end: 100%; y: 200%,0; color: #0f0;">
|
|
80
99
|
<span uk-icon="icon: uikit; ratio: 2"></span>
|
|
81
100
|
<span uk-icon="icon: heart; ratio: 2"></span>
|
|
82
101
|
<span uk-icon="icon: check; ratio: 2"></span>
|
|
@@ -86,11 +105,11 @@
|
|
|
86
105
|
|
|
87
106
|
<h2>Filter</h2>
|
|
88
107
|
|
|
89
|
-
<div id="test-filter" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex
|
|
108
|
+
<div id="test-filter" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="start: 100%; end: 100%; invert: 100;">
|
|
90
109
|
<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;
|
|
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;
|
|
110
|
+
<h1 uk-parallax="target: #test-filter; start: 100%; end: 100%; opacity: 0,1; y: -200%,0;">Headline</h1>
|
|
111
|
+
<p uk-parallax="target: #test-filter; start: 100%; end: 100%; opacity: 0,1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
112
|
+
<p uk-parallax="target: #test-filter; start: 100%; end: 100%; blur: 20,0;">
|
|
94
113
|
<span uk-icon="icon: uikit; ratio: 2"></span>
|
|
95
114
|
<span uk-icon="icon: heart; ratio: 2"></span>
|
|
96
115
|
<span uk-icon="icon: check; ratio: 2"></span>
|
|
@@ -98,24 +117,15 @@
|
|
|
98
117
|
</div>
|
|
99
118
|
</div>
|
|
100
119
|
|
|
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
120
|
<h2>SVG Stroke</h2>
|
|
111
121
|
|
|
112
122
|
<div id="test-stroke" class="uk-child-width-expand uk-text-center" uk-grid>
|
|
113
|
-
<div uk-parallax="target: #test-stroke; stroke: 45;
|
|
123
|
+
<div uk-parallax="target: #test-stroke; start: 100%; end: 100%; stroke: 45;">
|
|
114
124
|
|
|
115
125
|
<img width="400" height="400" src="images/icons.svg#cloud-upload" uk-svg alt="">
|
|
116
126
|
|
|
117
127
|
</div>
|
|
118
|
-
<div uk-parallax="target: #test-stroke; stroke: 100%,0;
|
|
128
|
+
<div uk-parallax="target: #test-stroke; start: 100%; end: 100%; stroke: 100%,0;">
|
|
119
129
|
|
|
120
130
|
<img width="400" height="400" src="images/icons.svg#cloud-upload" uk-svg alt="">
|
|
121
131
|
|
|
@@ -143,19 +153,25 @@
|
|
|
143
153
|
</tr>
|
|
144
154
|
<tr>
|
|
145
155
|
<td><code>target</code></td>
|
|
146
|
-
<td>
|
|
156
|
+
<td>CSS Selector</td>
|
|
147
157
|
<td>false</td>
|
|
148
158
|
<td>Element dimension reference for animation duration.</td>
|
|
149
159
|
</tr>
|
|
150
160
|
<tr>
|
|
151
|
-
<td><code>
|
|
152
|
-
<td>Number</td>
|
|
153
|
-
<td>
|
|
154
|
-
<td>
|
|
161
|
+
<td><code>start</code></td>
|
|
162
|
+
<td>Number|String</td>
|
|
163
|
+
<td>0</td>
|
|
164
|
+
<td>Start offset. The value can be in vh|%|px. It supports basic mathematics operands + and -. (e.g. 50vh + 50%)</td>
|
|
165
|
+
</tr>
|
|
166
|
+
<tr>
|
|
167
|
+
<td><code>end</code></td>
|
|
168
|
+
<td>Number|String</td>
|
|
169
|
+
<td>0</td>
|
|
170
|
+
<td>End offset. The value can be in vh|%|px. It supports basic mathematics operands + and -. (e.g. 50vh + 50%)</td>
|
|
155
171
|
</tr>
|
|
156
172
|
<tr>
|
|
157
173
|
<td><code>media</code></td>
|
|
158
|
-
<td>
|
|
174
|
+
<td>Number|String</td>
|
|
159
175
|
<td>false</td>
|
|
160
176
|
<td>Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).</td>
|
|
161
177
|
</tr>
|
|
@@ -0,0 +1,274 @@
|
|
|
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>Sticky Parallax - UIkit tests</title>
|
|
8
|
+
<script src="js/test.js"></script>
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body style="padding-bottom: 1100px;">
|
|
12
|
+
|
|
13
|
+
<div class="uk-section uk-section-primary uk-position-z-index-negative uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-sticky="bottom: +* +*" uk-height-viewport>
|
|
14
|
+
<div class="uk-container">
|
|
15
|
+
|
|
16
|
+
<h1 class="uk-heading-2xlarge">Sticky Section</h1>
|
|
17
|
+
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div class="uk-section uk-section-default">
|
|
22
|
+
<div class="uk-container">
|
|
23
|
+
|
|
24
|
+
<div id="js-sticky-parallax-container" class="uk-position-relative uk-background-muted uk-text-center" style="height: 200vh">
|
|
25
|
+
<div uk-sticky="bottom: #js-sticky-parallax-container; offset: 20vh">
|
|
26
|
+
|
|
27
|
+
<div class="uk-position-center">
|
|
28
|
+
<div class="uk-flex">
|
|
29
|
+
<div>
|
|
30
|
+
<h1 class="uk-heading-2xlarge" uk-parallax="target: #js-sticky-parallax-container; x: 0,-250,-250,0; easing: -1; start: 60vh; end: 100vh;">Sticky</h1>
|
|
31
|
+
</div>
|
|
32
|
+
<div>
|
|
33
|
+
<h1 class="uk-heading-2xlarge" uk-parallax="target: #js-sticky-parallax-container; x: 0,250,250,0; easing: -1; start: 60vh; end: 100vh;">Parallax</h1>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<img class="uk-position-relative uk-position-z-index" src="images/size-v.jpg" alt="" width="400" height="800">
|
|
39
|
+
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<div class="uk-section uk-section-default uk-text-center">
|
|
46
|
+
|
|
47
|
+
<div class="uk-transform-origin-bottom-center uk-margin-bottom" uk-parallax="scale: 1,.2; start: 100%; end: 40vh">
|
|
48
|
+
<img src="images/photo2.jpg" width="1800" height="1200">
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<div class="uk-container">
|
|
52
|
+
|
|
53
|
+
<h1 class="uk-heading-xlarge">Parallax Bottom</h1>
|
|
54
|
+
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<div class="uk-section uk-section-default uk-text-center">
|
|
59
|
+
|
|
60
|
+
<div class="uk-cover-container uk-transform-origin-bottom-center uk-margin-bottom" uk-parallax="scale: 1,.2; start: 100%; end: 40vh" uk-height-viewport>
|
|
61
|
+
<img src="images/photo3.jpg" width="1800" height="1200" uk-cover>
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<div class="uk-container">
|
|
65
|
+
|
|
66
|
+
<h1 class="uk-heading-xlarge">Parallax Bottom Cover</h1>
|
|
67
|
+
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<div class="uk-section uk-section-default uk-text-center uk-position-relative uk-position-z-index">
|
|
72
|
+
|
|
73
|
+
<div class="uk-cover-container uk-position-z-index-negative" uk-sticky="bottom: true" uk-height-viewport>
|
|
74
|
+
<img src="images/photo.jpg" width="1800" height="1200" uk-cover>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<div class="uk-light" style="margin-top: -100vh; padding: 30vh 0">
|
|
78
|
+
|
|
79
|
+
<div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
|
|
80
|
+
<div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
|
|
81
|
+
<h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
|
|
86
|
+
<div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
|
|
87
|
+
<h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
|
|
92
|
+
<div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
|
|
93
|
+
<h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
|
|
98
|
+
<div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
|
|
99
|
+
<h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
|
|
104
|
+
<div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
|
|
105
|
+
<h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
|
|
110
|
+
<div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
|
|
111
|
+
<h1 class="uk-heading-xlarge uk-margin-xlarge-top uk-margin-remove-bottom">Sticky Background</h1>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<div class="uk-section uk-section-default">
|
|
119
|
+
|
|
120
|
+
<div id="js-sticky-parallax-viewport" class="uk-child-width-1-3 uk-text-center" uk-grid>
|
|
121
|
+
<div>
|
|
122
|
+
|
|
123
|
+
<img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
|
|
124
|
+
<img class="uk-margin-large" src="images/photo3.jpg" alt="" width="1800" height="1200">
|
|
125
|
+
<img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
|
|
126
|
+
<img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
|
|
127
|
+
<img class="uk-margin-large" src="images/photo3.jpg" alt="" width="1800" height="1200">
|
|
128
|
+
|
|
129
|
+
</div>
|
|
130
|
+
<div>
|
|
131
|
+
|
|
132
|
+
<div class="uk-tile uk-tile-muted uk-text-center" style="height: 100vh" uk-sticky="bottom: #js-sticky-parallax-viewport">
|
|
133
|
+
|
|
134
|
+
<div uk-parallax="target: #js-sticky-parallax-viewport; start: 100vh; end: 100vh; y: 0, 35vh; easing: 0">
|
|
135
|
+
|
|
136
|
+
<h1 class="uk-margin-remove">Sticky Parallax Viewport</h1>
|
|
137
|
+
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
</div>
|
|
143
|
+
<div>
|
|
144
|
+
|
|
145
|
+
<img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
|
|
146
|
+
<img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
|
|
147
|
+
<img class="uk-margin-large" src="images/photo3.jpg" alt="" width="1800" height="1200">
|
|
148
|
+
<img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
|
|
149
|
+
<img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
|
|
150
|
+
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
<div class="uk-section uk-section-default">
|
|
157
|
+
|
|
158
|
+
<div id="js-sticky-parallax-images" class="uk-child-width-1-3" style="height: 250vh" uk-grid>
|
|
159
|
+
<div class="uk-background-muted uk-width-expand">
|
|
160
|
+
|
|
161
|
+
<div style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images">
|
|
162
|
+
<div uk-parallax="target: #js-sticky-parallax-images; y: 55vh, 45vh;">
|
|
163
|
+
<img class="uk-position-center-left" src="images/photo.jpg" alt="" width="1800" height="1200">
|
|
164
|
+
<img class="uk-position-center-left" src="images/photo2.jpg" alt="" width="1800" height="1200" uk-parallax="target: #js-sticky-parallax-images; start: 125vh; end: 100% + 100vh - 135vh; opacity: 0,1">
|
|
165
|
+
<img class="uk-position-center-left" src="images/photo3.jpg" alt="" width="1800" height="1200" uk-parallax="target: #js-sticky-parallax-images; start: 175vh; end: 100% + 100vh - 185vh; opacity: 0,1">
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
</div>
|
|
170
|
+
<div class="uk-width-small">
|
|
171
|
+
<div class="uk-position-relative uk-background-muted" style="height: 75vh"><div class="uk-position-bottom-center">75vh</div></div>
|
|
172
|
+
<div class="uk-position-relative uk-background-primary uk-light" style="height: 50vh"><div class="uk-position-bottom-center">125vh</div></div>
|
|
173
|
+
<div class="uk-position-relative uk-background-secondary uk-light" style="height: 50vh"><div class="uk-position-bottom-center">175vh</div></div>
|
|
174
|
+
<div class="uk-position-relative uk-background-muted" style="height: 50vh"><div class="uk-position-bottom-center">225vh</div></div>
|
|
175
|
+
<div class="uk-position-relative uk-background-primary uk-light" style="height: 25vh"><div class="uk-position-bottom-center">250vh</div></div>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="uk-width-expand">
|
|
178
|
+
|
|
179
|
+
<div style="height: 75vh;"></div>
|
|
180
|
+
|
|
181
|
+
<div class="uk-flex uk-flex-middle" style="height: 50vh;">
|
|
182
|
+
<div>
|
|
183
|
+
|
|
184
|
+
<h1>Sticky Parallax Images 1</h1>
|
|
185
|
+
|
|
186
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
187
|
+
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
<div class="uk-flex uk-flex-middle" style="height: 50vh;">
|
|
192
|
+
<div>
|
|
193
|
+
|
|
194
|
+
<h1>Sticky Parallax Images 2</h1>
|
|
195
|
+
|
|
196
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
197
|
+
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
<div class="uk-flex uk-flex-middle" style="height: 50vh;">
|
|
202
|
+
<div>
|
|
203
|
+
|
|
204
|
+
<h1>Sticky Parallax Images 3</h1>
|
|
205
|
+
|
|
206
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
207
|
+
|
|
208
|
+
</div>
|
|
209
|
+
</div>
|
|
210
|
+
|
|
211
|
+
</div>
|
|
212
|
+
</div>
|
|
213
|
+
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
<div class="uk-section uk-section-default">
|
|
217
|
+
|
|
218
|
+
<div id="js-sticky-parallax-images-all" class="uk-child-width-1-3" style="height: 250vh" uk-grid>
|
|
219
|
+
<div class="uk-background-muted uk-width-expand">
|
|
220
|
+
|
|
221
|
+
<div style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images-all">
|
|
222
|
+
<div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
|
|
223
|
+
<img class="uk-position-center-left" src="images/photo.jpg" alt="" width="1800" height="1200">
|
|
224
|
+
<img class="uk-position-center-left" src="images/photo2.jpg" alt="" width="1800" height="1200" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 160vh; opacity: 0,1">
|
|
225
|
+
<img class="uk-position-center-left" src="images/photo3.jpg" alt="" width="1800" height="1200" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 210vh; opacity: 0,1">
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
</div>
|
|
230
|
+
<div class="uk-width-small">
|
|
231
|
+
<div class="uk-position-relative uk-background-muted" style="height: 100vh"><div class="uk-position-bottom-center">100vh</div></div>
|
|
232
|
+
<div class="uk-position-relative uk-background-primary uk-light" style="height: 50vh"><div class="uk-position-bottom-center">150vh</div></div>
|
|
233
|
+
<div class="uk-position-relative uk-background-secondary uk-light" style="height: 50vh"><div class="uk-position-bottom-center">200vh</div></div>
|
|
234
|
+
<div class="uk-position-relative uk-background-muted" style="height: 50vh"><div class="uk-position-bottom-center">250vh</div></div>
|
|
235
|
+
</div>
|
|
236
|
+
<div class="uk-width-expand">
|
|
237
|
+
|
|
238
|
+
<div style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images-all">
|
|
239
|
+
<div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
|
|
240
|
+
<div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 90vh; end: 100% + 100vh - 100vh; opacity: 0,1">
|
|
241
|
+
<div uk-parallax="target: #js-sticky-parallax-images-all; start: 140vh; end: 100% + 100vh - 150vh; opacity: 1,0">
|
|
242
|
+
|
|
243
|
+
<h1>Sticky Parallax Images All 1</h1>
|
|
244
|
+
|
|
245
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
246
|
+
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
<div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 160vh; opacity: 0,1">
|
|
250
|
+
<div uk-parallax="target: #js-sticky-parallax-images-all; start: 190vh; end: 100% + 100vh - 200vh; opacity: 1,0">
|
|
251
|
+
|
|
252
|
+
<h1>Sticky Parallax Images All 2</h1>
|
|
253
|
+
|
|
254
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
255
|
+
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
<div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 210vh; opacity: 0,1">
|
|
259
|
+
|
|
260
|
+
<h1>Sticky Parallax Images All 3</h1>
|
|
261
|
+
|
|
262
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
263
|
+
|
|
264
|
+
</div>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
|
|
268
|
+
</div>
|
|
269
|
+
</div>
|
|
270
|
+
|
|
271
|
+
</div>
|
|
272
|
+
|
|
273
|
+
</body>
|
|
274
|
+
</html>
|
package/tests/sticky.html
CHANGED
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
<tbody>
|
|
72
72
|
<tr>
|
|
73
73
|
<td><code>top</code></td>
|
|
74
|
-
<td>Number
|
|
74
|
+
<td>Number|Viewport Height|CSS Selector</td>
|
|
75
75
|
<td>0</td>
|
|
76
76
|
<td>The top offset from where the element should be stick.</td>
|
|
77
77
|
</tr>
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
</tr>
|
|
126
126
|
<tr>
|
|
127
127
|
<td><code>media</code></td>
|
|
128
|
-
<td>
|
|
128
|
+
<td>Number|String</td>
|
|
129
129
|
<td>false</td>
|
|
130
130
|
<td>Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).</td>
|
|
131
131
|
</tr>
|
package/tests/tab.html
CHANGED