-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (135 loc) · 7.09 KB
/
index.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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Demo - How to create a parallax scrolling website</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="author" href="https://plus.google.com/u/0/109859280204979591787/about"/>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
<style type="text/css">
.back-link a {
color: #4ca340;
text-decoration: none;
border-bottom: 1px #4ca340 solid;
}
.back-link a:hover,
.back-link a:focus {
color: #408536;
text-decoration: none;
border-bottom: 1px #408536 solid;
}
h1 {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
margin: 0;
font-family: 'Open Sans', sans-serif;
color: #1c1d1e;
font-size: 32px;
margin-bottom: 3px;
}
h2 {
color: #1c1d1e;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
}
.entry-header .inner {
text-align: left;
margin: 0 auto 20px auto;
width: 800px;
}
.entry-header { padding-top: 20px; background-color: #fff; width:100%; position: fixed; top: 0; left: 0; z-index: 999999}
</style>
</head>
<body class="loading">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<header class="entry-header">
<div class="inner">
<nav class="back-link">
<span class="nav-previous"><a href="http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/" rel="prev"><span class="meta-nav">←</span> Back to article</a></span>
</nav><!-- .nav-single -->
<h1 class="entry-title">Demo - How to create a parallax scrolling website</h1>
</div>
</header>
<main>
<section id="slide-1" class="homeSlide">
<div class="bcg" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#slide-1">
<div class="hsContainer">
<div class="hsContent" data-center="opacity: 1" data-106-top="opacity: 0" data-anchor-target="#slide-1 h2">
<h2>Fade out elements before<br />they leave viewport</h2>
<p>This slide moves background image at a slower speed then the page scroll. Text is fading out to opacity 0 at 106 pixels from the top.</p>
</div>
</div>
</div>
</section>
<section id="slide-2">
<div class="bcg" data-0="background-color:rgb(1,27,59);" data-top="background-color:(0,0,0);" data-anchor-target="#slide-2">
<div class="hsContainer">
<div class="hsContent">
<h2 data-center="opacity: 1" data--200-bottom="opacity: 0" data-206-top="opacity: 1" data-106-top="opacity: 0" data-anchor-target="#slide-2 h2">Fade me in and out</h2>
<p data-center="opacity: 1" data--200-bottom="opacity: 0" data-206-top="opacity: 1" data-106-top="opacity: 0" data-anchor-target="#slide-2 h2">Here we are changing the background color from blue to black. Text is fading in at 206 pixels from the bottom and fading out 106 pixels from the top.</p>
</div>
</div>
</div>
</section>
<section id="slide-3" class="homeSlide">
<div class="bcg" data-center="background-position: 0px 50%;" data-bottom-top="background-position: 0px 40%;" data-top-bottom="background-position: -40px 50%;" data-anchor-target="#slide-3">
<div class="hsContainer">
<div class="hsContent">
<div class="plaxEl" data-106-top="opacity: 0" data--30p-top="opacity: 1;" data--60p-top="opacity: 0;" data-bottom="opacity: 1; position: fixed; top: 206px; width: 100%; left: 0;" data-anchor-target="#slide-3">
<h2>Fixed element fading in and out</h2>
<p><span class="bgBlack">Text is fixed 206 pixels from the top, while the background is moving 40 pixels to the left.</span></p>
<p><span class="bgBlack">Or did you think that the scooter is driving off?</span></p>
</div>
</div>
</div>
</div>
</section>
<section id="slide-4" class="homeSlide homeSlideTall">
<div class="bcg" data-center="background-position: 50% 0px;" data-bottom-top="background-position: 50% 100px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#slide-4">
<div class="curtainContainer">
<div class="curtain" data-bottom-top="opacity: 0" data-106-top="height: 1%; opacity: 0; top: -10%;" data-center="height: 100%; opacity: 0.5; top: 0%;" data-anchor-target="#slide-4"></div>
<div class="copy" data-bottom-top="opacity: 0" data--100-bottom="opacity: 0" data--280-bottom="opacity: 1;" data-280-top="opacity: 1;" data-106-top="opacity: 0;" data-anchor-target="#slide-4 .copy">
<h2>Curtain effect while you scroll</h2>
</div>
</div>
</div>
</section>
<section id="slide-5" class="homeSlide homeSlideTall2">
<div class="bcg">
</div>
<div class="bcg bcg2" data-bottom-top="opacity: 0;" data--33p-top="opacity: 0;" data--66p-top="opacity: 1;" data-anchor-target="#slide-5">
<div class="hsContainer">
<div class="hsContent" data-bottom-top="opacity: 0;" data-center="opacity: 1" data-anchor-target="#slide-5">
<h2>Fixed element fading in and out</h2>
<p>Showcase your beautiful images before blurring the scene and fading in your headline.</p>
</div>
</div>
</div>
<div class="bcg bcg3" data-300-bottom="opacity: 0;" data-100-bottom="opacity: 1;" data-anchor-target="#slide-5">
<div class="hsContainer">
<div class="hsContent" data-100-bottom="opacity: 0;" data-bottom="opacity: 1;" data-anchor-target="#slide-5">
<h2>The End</h2>
<p>Not enough parallax goodness? Let me know in the comments or hit me up at <a href="https://www.twitter.com/ihatetomatoes" target="_blank">@ihatetomatoes</a>.</p>
</div>
</div>
</div>
</section>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/imagesloaded.js"></script>
<script src="js/skrollr.js"></script>
<script src="js/_main.js"></script>
</body>
</html>