uikit 3.13.9 → 3.13.11-dev.3b88fea57
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 +38 -1
- package/build/build.js +4 -1
- package/dist/css/uikit-core-rtl.css +49 -8
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +49 -8
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +49 -6
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +49 -6
- 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 +7 -3
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +7 -3
- 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 +21 -12
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +21 -12
- 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 +21 -12
- 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 +2 -2
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +62 -30
- 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 +386 -301
- 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 +433 -309
- package/dist/js/uikit.min.js +1 -1
- package/package.json +1 -1
- package/src/js/components/slider.js +1 -1
- package/src/js/components/sortable.js +2 -3
- package/src/js/components/tooltip.js +38 -3
- package/src/js/core/drop.js +20 -16
- package/src/js/core/navbar.js +18 -6
- package/src/js/core/scrollspy-nav.js +6 -11
- package/src/js/core/sticky.js +58 -22
- package/src/js/core/toggle.js +8 -8
- package/src/js/mixin/media.js +12 -9
- package/src/js/mixin/modal.js +6 -2
- package/src/js/mixin/parallax.js +8 -3
- package/src/js/mixin/position.js +24 -24
- package/src/js/uikit-core.js +0 -4
- package/src/js/util/lang.js +34 -42
- package/src/js/util/position.js +177 -125
- package/src/js/util/viewport.js +42 -22
- package/src/less/components/drop.less +0 -1
- package/src/less/components/dropdown.less +11 -1
- package/src/less/components/icon.less +3 -0
- package/src/less/components/nav.less +23 -0
- package/src/less/components/navbar.less +26 -2
- package/src/less/components/search.less +2 -0
- package/src/less/components/sticky.less +8 -3
- package/src/less/components/utility.less +1 -0
- package/src/less/theme/dropdown.less +4 -0
- package/src/less/theme/nav.less +6 -0
- package/src/less/theme/navbar.less +4 -0
- package/src/less/theme/search.less +6 -0
- package/src/scss/components/drop.scss +0 -1
- package/src/scss/components/dropdown.scss +11 -1
- package/src/scss/components/icon.scss +3 -0
- package/src/scss/components/nav.scss +23 -0
- package/src/scss/components/navbar.scss +26 -2
- package/src/scss/components/search.scss +2 -0
- package/src/scss/components/sticky.scss +8 -3
- package/src/scss/components/utility.scss +1 -0
- package/src/scss/mixins-theme.scss +5 -0
- package/src/scss/mixins.scss +5 -0
- package/src/scss/theme/dropdown.scss +4 -0
- package/src/scss/theme/nav.scss +6 -0
- package/src/scss/theme/navbar.scss +4 -0
- package/src/scss/theme/search.scss +6 -0
- package/src/scss/variables-theme.scss +5 -1
- package/src/scss/variables.scss +5 -1
- package/tests/alert.html +1 -1
- package/tests/animation.html +216 -214
- package/tests/drop.html +129 -80
- package/tests/dropdown.html +16 -2
- package/tests/nav.html +27 -0
- package/tests/navbar.html +56 -5
- package/tests/parallax.html +5 -5
- package/tests/position.html +38 -39
- package/tests/sticky-navbar.html +6 -6
- package/tests/sticky-parallax.html +169 -148
- package/tests/sticky.html +300 -49
- package/src/js/core/core.js +0 -25
package/tests/sticky-navbar.html
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
</div>
|
|
18
18
|
|
|
19
19
|
<div class="tm-header">
|
|
20
|
-
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky
|
|
20
|
+
<div uk-sticky="end: #sticky-dropdown; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
|
|
21
21
|
<nav class="uk-navbar-container">
|
|
22
22
|
<div class="uk-container">
|
|
23
23
|
<div uk-navbar>
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
</div>
|
|
97
97
|
|
|
98
98
|
<div class="tm-header">
|
|
99
|
-
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky
|
|
99
|
+
<div uk-sticky="end: #sticky-dropbar; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
|
|
100
100
|
<nav class="uk-navbar-container">
|
|
101
101
|
<div class="uk-container">
|
|
102
102
|
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
</div>
|
|
176
176
|
|
|
177
177
|
<div class="tm-header">
|
|
178
|
-
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky
|
|
178
|
+
<div uk-sticky="end: #scrollup-dropdown; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
|
|
179
179
|
<nav class="uk-navbar-container">
|
|
180
180
|
<div class="uk-container uk-container-expand">
|
|
181
181
|
<div uk-navbar>
|
|
@@ -254,7 +254,7 @@
|
|
|
254
254
|
</div>
|
|
255
255
|
|
|
256
256
|
<div class="tm-header">
|
|
257
|
-
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky
|
|
257
|
+
<div uk-sticky="end: #scrollup-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
|
|
258
258
|
<nav class="uk-navbar-container">
|
|
259
259
|
<div class="uk-container uk-container-expand">
|
|
260
260
|
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
|
|
@@ -335,7 +335,7 @@
|
|
|
335
335
|
<div id="transparent-dropdown" class="uk-section-primary uk-preserve-color">
|
|
336
336
|
|
|
337
337
|
<div class="tm-header">
|
|
338
|
-
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light
|
|
338
|
+
<div uk-sticky="start: 200; end: #transparent-dropdown; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light">
|
|
339
339
|
<nav class="uk-navbar-container">
|
|
340
340
|
<div class="uk-container uk-container-expand">
|
|
341
341
|
<div uk-navbar>
|
|
@@ -418,7 +418,7 @@
|
|
|
418
418
|
<div id="transparent-dropbar" class="uk-section-secondary uk-preserve-color">
|
|
419
419
|
|
|
420
420
|
<div class="tm-header">
|
|
421
|
-
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light
|
|
421
|
+
<div uk-sticky="start: 200; end: #transparent-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light">
|
|
422
422
|
<nav class="uk-navbar-container">
|
|
423
423
|
<div class="uk-container uk-container-expand">
|
|
424
424
|
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
|
|
@@ -10,248 +10,269 @@
|
|
|
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>
|
|
123
|
+
|
|
124
|
+
<div class="uk-background-muted uk-text-center uk-height-viewport" uk-sticky="end: #js-sticky-parallax-viewport">
|
|
120
125
|
|
|
121
|
-
|
|
126
|
+
<div uk-parallax="target: #js-sticky-parallax-viewport; start: 100vh; end: 100vh; y: 10vh, 80vh; easing: 0">
|
|
122
127
|
|
|
123
|
-
|
|
128
|
+
<h1 class="uk-margin-remove">Sticky Parallax Viewport</h1>
|
|
124
129
|
|
|
125
|
-
|
|
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>
|
|
258
|
+
|
|
254
259
|
</div>
|
|
260
|
+
</div>
|
|
261
|
+
|
|
262
|
+
</div>
|
|
263
|
+
|
|
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">
|
|
266
|
+
|
|
267
|
+
<h1 class="uk-heading-2xlarge">Reveal Following Section</h1>
|
|
268
|
+
|
|
269
|
+
</div>
|
|
270
|
+
</div>
|
|
271
|
+
|
|
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">
|
|
274
|
+
|
|
275
|
+
<h1 class="uk-heading-2xlarge">Sticky Section</h1>
|
|
255
276
|
|
|
256
277
|
</div>
|
|
257
278
|
</div>
|