forked from doughsay/jquery-scroll-animator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathparallax.html
177 lines (155 loc) · 10 KB
/
parallax.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Awesome JS scrolly thingy</title>
<link rel='stylesheet' type='text/css' href='css/parallax.css'>
</head>
<body>
<div class='stripes' id='a'></div>
<div class='stripes' id='b'></div>
<div id='Container'>
<h1>CSS Animation Controlled by Scrolling</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Fusce pretium blandit purus, non hendrerit lectus pellentesque eget.
In scelerisque neque at dolor accumsan fermentum. Nullam ut leo lorem.
Curabitur sit amet imperdiet elit. Sed iaculis, nisi quis mattis blandit,
tortor dolor vehicula lectus, vitae viverra leo metus tristique nunc.
Pellentesque varius sagittis est gravida lacinia. Maecenas mattis semper
nulla, in molestie sem congue eget. Praesent orci velit, consequat ac
feugiat bibendum, semper sit amet nulla. Donec sit amet ullamcorper mi. In
massa nibh, aliquam ac tempus ut, elementum a nibh. Curabitur diam dui,
mattis id consectetur at, viverra sit amet justo. Vivamus adipiscing sem id
lorem gravida eget imperdiet erat lacinia. Phasellus sagittis erat a quam
mattis et pellentesque neque aliquet. Nam placerat nulla non augue rutrum
convallis. Vestibulum eu nisi ante. Nulla venenatis, risus in faucibus
lobortis, orci ligula volutpat tortor, sed vehicula justo sapien sed eros.
Ut blandit nisl eu mauris egestas eget sollicitudin elit mattis. Donec sit
amet mi quis velit iaculis pharetra. Sed id lorem neque, quis luctus nisl.
Nulla adipiscing lacus sed tortor fringilla cursus.</p>
<h2>Parallax Demo</h2>
<p>Nam rhoncus suscipit placerat. Suspendisse dapibus nisi in erat
elementum et vulputate sem consequat. Pellentesque sollicitudin placerat
elit sed ornare. Donec erat odio, accumsan quis iaculis vitae, vestibulum
et metus. Duis cursus consequat ullamcorper. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae; Donec at ligula
mauris. Phasellus in cursus libero. Aliquam nulla odio, aliquam eu
fermentum id, tristique at metus. Vivamus vitae sem eget mauris vulputate
fringilla eleifend sit amet ante. Morbi consequat hendrerit odio nec
semper. Duis a adipiscing tellus. Maecenas ante dolor, ultricies vel
dictum tincidunt, volutpat in purus. Suspendisse non orci at ante ornare
dapibus vel ac ipsum. Aliquam ac ante nec eros volutpat aliquam.</p>
<h2>Hello, World!</h2>
<p>Vivamus ut felis vitae metus scelerisque rhoncus at in erat. Duis
semper, orci et venenatis commodo, neque nisi aliquet magna, quis
hendrerit purus metus vitae lorem. Vestibulum at tortor sapien. Ut
facilisis tempus risus vel dignissim. In porta rutrum nisi, ut cursus
tellus dignissim ac. In adipiscing gravida nisl, eu elementum magna
scelerisque eu. Donec ac ligula porta magna tristique consequat a eget
lorem. Curabitur feugiat urna vel lacus venenatis non porta lacus egestas.
Sed commodo venenatis iaculis. Suspendisse malesuada metus sit amet orci
hendrerit quis ullamcorper orci porttitor. Sed eu erat ac mi ullamcorper
ultrices. Praesent rhoncus, sapien sit amet volutpat pellentesque, neque
orci varius augue, non adipiscing urna dui in magna. Nulla vulputate
viverra rhoncus. Donec sodales urna in tortor dignissim et imperdiet lacus
dictum. Donec laoreet arcu eu est posuere semper. Maecenas ac leo eget
lectus pellentesque mattis. Phasellus eu pulvinar magna. Cras libero
tortor, scelerisque vel consectetur quis, condimentum gravida nibh.</p>
<h2>Foo!</h2>
<p>Ut eu imperdiet magna. Cras vitae mi quis mauris accumsan pharetra.
Fusce placerat eros vitae diam tempor ullamcorper. Vestibulum in nisi eu
mi interdum ornare ac id enim. Aliquam fermentum iaculis tempor. Nullam
hendrerit sagittis urna quis varius. Suspendisse id libero ligula.
Vestibulum dapibus libero et lacus congue sit amet ornare erat molestie.
Nam a libero a ante scelerisque iaculis. Aliquam pharetra eleifend ipsum,
non ultricies mauris sodales sit amet.</p>
<h2>Bar!</h2>
<p>Quisque sodales elit vel elit aliquam cursus sed vel eros. Cras luctus
interdum massa a pulvinar. Sed quis felis lectus. Donec vehicula suscipit
tortor, eu commodo sapien viverra at. Morbi sit amet metus sapien.
Maecenas sagittis, lectus faucibus ultrices ultrices, felis leo varius
nibh, rutrum varius massa nunc id diam. Mauris sit amet augue tellus.
Praesent ut nibh sit amet mi hendrerit accumsan vel eu nibh. Pellentesque
nec lacus vel metus commodo condimentum. Mauris vel ligula libero, ac
adipiscing elit. Mauris et felis velit. Curabitur feugiat tincidunt tortor
quis lobortis. Phasellus magna arcu, dapibus ut faucibus nec, dapibus quis
metus. In ullamcorper ipsum sit amet eros iaculis eu suscipit velit
euismod. Maecenas facilisis mattis urna, nec faucibus sapien ultrices
eget.</p>
<h2>Baz!</h2>
<p>Mauris et velit magna. Donec et enim augue, a mattis libero. Vestibulum
facilisis, lacus et luctus pellentesque, quam erat lacinia mi, vitae
facilisis purus purus ut odio. Nulla adipiscing, erat nec bibendum
lobortis, erat mi tristique mi, ultricies rhoncus velit tellus non dolor.
Vivamus aliquet, dolor non cursus sodales, erat arcu consequat nisl, vitae
euismod magna massa ac mi. Morbi lacinia, purus a varius auctor, orci
magna cursus velit, vel viverra mauris urna a felis. Donec ut justo
sapien, quis molestie felis. Proin ultricies lacus non ligula dignissim id
malesuada tortor consectetur. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Donec eget neque eu
nibh ultrices pulvinar in vel nisi. Ut eu lacus et lectus lacinia
tincidunt. Nulla iaculis lectus et massa euismod semper. Nullam tincidunt
libero in mauris interdum quis interdum sapien varius.</p>
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet
euismod nisi eget scelerisque. Proin sed dui ut nunc fermentum ornare nec
eu nulla. Duis laoreet arcu et velit interdum in fermentum dui euismod.
Duis lacinia convallis justo sed sollicitudin. Sed pulvinar aliquam tortor
eu euismod. Proin adipiscing urna ac nisl mollis placerat. Vivamus commodo
pellentesque nunc euismod ultrices. Sed lacinia adipiscing justo nec
porttitor. Etiam eu enim odio. Curabitur rhoncus sagittis felis, sit amet
vestibulum eros rhoncus vitae. Mauris tempor, mi id lobortis ornare, lorem
nisl viverra ligula, sit amet cursus est neque sed mauris.</p>
<h2>Two</h2>
<p>Suspendisse luctus lobortis nibh eget semper. Nulla molestie lorem
dignissim lorem tempus at vehicula ligula sagittis. Suspendisse in diam
ante, vel accumsan tortor. Maecenas nunc dui, venenatis sed rutrum quis,
vehicula non dolor. Nulla facilisi. Curabitur tempor mattis leo, sed
sollicitudin arcu convallis quis. Fusce rhoncus, erat quis pellentesque
porta, augue dui congue nisi, sit amet bibendum sapien urna sit amet
ipsum. Pellentesque lacinia vestibulum diam, sit amet malesuada lacus
convallis eget. Etiam sed tortor sit amet eros laoreet dignissim.
Phasellus sodales risus a justo dapibus facilisis. Donec eget nibh sed
libero placerat faucibus ut sed risus. Ut at elit quam. Phasellus et justo
justo, nec semper mi. Aenean commodo rhoncus leo vel consequat. Ut purus
tortor, lobortis quis semper in, tincidunt et ligula. Fusce vulputate
consequat mauris vel facilisis. In rutrum, nulla ac aliquet lacinia, nulla
risus dignissim libero, sed rutrum tellus est sit amet leo. Integer quis
nisi non ante condimentum ultrices. In hac habitasse platea dictumst.</p>
<h2>Three</h2>
<p>Nunc ac augue justo, eu venenatis arcu. Praesent at est ac nibh
interdum viverra. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Vestibulum et augue sed nibh
condimentum consectetur in lobortis purus. Donec leo libero, molestie sed
laoreet quis, tristique nec urna. Morbi eget est ultrices augue pretium
sodales. Phasellus elementum pretium ligula, vel blandit leo lacinia ut.
Vivamus nec placerat lorem. Morbi bibendum rhoncus porta. Pellentesque
ipsum massa, pharetra quis iaculis sed, facilisis ac nibh. Nulla sed augue
viverra risus euismod dapibus. Mauris vitae ullamcorper sem. Duis commodo
magna non felis convallis eu egestas odio pretium. Phasellus ultricies
elit non odio lacinia dapibus nec faucibus purus. Phasellus porta, tortor
id vehicula varius, nisl velit volutpat nunc, sed ornare ipsum sapien eu
quam. Nam vitae neque ac mi sodales consequat id sed nisi. Aenean ac nibh
orci, a congue elit. Curabitur dapibus hendrerit lorem, nec ullamcorper
lectus condimentum a. Nam in mi lorem, facilisis aliquam mi.</p>
<h2>AAhhh!</h2>
<p>Pellentesque pharetra ante nec elit blandit porttitor laoreet elit
faucibus. Suspendisse vehicula risus et tellus laoreet quis suscipit nunc
faucibus. Cras eget massa enim. Etiam vehicula odio nec leo iaculis
varius. Vestibulum a laoreet mi. Nunc at eros purus. Suspendisse leo
velit, tristique quis posuere in, bibendum vitae odio. Aenean commodo, sem
id hendrerit vehicula, quam tellus bibendum erat, et luctus urna eros eu
quam. Nam commodo ipsum ac dui facilisis id aliquam est vehicula. Morbi
accumsan rutrum ante sed ultrices. Pellentesque augue sapien, ultrices a
laoreet nec, ullamcorper quis ligula. Nam nec turpis tortor, vitae
fringilla dolor. Nullam dui odio, aliquet et gravida quis, dictum ac elit.
Fusce fermentum quam eu augue mattis at mollis dolor ultricies. Nullam
adipiscing egestas eros nec pellentesque. Aliquam convallis dignissim
gravida. Cras sed enim metus. Pellentesque sagittis ante at ante placerat
imperdiet. Proin pulvinar purus in magna laoreet euismod.</p>
</div>
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='js/jquery-scroll-animator-1.0.js'></script>
<script type='text/javascript' src='js/parallax.js'></script>
</body>
</html>