Skip to content

Commit d6e2e01

Browse files
kasparsjkasparsj
committed
duration bug fix
Dave Gamache experiment
1 parent 6597af3 commit d6e2e01

13 files changed

+829
-8
lines changed

‎examples/Dave Gamache.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<!-- saved from url=(0032)http://davegamache.com/parallax/ -->
3+
<html class="wf-brandongrotesque-n3-inactive wf-brandongrotesque-n9-inactive wf-inactive">
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6+
<meta charset="utf-8">
7+
<title>Dave Gamache Parallax Demo recreated</title>
8+
<meta name="description" content="Personal site of designer Dave Gamache.">
9+
<meta name="author" content="Dave Gamache | @dhg">
10+
<meta name="viewport" content="width=device-width, initial-scale=1">
11+
<link rel="stylesheet" href="Dave%20Gamache_files/base.css">
12+
<link rel="stylesheet" href="Dave%20Gamache_files/main.css">
13+
</head>
14+
<body>
15+
16+
<div class="container">
17+
<div class="container-inner">
18+
<div class="background"></div>
19+
<div id="intro-wrap" style="height:100vh">
20+
<section id="intro" class="wrapper">
21+
<h1 class="name" data-parallax='{"y":-140,"opacity":0,"duration":"100vh","start":"#intro-wrap"}'>Parallax Demo</h1>
22+
<h2 class="byline" data-parallax='{"y":-110,"opacity":0,"duration":"100vh","start":"#intro-wrap"}'>An experiment by Dave Gamache</h2>
23+
</section>
24+
</div>
25+
<div id="explosion-wrap" style="height: 400vh">
26+
<section id="explosion" class="wrapper">
27+
<p class="explosion-byline" data-parallax='[{"y":"-25%","opacity":{"to":1,"duration":"85vh"},"duration":"150vh","start":"#explosion-wrap","trigger":0},{"y":"-40%","opacity":0,"start":"#explosion-wrap","trigger":"-300%","duration":"100vh"}]'>Here's an example of 16 elements scaling, fading and moving at once.</p>
28+
<ul id="domExplosionList" data-parallax='{"y":"-70%","opacity":1,"duration":"150vh","start":"#explosion-wrap","trigger":0}'>
29+
<li class="dom-explosion-item dei-1" data-parallax='{"y":"-15%","x":"-10%","opacity":0,"scale":2,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
30+
<li class="dom-explosion-item dei-2" data-parallax='{"y":"-5%","x":"-4%","opacity":0,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
31+
<li class="dom-explosion-item dei-3" data-parallax='{"y":"-9%","x":"2%","opacity":0,"scale":1.2,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
32+
<li class="dom-explosion-item dei-4" data-parallax='{"y":"-17%","x":"8%","opacity":0,"scale":1.5,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
33+
<li class="dom-explosion-item dei-5" data-parallax='{"y":"-2%","x":"-15%","opacity":0,"scale":2,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
34+
<li class="dom-explosion-item dei-6" data-parallax='{"y":"-1%","x":"-7%","opacity":0,"scale":1.2,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
35+
<li class="dom-explosion-item dei-7" data-parallax='{"y":"-4%","x":"2%","opacity":0,"scale":1.1,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
36+
<li class="dom-explosion-item dei-8" data-parallax='{"y":"-3%","x":"12%","opacity":0,"scale":1.8,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
37+
<li class="dom-explosion-item dei-9" data-parallax='{"y":"3%","x":"-12%","opacity":0,"scale":1.5,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
38+
<li class="dom-explosion-item dei-10" data-parallax='{"y":"5%","x":"-4%","opacity":0,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
39+
<li class="dom-explosion-item dei-11" data-parallax='{"y":"8%","x":"6%","opacity":0,"scale":1.4,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
40+
<li class="dom-explosion-item dei-12" data-parallax='{"y":"1%","x":"20%","opacity":0,"scale":1.9,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
41+
<li class="dom-explosion-item dei-13" data-parallax='{"y":"8%","x":"-12%","opacity":0,"scale":1.8,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
42+
<li class="dom-explosion-item dei-14" data-parallax='{"y":"4%","x":"-3%","opacity":0,"scale":1.3,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
43+
<li class="dom-explosion-item dei-15" data-parallax='{"y":"14%","x":"5%","opacity":0,"scale":1.7,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
44+
<li class="dom-explosion-item dei-16" data-parallax='{"y":"6%","x":"9%","opacity":0,"scale":2,"duration":"150vh","start":"#explosion-wrap","trigger":"-150%"}'></li>
45+
</ul>
46+
</section>
47+
</div>
48+
<div id="images-wrap" style="height:565vh">
49+
<section id="images" class="wrapper">
50+
<p class="images-byline" data-parallax='[{"y":"-25%","opacity":{"to":1,"duration":"85vh"},"duration":"150vh","start":"#images-wrap","trigger":0},{"scale":0.7,"opacity":{"to":0,"duration":"85vh"},"duration":"150vh","trigger":"-225%","start":"#images-wrap"}]'>Or better yet, a realistic example of showcasing some design work.</p>
51+
<p class="images-byline-2" data-parallax='[{"opacity":1,"y":"-15%","trigger":"-225%","duration":"150vh","start":"#images-wrap"},{"opacity":{"to":0,"duration":"85vh"},"y":"50%","duration":"150vh","trigger":"-415%","start":"#images-wrap"}]'>Really, anything is possible …</p>
52+
<img id="mediumHomepage" class="raw-page" src="Dave%20Gamache_files/oversized-raw-homepage.jpg" data-parallax='[{"y":"-90%","duration":"150vh","start":"#images-wrap","trigger":0},{"scale":0.8,"opacity":{"to":"0","duration":"85vh"},"duration":"150vh","trigger":"-225%","start":"#images-wrap"}]'>
53+
<div class="iphone" data-parallax='[{"y":"-66%","duration":"150vh","start":"#images-wrap","trigger":0},{"x":"-2%","y":"-90%","rotate":"-90","scale":1.3,"duration":"150vh","trigger":"-225%","start":"#images-wrap"},{"y":"5%","x":"-2%","duration":"150vh","trigger":"-415%","start":"#images-wrap"}]'>
54+
<img class="iphone-frame" src="Dave%20Gamache_files/iphoneframe.png">
55+
<div class="iphone-viewport">
56+
<img id="medium-profile-iphone" class="iphone-content" src="Dave%20Gamache_files/medium-profile-iphone-fullsize.jpg" data-parallax='[{"scale":0.9,"x":"27%","duration":"150vh","trigger":"-225%","start":"#images-wrap"}]'>
57+
<img id="davegamache-dot-com" class="iphone-content" src="Dave%20Gamache_files/davegamache-rotated.jpg" data-parallax='{"scale":1,"duration":"150vh","trigger":"-225%","start":"#images-wrap"}'>
58+
</div>
59+
</div>
60+
</section>
61+
</div>
62+
<div id="links-wrap" style="height:100vh">
63+
<section id="links" data-parallax='{"opacity":{"to":1,"duration":"50vh"},"scale":{"from":0.8,"to":1},"duration":"100vh","start":"#links-wrap","trigger":0}'>
64+
<p class="links-byline">Learn how to make your parallax site smooth like this one.</p>
65+
<a class="btn" href="https://medium.com/@dhg/82ced812e61c">Read about it on Medium</a>
66+
</section>
67+
</div>
68+
<div style="height:100vh"></div>
69+
</div>
70+
<div class="twitter" data-parallax='[{"opacity":0,"duration":"100vh","start":"#intro-wrap","trigger":0},{"opacity":1,"duration":"100vh","start":"#links-wrap","trigger":0}]'>
71+
<button id="twitter-widget-0">buttton 1</button>
72+
<button id="twitter-widget-1">buttton 2</button>
73+
</div>
74+
</div>
75+
<h3 class="error">Whoops! Right now this demo doesn't handle resizing or browsers less than 1000px wide. Reload this page or get on a laptop!</h3>
76+
77+
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
78+
<script src="Dave%20Gamache_files/picasso.js"></script>
79+
80+
<script src="https://cdn.rawgit.com/kasparsj/jquery.requestAnimationFrame/master/jquery.requestAnimationFrame.min.js"></script>
81+
<script src="../jquery.data-parallax.js"></script>
82+
83+
84+
</body></html>

