Skip to content

Commit 001d71c

Browse files
kasparsjkasparsj
committed
initialisation bug fixes
1 parent 960549a commit 001d71c

File tree

4 files changed

+41
-39
lines changed

4 files changed

+41
-39
lines changed

‎examples/Dave Gamache.html

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,16 @@
1616
<div class="container">
1717
<div class="container-inner">
1818
<div class="background"></div>
19-
<div id="intro-scene" style="height:100vh" data-parallax='{"pin":"#intro"}'>
19+
<div id="intro-scene" class="scene" style="height:100vh" data-parallax='{"pin":"#intro"}'>
2020
<section id="intro">
2121
<h1 class="name" data-parallax='{"y":-140,"opacity":0,"duration":"100vh","start":"#intro-scene"}'>Parallax Demo</h1>
2222
<h2 class="byline" data-parallax='{"y":-110,"opacity":0,"duration":"100vh","start":"#intro-scene"}'>An experiment by Dave Gamache</h2>
2323
</section>
2424
</div>
25-
<div id="explosion-scene" style="height: 400vh" data-parallax='{"pin":"#explosion"}'>
25+
<div id="explosion-scene" class="scene" style="height: 400vh" data-parallax='{"pin":"#explosion"}'>
2626
<section id="explosion">
27-
<p class="explosion-byline" data-parallax='[{"y":"-25%","opacity":{"to":1,"duration":"85vh"},"duration":"150vh","start":"#explosion-scene","trigger":0},{"y":"-40%","opacity":0,"start":"#explosion-scene","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-scene","trigger":0}'>
27+
<p class="explosion-byline" data-parallax='[{"y":"-25%","opacity":{"from":0,"to":1,"duration":"85vh"},"duration":"150vh","start":"#explosion-scene","trigger":0},{"y":"-40%","opacity":0,"start":"#explosion-scene","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":{"from":0,"to":1},"duration":"150vh","start":"#explosion-scene","trigger":0}'>
2929
<li class="dom-explosion-item dei-1" data-parallax='{"y":"-15%","x":"-10%","opacity":0,"scale":2,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
3030
<li class="dom-explosion-item dei-2" data-parallax='{"y":"-5%","x":"-4%","opacity":0,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
3131
<li class="dom-explosion-item dei-3" data-parallax='{"y":"-9%","x":"2%","opacity":0,"scale":1.2,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
@@ -45,10 +45,10 @@ <h2 class="byline" data-parallax='{"y":-110,"opacity":0,"duration":"100vh","star
4545
</ul>
4646
</section>
4747
</div>
48-
<div id="images-scene" style="height:565vh" data-parallax='{"pin":"#images"}'>
48+
<div id="images-scene" class="scene" style="height:565vh" data-parallax='{"pin":"#images"}'>
4949
<section id="images">
50-
<p class="images-byline" data-parallax='[{"y":"-25%","opacity":{"to":1,"duration":"85vh"},"duration":"150vh","start":"#images-scene","trigger":0},{"scale":0.7,"opacity":{"to":0,"duration":"85vh"},"duration":"150vh","trigger":"-225%","start":"#images-scene"}]'>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-scene"},{"opacity":{"to":0,"duration":"85vh"},"y":"50%","duration":"150vh","trigger":"-415%","start":"#images-scene"}]'>Really, anything is possible …</p>
50+
<p class="images-byline" data-parallax='[{"y":"-25%","opacity":{"from":0,"to":1,"duration":"85vh"},"duration":"150vh","start":"#images-scene","trigger":0},{"scale":0.7,"opacity":{"to":0,"duration":"85vh"},"duration":"150vh","trigger":"-225%","start":"#images-scene"}]'>Or better yet, a realistic example of showcasing some design work.</p>
51+
<p class="images-byline-2" data-parallax='[{"opacity":{"from":0,"to":1},"y":"-15%","trigger":"-225%","duration":"150vh","start":"#images-scene"},{"opacity":{"to":0,"duration":"85vh"},"y":"50%","duration":"150vh","trigger":"-415%","start":"#images-scene"}]'>Really, anything is possible …</p>
5252
<img id="mediumHomepage" class="raw-page" src="Dave%20Gamache_files/oversized-raw-homepage.jpg" data-parallax='[{"y":"-90%","duration":"150vh","start":"#images-scene","trigger":0},{"scale":0.8,"opacity":{"to":"0","duration":"85vh"},"duration":"150vh","trigger":"-225%","start":"#images-scene"}]'>
5353
<div class="iphone" data-parallax='[{"y":"-66%","duration":"150vh","start":"#images-scene","trigger":0},{"x":"-2%","y":"-90%","rotate":"-90","scale":1.3,"duration":"150vh","trigger":"-225%","start":"#images-scene"},{"y":"5%","x":"-2%","duration":"150vh","trigger":"-415%","start":"#images-scene"}]'>
5454
<img class="iphone-frame" src="Dave%20Gamache_files/iphoneframe.png">
@@ -59,8 +59,8 @@ <h2 class="byline" data-parallax='{"y":-110,"opacity":0,"duration":"100vh","star
5959
</div>
6060
</section>
6161
</div>
62-
<div id="links-scene" style="height:100vh" data-parallax='{"pin":"#links"}'>
63-
<section id="links" data-parallax='{"opacity":{"to":1,"duration":"50vh"},"scale":{"from":0.8,"to":1},"duration":"100vh","start":"#links-scene","trigger":0}'>
62+
<div id="links-scene" class="scene" style="height:100vh" data-parallax='{"pin":"#links"}'>
63+
<section id="links" data-parallax='{"opacity":{"from":0,"to":1,"duration":"50vh"},"scale":{"from":0.8,"to":1},"duration":"100vh","start":"#links-scene","trigger":0}'>
6464
<p class="links-byline">Learn how to make your parallax site smooth like this one.</p>
6565
<a class="btn" href="https://medium.com/@dhg/82ced812e61c">Read about it on Medium</a>
6666
</section>

