forked from 55minutes/css3-foundation
-
Notifications
You must be signed in to change notification settings - Fork 4
/
parallax.html
113 lines (93 loc) · 7.27 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tags -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- stylesheets -->
<link rel="stylesheet" type="text/css" media="all" href="distribution/styles/styles.css"/>
<!-- conditional comments -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" media="all" href="distribution/styles/ie.css" />
<![endif]-->
<!-- print stylesheet -->
<link rel="stylesheet" type="text/css" media="print" href="distribution/styles/print.css"/>
<!-- external styles -->
<!-- <link rel="stylesheet" type="text/css" media="all" href="http://code.jquery.com/ui/1.8.23/themes/redmond/jquery-ui.css"/> -->
<!-- Favicons and touch icons -->
<!-- For retina-display iPads -->
<link href="images/apple-touch-icon-ipad-retina.png" rel="apple-touch-icon-precomposed" sizes="152x152" type="image/png"/>
<!-- For retina-display iPhones -->
<link href="images/apple-touch-icon-iphone-retina.png" rel="apple-touch-icon-precomposed" sizes="120x120" type="image/png"/>
<!-- For non-retina iPad -->
<link href="images/apple-touch-icon-ipad.png" rel="apple-touch-icon-precomposed" sizes="76x76" type="image/png"/>
<!-- For non-retina iPhone and Android -->
<link href="images/apple-touch-icon-iphone.png" rel="apple-touch-icon-precomposed" type="image/png"/>
<!-- For Nokia -->
<link href="images/apple-touch-icon-iphone.png" rel="shortcut icon"/>
<!-- For everything else -->
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<!-- header javascript -->
<script type="text/javascript" src="distribution/scripts/application-header.js">
</script>
<title>Pure CSS Parallax scrolling</title>
</head>
<body id="parallax">
<header class="page-header">
<nav>
<a href="index.html">Home</a>
<a href="style-guide.html">Style guide</a>
<a href="login.html">Sample login page</a>
<a href="font-weight-tester.html">Font weight tester</a>
<a class="current" href="parallax.html">Parallax scrolling example</a>
</nav>
</header>
<div class="toggle-debug-container">
<label>
<input type="checkbox" name="toggle-debug" class="toggle-debug" value=""/>
Debug
</label>
</div> <!-- /.toggle-debug-container -->
<div class="parallax">
<div class="parallax-group group-1">
<div class="parallax-layer deep">
<h1 class="title">group 1 deep</h1>
</div> <!-- /.parallax-layer deep -->
<div class="parallax-layer back">
<h1 class="title">group 1 back</h1>
</div> <!-- /.parallax-layer back -->
<div class="parallax-layer base">
<h1 class="title">group 1 base</h1>
</div> <!-- /.parallax-layer base -->
</div> <!-- /.parallax-group -->
<div class="parallax-group group-2">
<div class="content parallax-layer base">
<p>Normcore four loko ex dreamcatcher health goth sunt. Stumptown put a bird on it roof party, bespoke aesthetic taxidermy skateboard. Vero Blue Bottle sed Bushwick shabby chic. Meh cardigan cold-pressed cupidatat est put a bird on it, heirloom aesthetic authentic four dollar toast tilde et Blue Bottle Intelligentsia magna. Incididunt fixie ethical hoodie, post-ironic beard twee mixtape tilde retro irony occaecat. Deserunt Thundercats iPhone sartorial, stumptown cronut Helvetica art party keffiyeh Echo Park est. Jean shorts velit tofu, yr wolf ugh consequat Austin adipisicing.</p>
<p>Readymade health goth PBR nulla. McSweeney's occaecat blog Truffaut, meh hashtag paleo PBR Wes Anderson eiusmod kitsch pour-over culpa. Before they sold out four dollar toast adipisicing taxidermy, Williamsburg direct trade est put a bird on it blog deserunt gluten-free delectus food truck scenester cred. Occaecat McSweeney's veniam, four loko cred leggings swag cillum distillery squid +1. Delectus hashtag non, Blue Bottle ullamco quis normcore. Crucifix occupy health goth keytar cupidatat fugiat, pour-over 90's Pinterest tilde Shoreditch. Gentrify banjo asymmetrical umami mumblecore.</p>
<p>Cornhole mustache chambray id Carles literally readymade culpa, McSweeney's fap chia in. Cardigan veniam cold-pressed, vinyl four dollar toast try-hard roof party hashtag nulla. Seitan kitsch letterpress, anim roof party ugh farm-to-table Wes Anderson cornhole tilde odio culpa sustainable. Cornhole id retro trust fund, anim dreamcatcher dolore. Cardigan eiusmod cred synth. Et dolore irure, nihil Marfa synth master cleanse gastropub fixie. Gluten-free bitters laborum, Pinterest small batch forage cliche assumenda aute semiotics master cleanse synth Marfa kale chips actually.</p>
</div> <!-- /.parallax-layer base -->
</div> <!-- /.parallax-group -->
<div class="parallax-group group-3">
<div class="parallax-layer back">
<h1 class="title">group 3 back</h1>
</div> <!-- /.parallax-layer back -->
<div class="parallax-layer base">
<h1 class="title">group 3 base</h1>
</div> <!-- /.parallax-layer base -->
<div class="parallax-layer fore">
<h1 class="title">group 3 fore</h1>
</div> <!-- /.parallax-layer base -->
</div> <!-- /.parallax-group -->
<div class="parallax-group group-4">
<div class="content parallax-layer base">
<p>Normcore four loko ex dreamcatcher health goth sunt. Stumptown put a bird on it roof party, bespoke aesthetic taxidermy skateboard. Vero Blue Bottle sed Bushwick shabby chic. Meh cardigan cold-pressed cupidatat est put a bird on it, heirloom aesthetic authentic four dollar toast tilde et Blue Bottle Intelligentsia magna. Incididunt fixie ethical hoodie, post-ironic beard twee mixtape tilde retro irony occaecat. Deserunt Thundercats iPhone sartorial, stumptown cronut Helvetica art party keffiyeh Echo Park est. Jean shorts velit tofu, yr wolf ugh consequat Austin adipisicing.</p>
<p>Readymade health goth PBR nulla. McSweeney's occaecat blog Truffaut, meh hashtag paleo PBR Wes Anderson eiusmod kitsch pour-over culpa. Before they sold out four dollar toast adipisicing taxidermy, Williamsburg direct trade est put a bird on it blog deserunt gluten-free delectus food truck scenester cred. Occaecat McSweeney's veniam, four loko cred leggings swag cillum distillery squid +1. Delectus hashtag non, Blue Bottle ullamco quis normcore. Crucifix occupy health goth keytar cupidatat fugiat, pour-over 90's Pinterest tilde Shoreditch. Gentrify banjo asymmetrical umami mumblecore.</p>
<p>Cornhole mustache chambray id Carles literally readymade culpa, McSweeney's fap chia in. Cardigan veniam cold-pressed, vinyl four dollar toast try-hard roof party hashtag nulla. Seitan kitsch letterpress, anim roof party ugh farm-to-table Wes Anderson cornhole tilde odio culpa sustainable. Cornhole id retro trust fund, anim dreamcatcher dolore. Cardigan eiusmod cred synth. Et dolore irure, nihil Marfa synth master cleanse gastropub fixie. Gluten-free bitters laborum, Pinterest small batch forage cliche assumenda aute semiotics master cleanse synth Marfa kale chips actually.</p>
</div> <!-- /.parallax-layer base -->
</div> <!-- /.parallax-group -->
</div> <!-- /.parallax -->
<!-- all other javascript goes at the end of the body -->
<script type="text/javascript" src="distribution/scripts/application.js">
</script>
</body>
</html>