‎examples/Dave Gamache_files/base.css

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/* #Reset & Basics (Inspired by E. Meyers)
2+
================================================== */
3+
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
4+
margin: 0;
5+
padding: 0;
6+
border: 0;
7+
font-size: 100%;
8+
font: inherit;
9+
vertical-align: baseline; }
10+
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
11+
display: block; }
12+
body {
13+
line-height: 1; }
14+
ol, ul {
15+
list-style: none; }
16+
blockquote, q {
17+
quotes: none; }
18+
blockquote:before, blockquote:after,
19+
q:before, q:after {
20+
content: '';
21+
content: none; }
22+
table {
23+
border-collapse: collapse;
24+
border-spacing: 0; }
25+
26+
27+
/* #Basic Styles
28+
================================================== */
29+
body {
30+
background: #fff;
31+
font: 24px/1.6 "brandon-grotesque", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
32+
color: #fff;
33+
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
34+
-webkit-text-size-adjust: 100%;
35+
}
36+
37+
38+
/* #Typography
39+
================================================== */
40+
h1, h2, h3, h4, h5, h6 {
41+
font-weight: bold;
42+
}
43+
44+
h1 { font-size: 60px; line-height: 1.1; }
45+
h2 { font-size: 48px; line-height: 1.2; }
46+
h3 { font-size: 36px; line-height: 1.3; }
47+
h4 { font-size: 24px; line-height: 1.4; }
48+
h5 { font-size: 21px; line-height: 1.5; }
49+
h6 { font-size: 18px; line-height: 1.6; }
50+
51+
p { margin: 0 0 20px 0; }
52+
em { font-style: italic; }
53+
strong { font-weight: bold; }
54+
55+
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
56+
57+
58+
/* #Links
59+
================================================== */
60+
a { color: #333; text-decoration: underline; outline: 0; }
61+
a:hover, a:focus { color: #000; }
62+
p a, p a:visited { line-height: inherit; }

‎examples/Dave Gamache_files/davegamache-rotated.jpg

70.5 KB
Loading

‎examples/Dave Gamache_files/iphoneframe.png

99.8 KB
Loading

‎examples/Dave Gamache_files/main.css

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
body {
2+
background: #111;
3+
font-weight: 300;
4+
}
5+
.background {
6+
position: fixed;
7+
width: 100%;
8+
height: 100%;
9+
background-size: cover;
10+
background-position: center;
11+
text-rendering: optimizeLegibility;
12+
}
13+
.background:after {
14+
content: '';
15+
position: fixed;
16+
top: 10px;
17+
right: 10px;
18+
bottom: 10px;
19+
left: 10px;
20+
border: 1px solid rgba(255,255,255,.2);
21+
}
22+
.wrapper {
23+
display: none;
24+
}
25+
26+
27+
/* 1. Intro Keyframe
28+
--------------------------------------- */
29+
#intro {
30+
position: fixed;
31+
top: 48%;
32+
left: 10%;
33+
width: 80%;
34+
color: #fff;
35+
text-align: center;
36+
text-transform: uppercase;
37+
}
38+
.name {
39+
font-size: 35px;
40+
letter-spacing: 12px;
41+
line-height: 1.5;
42+
font-weight: 900;
43+
}
44+
.byline {
45+
font-size: 15px;
46+
letter-spacing: 4px;
47+
text-align: center;
48+
font-weight: 300;
49+
}
50+
.ampersand {
51+
font-family: "Adobe Caslon Pro", "brandon-grotesque";
52+
font-style: italic;
53+
}
54+
55+
/* 2. Explosion/Images/Links Structure and Text
56+
--------------------------------------- */
57+
#explosion,
58+
#images {
59+
position: fixed;
60+
top: 100%;
61+
width: 100%;
62+
height: 100%;
63+
}
64+
.explosion-byline,
65+
.images-byline {
66+
position: fixed;
67+
top: 63%;
68+
left: 10%;
69+
color: white;
70+
max-width: 22%;
71+
opacity: 0;
72+
}
73+
.images-byline-2 {
74+
text-align: center;
75+
position: fixed;
76+
top: 93%;
77+
left: 25%;
78+
color: white;
79+
width: 50%;
80+
opacity: 0;
81+
}
82+
83+
/* 3. Explosion Keyframe
84+
--------------------------------------- */
85+
#domExplosionList {
86+
position: fixed;
87+
width: 270px;
88+
top: 100%;
89+
right: 15%;
90+
opacity: 0;
91+
}
92+
.dom-explosion-item {
93+
position: absolute;
94+
width: 60px;
95+
height: 60px;
96+
background-color: #fff;
97+
}
98+
.dei-1 { top: 0; left: 0; }
99+
.dei-2 { top: 0; left: 70px; }
100+
.dei-3 { top: 0; left: 140px; }
101+
.dei-4 { top: 0; left: 210px; }
102+
.dei-5 { top: 70px; left: 0; }
103+
.dei-6 { top: 70px; left: 70px; }
104+
.dei-7 { top: 70px; left: 140px; }
105+
.dei-8 { top: 70px; left: 210px; }
106+
.dei-9 { top: 140px; left: 0; }
107+
.dei-10 { top: 140px; left: 70px; }
108+
.dei-11 { top: 140px; left: 140px; }
109+
.dei-12 { top: 140px; left: 210px; }
110+
.dei-13 { top: 210px; left: 0; }
111+
.dei-14 { top: 210px; left: 70px; }
112+
.dei-15 { top: 210px; left: 140px; }
113+
.dei-16 { top: 210px; left: 210px; }
114+
115+
116+
/* 3. Images Keyframe
117+
--------------------------------------- */
118+
.raw-page {
119+
position: fixed;
120+
width: 45%;
121+
border-radius: 6px;
122+
box-shadow: inset 0 0 1px rgba(255,255,255,.3);
123+
border: 1px solid rgba(0,0,0,.2);
124+
background-clip: padding-box;
125+
}
126+
#mediumHomepage {
127+
top: 100%;
128+
right: 5%;
129+
}
130+
.iphone {
131+
position: fixed;
132+
right: 40%;
133+
top: 102%;
134+
width: 16%;
135+
}
136+
.iphone-frame {
137+
position: relative;
138+
width: 100%;
139+
height: auto;
140+
background-size: 100%;
141+
z-index: 2;
142+
}
143+
.iphone-viewport {
144+
width: 83.5%;
145+
height: 69.5%;
146+
position: absolute;
147+
top: 14%;
148+
left: 8%;
149+
overflow: hidden;
150+
background-color: #000;
151+
}
152+
.iphone-content {
153+
position: absolute;
154+
top: 0;
155+
left: 0;
156+
width: 100%;
157+
}
158+
#medium-profile-iphone {
159+
z-index: 2;
160+
}
161+
162+
/* 3. Links Keyframe
163+
--------------------------------------- */
164+
#links {
165+
position: fixed;
166+
top: 48%;
167+
left: 10%;
168+
width: 80%;
169+
color: #fff;
170+
text-align: center;
171+
opacity: 0;
172+
}
173+
.links-byline {
174+
font-size: 30px;
175+
line-height: 1.15;
176+
}
177+
.btn {
178+
display: inline-block;
179+
padding: 10px 20px;
180+
border: 1px solid rgba(255,255,255,.5);
181+
color: rgba(255,255,255,.8);
182+
font-size: 12px;
183+
font-weight: 900;
184+
text-decoration: none;
185+
border-radius: 50px;
186+
text-align: center;
187+
text-transform: uppercase;
188+
letter-spacing: .1em;
189+
}
190+
.btn:hover,
191+
.btn:focus {
192+
color: #fff;
193+
border-color: #fff;
194+
}
195+
.twitter {
196+
position: fixed;
197+
top: 20px;
198+
right: 20px;
199+
}
200+
201+
/* 4. Handling resize and small devices
202+
--------------------------------------- */
203+
.error {
204+
display: none;
205+
position: fixed;
206+
width: 80%;
207+
font-size: 30px;
208+
font-weight: 300;
209+
text-align: center;
210+
top: 30%;
211+
left: 10%;
212+
}
213+
.page-error .error {
214+
display: block;
215+
}
216+
.page-error .container {
217+
display: none;
218+
}
219+
@media all and (max-width: 1000px) {
220+
.container {
221+
display: none;
222+
}
223+
.error {
224+
display: block;
225+
font-size: 22px;
226+
}
227+
}

‎examples/Dave Gamache_files/medium-profile-iphone-fullsize.jpg

78 KB
Loading

‎examples/Dave Gamache_files/oversized-raw-homepage.jpg

151 KB
Loading

0 commit comments

Comments
 (0)