‎examples/Dave Gamache_files/main.css

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,10 @@ body {
1919
left: 10px;
2020
border: 1px solid rgba(255,255,255,.2);
2121
}
22-
.wrapper {
23-
display: none;
22+
.scene {
23+
position: relative;
2424
}
2525

26-
2726
/* 1. Intro Keyframe
2827
--------------------------------------- */
2928
#intro {
@@ -56,38 +55,34 @@ body {
5655
--------------------------------------- */
5756
#explosion,
5857
#images {
59-
position: absolute;
60-
top: 100%;
58+
position: relative;
6159
width: 100%;
62-
height: 100%;
60+
height: 100vh;
6361
}
6462
.explosion-byline,
6563
.images-byline {
66-
position: fixed;
64+
position: absolute;
6765
top: 63%;
6866
left: 10%;
6967
color: white;
7068
max-width: 22%;
71-
opacity: 0;
7269
}
7370
.images-byline-2 {
7471
text-align: center;
75-
position: fixed;
72+
position: absolute;
7673
top: 93%;
7774
left: 25%;
7875
color: white;
7976
width: 50%;
80-
opacity: 0;
8177
}
8278

8379
/* 3. Explosion Keyframe
8480
--------------------------------------- */
8581
#domExplosionList {
86-
position: fixed;
82+
position: absolute;
8783
width: 270px;
8884
top: 100%;
8985
right: 15%;
90-
opacity: 0;
9186
}
9287
.dom-explosion-item {
9388
position: absolute;
@@ -116,7 +111,7 @@ body {
116111
/* 3. Images Keyframe
117112
--------------------------------------- */
118113
.raw-page {
119-
position: fixed;
114+
position: absolute;
120115
width: 45%;
121116
border-radius: 6px;
122117
box-shadow: inset 0 0 1px rgba(255,255,255,.3);
@@ -128,7 +123,7 @@ body {
128123
right: 5%;
129124
}
130125
.iphone {
131-
position: fixed;
126+
position: absolute;
132127
right: 40%;
133128
top: 102%;
134129
width: 16%;
@@ -168,7 +163,6 @@ body {
168163
width: 80%;
169164
color: #fff;
170165
text-align: center;
171-
opacity: 0;
172166
}
173167
.links-byline {
174168
font-size: 30px;

‎jquery.data-parallax.js

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,12 @@
3434
$elements = this;
3535
window.onresize = onResize;
3636
window.onscroll = onScroll;
37-
//setInterval(onScroll, 10);
3837
}
3938
else {
4039
$elements.add(this);
4140
}
4241
elementsArr = $elements.toArray();
42+
onScroll();
4343
}
4444
}
4545
return this;
@@ -274,12 +274,14 @@
274274
needsUpdate: function() {
275275
this.updateStart();
276276
this.updateDuration();
277-
var prevState = this.state;
278277
this.updateState();
279-
return this._needsUpdate(prevState);
278+
return this._needsUpdate();
280279
},
281-
_needsUpdate: function(prevState) {
282-
return (prevState == Scene.STATE_DURING) || (this.state == Scene.STATE_DURING);
280+
_needsUpdate: function() {
281+
return this.prevState === Scene.STATE_DURING ||
282+
this.state === Scene.STATE_DURING ||
283+
(typeof this.prevState === "undefined" &&
284+
(this.state === Scene.STATE_AFTER || typeof this.from != "undefined"));
283285
},
284286
updateStart: function() {
285287
this.startPx = Math.max(getOffset(this.start, this.axis) - this.trigger, 0);
@@ -291,6 +293,7 @@
291293
}
292294
},
293295
updateState: function() {
296+
this.prevState = this.state;
294297
if (scrollTop < this.startPx) {
295298
this.state = Scene.STATE_BEFORE;
296299
}
@@ -302,10 +305,10 @@
302305
}
303306
},
304307
getProgress: function() {
305-
if (this.state == Scene.STATE_BEFORE) {
308+
if (this.state === Scene.STATE_BEFORE) {
306309
return 0;
307310
}
308-
else if (this.state == Scene.STATE_DURING) {
311+
else if (this.state === Scene.STATE_DURING) {
309312
var posPx = scrollTop - this.startPx,
310313
percent = posPx / this.durationPx,
311314
progress = this.ease.call(this, percent);
@@ -368,8 +371,8 @@
368371
Scene.call(this, $el, options);
369372
}
370373
PinScene.prototype = $.extend(Object.create(Scene.prototype), {
371-
_needsUpdate: function(prevState) {
372-
return prevState != this.state;
374+
_needsUpdate: function() {
375+
return this.prevState != this.state;
373376
},
374377
_getOldValue: function(style) {
375378
var toStyle = getComputedStyle(this.to);
@@ -380,11 +383,16 @@
380383
};
381384
},
382385
_getNewValue: function() {
383-
return this.state == Scene.STATE_DURING ? {
384-
position: 'fixed',
385-
top: this.from.top,
386-
left: this.from.left
387-
} : this.from;
386+
if (this.state == Scene.STATE_DURING) {
387+
var top = parseFloat(this.from.top),
388+
left = parseFloat(this.from.left);
389+
return {
390+
position: 'fixed',
391+
top: isNaN(top) ? 0 : top,
392+
left: isNaN(left) ? 0 : left
393+
};
394+
}
395+
return this.from;
388396
},
389397
_setValue: function(newValue) {
390398
this.to.style.position = newValue.position;

0 commit comments

Comments
 (0)