forked from Prinzhorn/skrollr
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclassic.html
203 lines (167 loc) · 5.98 KB
/
classic.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html class="no-skrollr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Classic parallax page</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
html, body {
height:100%;
}
.skrollr-desktop body {
height:100% !important;
}
body {
font-family:sans-serif;
}
p {
margin:1em 0;
}
.parallax-image-wrapper {
position:fixed;
left:0;
width:100%;
overflow:hidden;
}
.parallax-image-wrapper-50 {
height:50%;
top:-50%;
}
.parallax-image-wrapper-100 {
height:100%;
top:-100%;
}
.parallax-image {
display:none;
position:absolute;
bottom:0;
left:0;
width:100%;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
.parallax-image-50 {
height:200%;
top:-50%;
}
.parallax-image-100 {
height:100%;
top:0;
}
.parallax-image.skrollable-between {
display:block;
}
.no-skrollr .parallax-image-wrapper {
display:none !important;
}
#skrollr-body {
height:100%;
overflow:visible;
position:relative;
}
.gap {
background:transparent center no-repeat;
background-size:cover;
}
.skrollr .gap {
background:transparent !important;
}
.gap-50 {
height:50%;
}
.gap-100 {
height:100%;
}
.header, .content {
background:#fff;
padding:1em;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.content-full {
height:100%;
}
#done {
height:100%;
}
</style>
</head>
<body>
<!--
We position the images fixed and therefore need to place them outside of #skrollr-body.
We will then use data-anchor-target to display the correct image matching the current section (.gap element).
-->
<div
class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#dragons + .gap"
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
class="parallax-image parallax-image-100"
style="background-image:url(images/kitteh1.jpg)"
data-anchor-target="#dragons + .gap"
data-bottom-top="transform: translate3d(0px, -80%, 0px);"
data-top-bottom="transform: translate3d(0px, 80%, 0px);"
></div>
<!--the +/-80% translation can be adjusted to control the speed difference of the image-->
</div>
<div
class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#bacons + .gap"
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
class="parallax-image parallax-image-100"
style="background-image:url(images/kitteh2.jpg)"
data-anchor-target="#bacons + .gap"
data-bottom-top="transform: translate3d(0px, -80%, 0px);"
data-top-bottom="transform: translate3d(0px, 80%, 0px);"
></div>
</div>
<div
class="parallax-image-wrapper parallax-image-wrapper-50"
data-anchor-target="#kittens + .gap"
data-bottom-top="transform:translate3d(0px, 300%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
class="parallax-image parallax-image-50"
style="background-image:url(images/kitteh3.jpg)"
data-anchor-target="#kittens + .gap"
data-bottom-top="transform: translate3d(0px, -60%, 0px);"
data-top-bottom="transform: translate3d(0px, 60%, 0px);"
></div>
</div>
<div id="skrollr-body">
<div class="header" id="dragons">
Skrollr demo of classic parallax sections. Degrades without JavaScript (could be disabled on mobile without breaking everything).
</div>
<div class="gap gap-100" style="background-image:url(images/kitteh1.jpg);"></div>
<div class="content" id="bacons">
<p>Landjaeger chicken ham fatback sausage hamburger, tri-tip capicola pastrami pancetta ribeye turducken. Rump shank turkey pig kevin sausage meatloaf tenderloin drumstick short ribs short loin. Prosciutto spare ribs chuck, pork strip steak pork chop swine bacon turkey shoulder andouille. Jowl landjaeger chicken corned beef. Ham hock kielbasa pancetta ground round sausage. Spare ribs porchetta pastrami filet mignon drumstick ball tip. Beef ribs prosciutto kevin, landjaeger shoulder ham hock ham brisket sirloin chuck t-bone drumstick kielbasa pork chop.</p>
<p>Landjaeger spare ribs chicken ball tip, filet mignon frankfurter ribeye tenderloin corned beef. Strip steak boudin pork loin, chicken turkey ball tip beef ribs ground round shank ham hock. Kevin capicola beef, chuck pork chop shoulder brisket doner meatloaf shank ham hock tenderloin. Chuck ham hock short ribs ground round sausage prosciutto shoulder bacon andouille tri-tip beef biltong filet mignon chicken. Pork belly andouille shank, bacon sausage meatloaf bresaola pork chop short ribs t-bone. Ham hock salami porchetta bacon beef turkey, strip steak kielbasa pancetta brisket meatball t-bone.</p>
<p>Chicken pancetta capicola chuck, turkey meatball jerky frankfurter kielbasa ball tip bacon ground round. Beef ribs brisket meatloaf short ribs landjaeger shankle spare ribs sausage, pancetta swine sirloin flank. Tail shank chuck pancetta, ham meatloaf short ribs sausage rump turkey kevin pork chop landjaeger. Doner boudin short ribs t-bone, jerky shankle bresaola drumstick. Strip steak shank spare ribs boudin doner short ribs. Boudin prosciutto jowl tenderloin tongue beef ribs, short ribs salami short loin strip steak ham jerky. Shank pancetta beef ribs, corned beef ham hock pork belly drumstick tail bresaola chuck.</p>
</div>
<div class="gap gap-100" style="background-image:url(images/kitteh2.jpg);"></div>
<div class="content content-full" id="kittens">
Here be kittens
</div>
<div class="gap gap-50" style="background-image:url(images/kitteh3.jpg);"></div>
<div class="content" id="done">
Images from <a href="http://placekitten.com/attribution.html">http://placekitten.com/</a>, thanks!
</div>
</div>
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
<script type="text/javascript">
skrollr.init({
smoothScrolling: false,
mobileDeceleration: 0.004
});
</script>
</body>
</html>