uikit 3.13.11-dev.98491b3f4 → 3.13.11-dev.9f2f619d7
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 +6 -1
- package/dist/css/uikit-core-rtl.css +9 -3
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +9 -3
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +9 -3
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +9 -3
- 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 +4 -2
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +4 -2
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +2 -2
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +4 -2
- 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 +98 -68
- 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 +102 -70
- package/dist/js/uikit.min.js +1 -1
- package/package.json +1 -1
- package/src/js/components/slider.js +1 -1
- package/src/js/core/cover.js +27 -14
- package/src/js/core/scrollspy-nav.js +2 -2
- package/src/js/core/sticky.js +36 -12
- package/src/js/mixin/parallax.js +3 -2
- package/src/js/util/lang.js +34 -38
- package/src/js/util/position.js +4 -7
- package/src/less/components/nav.less +1 -0
- package/src/less/components/sticky.less +8 -3
- package/src/less/components/utility.less +1 -0
- package/src/scss/components/nav.scss +1 -0
- package/src/scss/components/sticky.scss +8 -3
- package/src/scss/components/utility.scss +1 -0
- package/tests/alert.html +1 -1
- package/tests/drop.html +129 -80
- package/tests/navbar.html +1 -1
- package/tests/parallax.html +5 -5
- package/tests/sticky-navbar.html +6 -6
- package/tests/sticky-parallax.html +163 -158
- package/tests/sticky.html +149 -74
|
@@ -10,268 +10,273 @@
|
|
|
10
10
|
|
|
11
11
|
<body style="padding-bottom: 100vh;">
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
<!-- uk-position-relative is needed because of the test toolbar -->
|
|
14
|
+
<div class="uk-position-relative">
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
<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="overflow-flip: true; end: 100%" uk-height-viewport>
|
|
17
|
+
<div class="uk-container">
|
|
17
18
|
|
|
19
|
+
<h1 class="uk-heading-2xlarge" uk-parallax="target: !.uk-section +* +*; end: 100%; y: -400; easing: 0;">Sticky Section</h1>
|
|
20
|
+
|
|
21
|
+
</div>
|
|
18
22
|
</div>
|
|
19
|
-
</div>
|
|
20
23
|
|
|
21
|
-
|
|
22
|
-
|
|
24
|
+
<div class="uk-section uk-section-default">
|
|
25
|
+
<div class="uk-container">
|
|
23
26
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
+
<div id="js-sticky-parallax-container" class="uk-position-relative uk-background-muted uk-text-center uk-height-viewport-3">
|
|
28
|
+
<div class="uk-flex uk-flex-center uk-flex-middle uk-height-viewport" uk-sticky="end: #js-sticky-parallax-container">
|
|
29
|
+
<div>
|
|
27
30
|
|
|
28
|
-
|
|
31
|
+
<img class="uk-position-relative uk-position-z-index" src="images/size-v.jpg" width="400" height="800" alt="" style="max-width: 50vw" uk-parallax="target: #js-sticky-parallax-container; y: 0,-250; easing: -1; start: 100vh; end: 100vh;">
|
|
32
|
+
|
|
33
|
+
<div style="margin-top: -200px">
|
|
34
|
+
<h1 class="uk-heading-2xlarge">
|
|
35
|
+
<span class="uk-display-inline-block" uk-parallax="target: #js-sticky-parallax-container; x: 0,-15vw,-7vw,0; easing: -1; start: 60vh; end: 100vh;">Sticky</span>
|
|
36
|
+
<br><span class="uk-display-inline-block" uk-parallax="target: #js-sticky-parallax-container; x: 0,10vw,5vw,0; easing: -1; start: 60vh; end: 100vh;">Parallax</span>
|
|
37
|
+
</h1>
|
|
38
|
+
</div>
|
|
29
39
|
|
|
30
|
-
<div style="margin-top: -200px">
|
|
31
|
-
<h1 class="uk-heading-2xlarge">
|
|
32
|
-
<span class="uk-display-inline-block" uk-parallax="target: #js-sticky-parallax-container; x: 0,-15vw,-7vw,0; easing: -1; start: 60vh; end: 100vh;">Sticky</span>
|
|
33
|
-
<br><span class="uk-display-inline-block" uk-parallax="target: #js-sticky-parallax-container; x: 0,10vw,5vw,0; easing: -1; start: 60vh; end: 100vh;">Parallax</span>
|
|
34
|
-
</h1>
|
|
35
40
|
</div>
|
|
36
41
|
|
|
37
42
|
</div>
|
|
38
|
-
|
|
39
43
|
</div>
|
|
40
44
|
</div>
|
|
41
45
|
</div>
|
|
42
|
-
</div>
|
|
43
46
|
|
|
44
|
-
|
|
47
|
+
<div class="uk-section uk-section-default uk-text-center">
|
|
45
48
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
+
<div class="uk-transform-origin-bottom-center uk-margin-bottom" uk-parallax="scale: 1,.2; start: 100%; end: 40vh">
|
|
50
|
+
<img src="images/photo2.jpg" width="1800" height="1200" alt="">
|
|
51
|
+
</div>
|
|
49
52
|
|
|
50
|
-
|
|
53
|
+
<div class="uk-container">
|
|
51
54
|
|
|
52
|
-
|
|
55
|
+
<h1 class="uk-heading-xlarge">Parallax Bottom</h1>
|
|
53
56
|
|
|
57
|
+
</div>
|
|
54
58
|
</div>
|
|
55
|
-
</div>
|
|
56
59
|
|
|
57
|
-
|
|
60
|
+
<div class="uk-section uk-section-default uk-text-center">
|
|
58
61
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
+
<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>
|
|
63
|
+
<img src="images/photo3.jpg" width="1800" height="1200" alt="" uk-cover>
|
|
64
|
+
</div>
|
|
62
65
|
|
|
63
|
-
|
|
66
|
+
<div class="uk-container">
|
|
64
67
|
|
|
65
|
-
|
|
68
|
+
<h1 class="uk-heading-xlarge">Parallax Bottom Cover</h1>
|
|
66
69
|
|
|
70
|
+
</div>
|
|
67
71
|
</div>
|
|
68
|
-
</div>
|
|
69
72
|
|
|
70
|
-
|
|
73
|
+
<div class="uk-section uk-section-default uk-text-center uk-position-relative uk-position-z-index">
|
|
71
74
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
+
<div class="uk-cover-container uk-position-z-index-negative" uk-sticky="end: true" uk-height-viewport>
|
|
76
|
+
<img src="images/photo.jpg" width="1800" height="1200" alt="" uk-cover>
|
|
77
|
+
</div>
|
|
75
78
|
|
|
76
|
-
|
|
79
|
+
<div class="uk-light" style="margin-top: -100vh; padding: 30vh 0">
|
|
77
80
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
+
<div uk-parallax="start: 100%; end: 100%; opacity: 0,1 10%,1 30%,0; y: 2vh, 0 10%, 0 30%, -10vh">
|
|
82
|
+
<h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
|
|
83
|
+
</div>
|
|
81
84
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
+
<div uk-parallax="start: 100%; end: 100%; opacity: 0,1 10%,1 30%,0; y: 2vh, 0 10%, 0 30%, -10vh">
|
|
86
|
+
<h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
|
|
87
|
+
</div>
|
|
85
88
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
+
<div uk-parallax="start: 100%; end: 100%; opacity: 0,1 10%,1 30%,0; y: 2vh, 0 10%, 0 30%, -10vh">
|
|
90
|
+
<h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
|
|
91
|
+
</div>
|
|
89
92
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
+
<div uk-parallax="start: 100%; end: 100%; opacity: 0,1 10%,1 30%,0; y: 2vh, 0 10%, 0 30%, -10vh">
|
|
94
|
+
<h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
|
|
95
|
+
</div>
|
|
93
96
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
+
<div uk-parallax="start: 100%; end: 100%; opacity: 0,1 10%,1 30%,0; y: 2vh, 0 10%, 0 30%, -10vh">
|
|
98
|
+
<h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
|
|
99
|
+
</div>
|
|
97
100
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
+
<div uk-parallax="start: 100%; end: 100%; opacity: 0,1 10%,1 30%,0; y: 2vh, 0 10%, 0 30%, -10vh">
|
|
102
|
+
<h1 class="uk-heading-xlarge uk-margin-xlarge-top uk-margin-remove-bottom">Sticky Background</h1>
|
|
103
|
+
</div>
|
|
101
104
|
|
|
105
|
+
</div>
|
|
102
106
|
</div>
|
|
103
|
-
</div>
|
|
104
107
|
|
|
105
|
-
|
|
108
|
+
<div class="uk-section uk-section-default">
|
|
106
109
|
|
|
107
|
-
|
|
108
|
-
|
|
110
|
+
<div id="js-sticky-parallax-viewport" class="uk-child-width-1-2 uk-child-width-1-3@s uk-text-center" uk-grid>
|
|
111
|
+
<div>
|
|
109
112
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
113
|
+
<img class="uk-margin-large" src="images/photo.jpg" width="1800" height="1200" alt="">
|
|
114
|
+
<img class="uk-margin-large" src="images/photo3.jpg" width="1800" height="1200" alt="">
|
|
115
|
+
<img class="uk-margin-large" src="images/photo2.jpg" width="1800" height="1200" alt="">
|
|
116
|
+
<img class="uk-margin-large" src="images/photo.jpg" width="1800" height="1200" alt="">
|
|
117
|
+
<img class="uk-margin-large" src="images/photo3.jpg" width="1800" height="1200" alt="">
|
|
118
|
+
<img class="uk-margin-large" src="images/photo2.jpg" width="1800" height="1200" alt="">
|
|
119
|
+
<img class="uk-margin-large" src="images/photo.jpg" width="1800" height="1200" alt="">
|
|
117
120
|
|
|
118
|
-
|
|
119
|
-
|
|
121
|
+
</div>
|
|
122
|
+
<div>
|
|
120
123
|
|
|
121
|
-
|
|
124
|
+
<div class="uk-background-muted uk-text-center uk-height-viewport" uk-sticky="end: #js-sticky-parallax-viewport">
|
|
122
125
|
|
|
123
|
-
|
|
126
|
+
<div uk-parallax="target: #js-sticky-parallax-viewport; start: 100vh; end: 100vh; y: 10vh, 80vh; easing: 0">
|
|
124
127
|
|
|
125
|
-
|
|
128
|
+
<h1 class="uk-margin-remove">Sticky Parallax Viewport</h1>
|
|
129
|
+
|
|
130
|
+
</div>
|
|
126
131
|
|
|
127
132
|
</div>
|
|
128
133
|
|
|
129
134
|
</div>
|
|
135
|
+
<div class="uk-visible@s">
|
|
130
136
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
<img class="uk-margin-large" src="images/photo.jpg" width="1800" height="1200" alt="">
|
|
139
|
-
<img class="uk-margin-large" src="images/photo3.jpg" width="1800" height="1200" alt="">
|
|
140
|
-
<img class="uk-margin-large" src="images/photo2.jpg" width="1800" height="1200" alt="">
|
|
137
|
+
<img class="uk-margin-large" src="images/photo2.jpg" width="1800" height="1200" alt="">
|
|
138
|
+
<img class="uk-margin-large" src="images/photo.jpg" width="1800" height="1200" alt="">
|
|
139
|
+
<img class="uk-margin-large" src="images/photo3.jpg" width="1800" height="1200" alt="">
|
|
140
|
+
<img class="uk-margin-large" src="images/photo2.jpg" width="1800" height="1200" alt="">
|
|
141
|
+
<img class="uk-margin-large" src="images/photo.jpg" width="1800" height="1200" alt="">
|
|
142
|
+
<img class="uk-margin-large" src="images/photo3.jpg" width="1800" height="1200" alt="">
|
|
143
|
+
<img class="uk-margin-large" src="images/photo2.jpg" width="1800" height="1200" alt="">
|
|
141
144
|
|
|
145
|
+
</div>
|
|
142
146
|
</div>
|
|
143
|
-
</div>
|
|
144
147
|
|
|
145
|
-
|
|
148
|
+
</div>
|
|
146
149
|
|
|
147
|
-
|
|
150
|
+
<div class="uk-section uk-section-default">
|
|
148
151
|
|
|
149
|
-
|
|
150
|
-
|
|
152
|
+
<div id="js-sticky-parallax-images" style="min-height: 250vh" uk-grid>
|
|
153
|
+
<div class="uk-width-expand">
|
|
151
154
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
155
|
+
<div class="uk-background-muted uk-height-viewport" uk-sticky="end: #js-sticky-parallax-images">
|
|
156
|
+
<div uk-parallax="target: #js-sticky-parallax-images; y: 55vh, 45vh;">
|
|
157
|
+
<img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 125vh; end: 100% + 100vh - 185vh; opacity: 1,1,0; easing: 0">
|
|
158
|
+
<img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 175vh; end: 100% + 100vh - 235vh; opacity: 0,1 16.666%,1 99%,0; easing: 0">
|
|
159
|
+
<img class="uk-position-center-left" src="images/photo3.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 225vh; end: 100% + 100vh - 275vh; opacity: 0,1 20%,1; easing: 0">
|
|
160
|
+
</div>
|
|
157
161
|
</div>
|
|
158
|
-
</div>
|
|
159
162
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
163
|
+
</div>
|
|
164
|
+
<div class="uk-width-auto uk-text-small">
|
|
165
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-muted" style="height: 75vh">75vh</div>
|
|
166
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-primary uk-light" style="height: 50vh">125vh</div>
|
|
167
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-secondary uk-light" style="height: 50vh">175vh</div>
|
|
168
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-muted" style="height: 50vh">225vh</div>
|
|
169
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-primary uk-light" style="height: 25vh">250vh</div>
|
|
170
|
+
</div>
|
|
171
|
+
<div class="uk-width-expand">
|
|
169
172
|
|
|
170
|
-
|
|
173
|
+
<div style="height: 75vh;"></div>
|
|
171
174
|
|
|
172
|
-
|
|
173
|
-
|
|
175
|
+
<div class="uk-flex uk-flex-middle" style="height: 50vh;">
|
|
176
|
+
<div>
|
|
174
177
|
|
|
175
|
-
|
|
178
|
+
<h1>Sticky Parallax Images 1</h1>
|
|
176
179
|
|
|
177
|
-
|
|
180
|
+
<p class="uk-visible@s">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>
|
|
178
181
|
|
|
182
|
+
</div>
|
|
179
183
|
</div>
|
|
180
|
-
</div>
|
|
181
184
|
|
|
182
|
-
|
|
183
|
-
|
|
185
|
+
<div class="uk-flex uk-flex-middle" style="height: 50vh;">
|
|
186
|
+
<div>
|
|
184
187
|
|
|
185
|
-
|
|
188
|
+
<h1>Sticky Parallax Images 2</h1>
|
|
186
189
|
|
|
187
|
-
|
|
190
|
+
<p class="uk-visible@s">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>
|
|
188
191
|
|
|
192
|
+
</div>
|
|
189
193
|
</div>
|
|
190
|
-
</div>
|
|
191
194
|
|
|
192
|
-
|
|
193
|
-
|
|
195
|
+
<div class="uk-flex uk-flex-middle" style="height: 50vh;">
|
|
196
|
+
<div>
|
|
194
197
|
|
|
195
|
-
|
|
198
|
+
<h1>Sticky Parallax Images 3</h1>
|
|
196
199
|
|
|
197
|
-
|
|
200
|
+
<p class="uk-visible@s">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>
|
|
198
201
|
|
|
202
|
+
</div>
|
|
199
203
|
</div>
|
|
200
|
-
</div>
|
|
201
204
|
|
|
205
|
+
</div>
|
|
202
206
|
</div>
|
|
203
|
-
</div>
|
|
204
207
|
|
|
205
|
-
|
|
208
|
+
</div>
|
|
206
209
|
|
|
207
|
-
|
|
210
|
+
<div class="uk-section uk-section-default">
|
|
208
211
|
|
|
209
|
-
|
|
210
|
-
|
|
212
|
+
<div id="js-sticky-parallax-images-all" style="min-height: 250vh" uk-grid>
|
|
213
|
+
<div class="uk-width-expand">
|
|
211
214
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
215
|
+
<div class="uk-background-muted uk-height-viewport" uk-sticky="end: #js-sticky-parallax-images-all">
|
|
216
|
+
<div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
|
|
217
|
+
<img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 160vh; opacity: 1,1 99%,0; easing: 0">
|
|
218
|
+
<img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 210vh; opacity: 0,1 16.666%,1 99%,0; easing: 0">
|
|
219
|
+
<img class="uk-position-center-left" src="images/photo3.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1; easing: 0">
|
|
220
|
+
</div>
|
|
217
221
|
</div>
|
|
218
|
-
</div>
|
|
219
222
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
223
|
+
</div>
|
|
224
|
+
<div class="uk-width-auto uk-text-small">
|
|
225
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-muted" style="height: 100vh">100vh</div>
|
|
226
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-primary uk-light" style="height: 50vh">150vh</div>
|
|
227
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-secondary uk-light" style="height: 50vh">200vh</div>
|
|
228
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-muted" style="height: 50vh">250vh</div>
|
|
229
|
+
</div>
|
|
230
|
+
<div class="uk-width-expand">
|
|
228
231
|
|
|
229
|
-
|
|
230
|
-
|
|
232
|
+
<div class="uk-height-viewport" uk-sticky="end: #js-sticky-parallax-images-all">
|
|
233
|
+
<div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
|
|
231
234
|
|
|
232
|
-
|
|
235
|
+
<div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 80%,0">
|
|
233
236
|
|
|
234
|
-
|
|
237
|
+
<h1>Sticky Parallax Images All 1</h1>
|
|
235
238
|
|
|
236
|
-
|
|
239
|
+
<p class="uk-visible@s">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>
|
|
237
240
|
|
|
238
|
-
|
|
239
|
-
|
|
241
|
+
</div>
|
|
242
|
+
<div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 80%,0">
|
|
240
243
|
|
|
241
|
-
|
|
244
|
+
<h1>Sticky Parallax Images All 2</h1>
|
|
242
245
|
|
|
243
|
-
|
|
246
|
+
<p class="uk-visible@s">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>
|
|
244
247
|
|
|
245
|
-
|
|
246
|
-
|
|
248
|
+
</div>
|
|
249
|
+
<div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1">
|
|
247
250
|
|
|
248
|
-
|
|
251
|
+
<h1>Sticky Parallax Images All 3</h1>
|
|
249
252
|
|
|
250
|
-
|
|
253
|
+
<p class="uk-visible@s">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>
|
|
251
254
|
|
|
255
|
+
</div>
|
|
252
256
|
</div>
|
|
253
257
|
</div>
|
|
254
|
-
</div>
|
|
255
258
|
|
|
259
|
+
</div>
|
|
256
260
|
</div>
|
|
257
|
-
</div>
|
|
258
261
|
|
|
259
|
-
|
|
262
|
+
</div>
|
|
260
263
|
|
|
261
|
-
|
|
262
|
-
|
|
264
|
+
<div class="uk-section uk-section-muted uk-section-xlarge uk-flex uk-flex-center uk-flex-middle uk-text-center">
|
|
265
|
+
<div class="uk-container">
|
|
263
266
|
|
|
264
|
-
|
|
267
|
+
<h1 class="uk-heading-2xlarge">Reveal Following Section</h1>
|
|
265
268
|
|
|
269
|
+
</div>
|
|
266
270
|
</div>
|
|
267
|
-
</div>
|
|
268
271
|
|
|
269
|
-
|
|
270
|
-
|
|
272
|
+
<div class="uk-section uk-section-primary uk-section-xlarge uk-flex uk-flex-center uk-flex-middle uk-text-center uk-position-z-index-negative" uk-sticky="position: bottom; overflow-flip: true; start: -100%; end: 0">
|
|
273
|
+
<div class="uk-container">
|
|
271
274
|
|
|
272
|
-
|
|
275
|
+
<h1 class="uk-heading-2xlarge">Sticky Section</h1>
|
|
273
276
|
|
|
277
|
+
</div>
|
|
274
278
|
</div>
|
|
279
|
+
|
|
275
280
|
</div>
|
|
276
281
|
|
|
277
282
|
</body>
|