forked from davecranwell/jQuery-scroll-parallax
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index-horizontal.html
43 lines (38 loc) · 5.37 KB
/
index-horizontal.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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<ul class="items-horizontal">
<li class="item item1">
<div class="inner inner1"></div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit, risus in venenatis tempor, magna diam ultrices justo, in sodales odio tellus vel quam. Nam eros felis, vulputate a porta ac, rutrum in magna. Donec at tellus velit. Duis non nisi pellentesque mauris vehicula adipiscing. Sed sodales consectetur quam in faucibus. Curabitur a turpis in elit elementum vehicula. Proin fermentum bibendum rutrum. Nullam non sagittis nulla. Nulla nisi mi, placerat ac rhoncus pharetra, pharetra at enim. Vestibulum consectetur sem nec orci volutpat dictum eu condimentum eros. Fusce venenatis malesuada metus, non molestie velit sagittis et. Nullam tellus sapien, imperdiet sit amet posuere vel, sagittis nec turpis. In eget neque erat, euismod lobortis nibh. Maecenas lorem sapien, fermentum in pharetra eget, aliquam ac leo. Maecenas adipiscing porttitor turpis, a pretium justo faucibus eget. Nullam eu purus enim. Cras non felis at turpis auctor bibendum sit amet nec tellus. Fusce interdum sem et purus fermentum faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque euismod commodo tellus, at gravida risus imperdiet quis.</div>
</li>
<li class="item item2">
<div class="inner inner2"></div>
<div class="inner-lev1 inner2a"></div>
<div class="inner-lev2 inner2b"></div>
<div class="content">Vivamus tristique, dolor nec vehicula tincidunt, sem risus convallis arcu, sed porttitor magna augue vel nisl. Phasellus ut enim ac neque egestas rhoncus. Praesent diam quam, sodales at ultricies non, pellentesque non quam. Vestibulum tristique dictum facilisis. In id justo orci, a pretium odio. Aliquam elit neque, aliquam vitae vestibulum a, interdum in urna. Nunc nec risus vitae tortor rhoncus molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent lacus purus, imperdiet id rhoncus eget, tincidunt eu velit. Nam mattis, mauris eu tempus sodales, nisl neque ultricies eros, sit amet fermentum urna risus sit amet nunc.</div>
</li>
<li class="item item3">
<div class="inner inner3"></div>
<div class="content">Morbi venenatis malesuada nibh vel sodales. Ut quis porttitor eros. Nam cursus adipiscing ligula, et fermentum nisl laoreet ut. Sed rhoncus ultrices elementum. Duis tincidunt massa id dui sollicitudin fermentum mollis felis ullamcorper. Ut ligula nisl, interdum ac cursus ac, hendrerit nec odio. Nunc eget tellus quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce et eleifend purus. Cras elementum tristique tortor. Integer nec tortor enim, ac tempus mi. Nulla rhoncus accumsan massa, eu auctor mi accumsan quis. Pellentesque eget lacus non urna bibendum varius in sit amet lectus. Ut ac sapien risus, id porttitor odio. Vestibulum porttitor, est non consequat placerat, ipsum est sagittis nisi, iaculis ultrices nisi lacus quis nisi. Quisque a rhoncus nisl. Praesent luctus velit eu leo faucibus vehicula.</div>
</li>
<li class="item item4">
<div class="inner inner4"></div>
<div class="content">Sed dapibus, quam a consequat ultricies, dui sem ultricies odio, id aliquet diam tortor at sapien. Nam eget magna a magna pharetra venenatis. Pellentesque eu nunc felis, sit amet hendrerit ipsum. Vestibulum massa nisl, consequat vitae tempor et, lobortis id enim. Fusce mattis faucibus rhoncus. Pellentesque neque turpis, ultricies ut congue et, laoreet ut odio. Sed sed erat sed nibh euismod pellentesque. Proin varius arcu ut felis pellentesque molestie. Aenean bibendum euismod sodales. Morbi sollicitudin odio vel turpis tristique at hendrerit magna venenatis. Donec non est ac dui placerat aliquet.</div>
</li>
<li class="item item5">
<div class="inner inner5"></div>
<div class="content">Ut dui erat, condimentum non vestibulum eget, blandit nec dui. Nam eu leo eget dui porta dapibus eu vitae tellus. Vivamus suscipit risus at libero tincidunt a facilisis orci vulputate. In venenatis ullamcorper nisi, eu cursus lectus porttitor aliquet. Suspendisse condimentum nunc et orci pharetra ut tempor odio faucibus. Integer porta semper ipsum, a porta libero lobortis in. Donec vestibulum ornare velit vehicula bibendum. Nam eget commodo nisl. Suspendisse ullamcorper est et orci accumsan eleifend. Integer vel nulla a velit scelerisque aliquam. Mauris et dolor posuere nulla placerat euismod. Sed consequat, orci et congue vehicula, elit velit viverra tellus, sed feugiat lorem sem non diam. Mauris ligula massa, porttitor nec tincidunt non, rhoncus eget lorem. Cras sit amet urna magna. Fusce erat dolor, blandit eu pulvinar at, feugiat et lacus. Proin semper adipiscing velit sit amet dapibus. Aliquam nec pulvinar erat. Nulla eget orci nec nunc molestie venenatis eu sed tortor. Cras dapibus cursus dui tincidunt viverra. Proin eget arcu ligula.</div>
</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://github.com/protonet/jquery.inview/raw/master/jquery.inview.min.js"></script>
<script src="jquery.scrollParallax.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>