Skip to content

Commit

Permalink
fixed percentage values for translate3d
Browse files Browse the repository at this point in the history
  • Loading branch information
@kasparsj
kasparsj committed Oct 22, 2015
1 parent 0d9c711 commit c9f9c64
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 54 deletions.
16 changes: 8 additions & 8 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,25 +66,25 @@ Make an elements' position fixed during the scene.
Adds one or more classes to the element during the scene.

#### x
**Type:** number
**Type:** number or string (percentage or viewport units)

translateX
translateX. Percentages in this case are relative to the duration.

#### y
**Type:** number
**Type:** number or string (percentage or viewport units)

translateY
translateY. Percentages in this case are relative to the duration.

#### z
**Type:** number
**Type:** number or string (percentage or viewport units)

translateZ
translateZ. Percentages in this case are relative to the duration.

#### scale or scaleX and scaleY
**Type:** number
**Type:** number or string (percentage)

#### rotate
**Type:** number
**Type:** number or string (percentage)

Rotation in degrees.

Expand Down
46 changes: 23 additions & 23 deletions examples/Dave Gamache.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,36 +24,36 @@ <h2 class="byline" data-parallax='{"y":-110,"opacity":0,"duration":"100vh","star
</div>
<div id="explosion-scene" class="scene" style="height: 400vh" data-parallax='{"pin":"#explosion"}'>
<section id="explosion">
<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>
<ul id="domExplosionList" data-parallax='{"y":"-70%","opacity":1,"duration":"150vh","start":"#explosion-scene","trigger":0}'>
<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>
<li class="dom-explosion-item dei-2" data-parallax='{"y":"-5%","x":"-4%","opacity":0,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<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>
<li class="dom-explosion-item dei-4" data-parallax='{"y":"-17%","x":"8%","opacity":0,"scale":1.5,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-5" data-parallax='{"y":"-2%","x":"-15%","opacity":0,"scale":2,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-6" data-parallax='{"y":"-1%","x":"-7%","opacity":0,"scale":1.2,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-7" data-parallax='{"y":"-4%","x":"2%","opacity":0,"scale":1.1,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-8" data-parallax='{"y":"-3%","x":"12%","opacity":0,"scale":1.8,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-9" data-parallax='{"y":"3%","x":"-12%","opacity":0,"scale":1.5,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-10" data-parallax='{"y":"5%","x":"-4%","opacity":0,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-11" data-parallax='{"y":"8%","x":"6%","opacity":0,"scale":1.4,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-12" data-parallax='{"y":"1%","x":"20%","opacity":0,"scale":1.9,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-13" data-parallax='{"y":"8%","x":"-12%","opacity":0,"scale":1.8,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-14" data-parallax='{"y":"4%","x":"-3%","opacity":0,"scale":1.3,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-15" data-parallax='{"y":"14%","x":"5%","opacity":0,"scale":1.7,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-16" data-parallax='{"y":"6%","x":"9%","opacity":0,"scale":2,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<p class="explosion-byline" data-parallax='[{"y":"-25vh","opacity":{"to":1,"duration":"85vh"},"duration":"150vh","start":"#explosion-scene","trigger":0},{"y":"-40vh","opacity":0,"start":"#explosion-scene","trigger":"-300%","duration":"100vh"}]'>Here's an example of 16 elements scaling, fading and moving at once.</p>
<ul id="domExplosionList" data-parallax='{"y":"-70vh","opacity":1,"duration":"150vh","start":"#explosion-scene","trigger":0}'>
<li class="dom-explosion-item dei-1" data-parallax='{"y":"-15vh","x":"-10vw","opacity":0,"scale":2,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-2" data-parallax='{"y":"-5vh","x":"-4vw","opacity":0,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-3" data-parallax='{"y":"-9vh","x":"2vw","opacity":0,"scale":1.2,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-4" data-parallax='{"y":"-17vh","x":"8vw","opacity":0,"scale":1.5,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-5" data-parallax='{"y":"-2vh","x":"-15vw","opacity":0,"scale":2,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-6" data-parallax='{"y":"-1vh","x":"-7vw","opacity":0,"scale":1.2,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-7" data-parallax='{"y":"-4vh","x":"2vw","opacity":0,"scale":1.1,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-8" data-parallax='{"y":"-3vh","x":"12vw","opacity":0,"scale":1.8,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-9" data-parallax='{"y":"3vh","x":"-12vw","opacity":0,"scale":1.5,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-10" data-parallax='{"y":"5vh","x":"-4vw","opacity":0,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-11" data-parallax='{"y":"8vh","x":"6vw","opacity":0,"scale":1.4,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-12" data-parallax='{"y":"1vh","x":"20vw","opacity":0,"scale":1.9,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-13" data-parallax='{"y":"8vh","x":"-12vw","opacity":0,"scale":1.8,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-14" data-parallax='{"y":"4vh","x":"-3vw","opacity":0,"scale":1.3,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-15" data-parallax='{"y":"14vh","x":"5vw","opacity":0,"scale":1.7,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
<li class="dom-explosion-item dei-16" data-parallax='{"y":"6vh","x":"9vw","opacity":0,"scale":2,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
</ul>
</section>
</div>
<div id="images-scene" class="scene" style="height:565vh" data-parallax='{"pin":"#images"}'>
<section id="images">
<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>
<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>
<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"}]'>
<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"}]'>
<p class="images-byline" data-parallax='[{"y":"-25vh","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>
<p class="images-byline-2" data-parallax='[{"opacity":1,"y":"-15vh","trigger":"-225%","duration":"150vh","start":"#images-scene"},{"opacity":{"to":0,"duration":"85vh"},"y":"50vh","duration":"150vh","trigger":"-415%","start":"#images-scene"}]'>Really, anything is possible …</p>
<img id="mediumHomepage" class="raw-page" src="Dave%20Gamache_files/oversized-raw-homepage.jpg" data-parallax='[{"y":"-90vh","duration":"150vh","start":"#images-scene","trigger":0},{"scale":0.8,"opacity":{"to":0,"duration":"85vh"},"duration":"150vh","trigger":"-225%","start":"#images-scene"}]'>
<div class="iphone" data-parallax='[{"y":"-66vh","duration":"150vh","start":"#images-scene","trigger":0},{"x":"-2vw","y":"-90vh","rotate":-90,"scale":1.3,"duration":"150vh","trigger":"-225%","start":"#images-scene"},{"y":"5vh","x":"-2vw","duration":"150vh","trigger":"-415%","start":"#images-scene"}]'>
<img class="iphone-frame" src="Dave%20Gamache_files/iphoneframe.png">
<div class="iphone-viewport">
<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-scene"}]'>
<img id="medium-profile-iphone" class="iphone-content" src="Dave%20Gamache_files/medium-profile-iphone-fullsize.jpg" data-parallax='[{"scale":0.9,"x":"27vw","duration":"150vh","trigger":"-225%","start":"#images-scene"}]'>
<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-scene"}'>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions examples/sections.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,19 @@
<div class="abs-content-middle">Content 1</div>
</section>
<section>
<div class="section-bg bg-sunset parallax-bg" data-parallax='{"y":"70%"}'></div>
<div class="section-bg bg-sunset parallax-bg" data-parallax='{"y":"70vh"}'></div>
</section>
<section class="spacer">
<div class="abs-content-middle">Content 2</div>
</section>
<section>
<div class="section-bg bg-volcano parallax-bg" data-parallax='{"y":"70%"}'></div>
<div class="section-bg bg-volcano parallax-bg" data-parallax='{"y":"70vh"}'></div>
</section>
<section class="spacer">
<div class="abs-content-middle">Content 3</div>
</section>
<section>
<div class="section-bg bg-coral-reef parallax-bg" data-parallax='{"y":"70%"}'></div>
<div class="section-bg bg-coral-reef parallax-bg" data-parallax='{"y":"70vh"}'></div>
</section>
<section class="spacer spacer-lg">
<div class="abs-content-middle">Content 4</div>
Expand Down
86 changes: 67 additions & 19 deletions jquery.data-parallax.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
documentWidth, documentHeight,
scrollTicking = false,
resizeTicking = false,
isTouchDevice = window.Modernizr && typeof(Modernizr.touchevents) != 'undefined' ? Modernizr.touchevents : testTouchEvents();
isTouchDevice = window.Modernizr && typeof(Modernizr.touchevents) != 'undefined' ? Modernizr.touchevents : testTouchEvents(),
PERC_RE = /%/g,
VU_RE = /v(w|h)/g;

function testTouchEvents() {
return 'ontouchstart' in window // works on most browsers
Expand Down Expand Up @@ -298,14 +300,13 @@

function convertOption(value, maxValue) {
if (typeof value === "string") {
var percValue = parseFloat(value) / 100;
if (value.match(/%/g)) {
value = percValue * maxValue;
if (value.match(PERC_RE)) {
value = convertPerc(value, maxValue);
}
else {
var matches = value.match(/v(w|h)/g);
var matches = value.match(VU_RE);
if (matches) {
value = percValue * (matches[0] === 'vw' ? windowWidth : windowHeight);
value = convertVU(value, matches[0]);
}
}
}
Expand All @@ -314,6 +315,14 @@
}
return value;
}

function convertVU(percent, unit) {
return convertPerc(percent, (unit === 'vw' ? windowWidth : windowHeight));
}

function convertPerc(percent, maxValue) {
return parseFloat(percent) / 100 * maxValue;
}

function isElement(obj) {
try {
Expand Down Expand Up @@ -482,28 +491,67 @@
typeof this.from != "undefined" || (this.from = defaultValue);
}
};

function ScalarScene($el, options, maxValue, defaultUnit) {
this.convertPerc = false;
this.unit = defaultUnit;
if (typeof maxValue != "undefined") {
options.from = convertOption(options.from, maxValue);
options.to = convertOption(options.to, maxValue);
}
else {
if (typeof options.from === "string") {
options.from = this._parseString(options.from);
}
else if (typeof options.from === "function") {
options.from = options.from();
}
if (typeof options.to === "string") {
options.to = this._parseString(options.to);
}
else if (typeof options.to === "function") {
options.to = options.to();
}
}
Scene.call(this, $el, options);
this.unit = typeof this.to === "string" ? parseUnit(this.to) : defaultUnit;
}
ScalarScene.prototype = inherit(Scene.prototype, {
_parseString: function(value) {
if (value.match(PERC_RE)) {
this.convertPerc = true;
}
else {
var matches = value.match(VU_RE);
if (matches) {
value = convertVU(value, matches[0]);
}
else {
this.unit = parseUnit(value);
}
}
return value;
},
_getNewValue: function() {
// todo: think about this once more ("90" != 90)
if (typeof(this.from) != typeof(this.to)) {
console.error("Parallax from and to values have different types " + this.from + "("+typeof(this.from)+") " + this.to + "("+typeof(this.to)+")");
var from = this.from,
to = this.to;
if (typeof from === "string") {
if (this.convertPerc && from.substr(-1) === "%") {
from = convertOption(from, this.durationPx);
}
else {
from = parseFloat(from);
}
}
if (typeof this.to === "string") {
var from = parseFloat(this.from),
to = parseFloat(this.to);
return interpolate(from, to, this.getProgress()) + this.unit;
if (typeof to === "string") {
if (this.convertPerc && to.substr(-1) === "%") {
to = convertOption(to, this.durationPx);
}
else {
to = parseFloat(to);
}
}
var suffix = (typeof this.unit === "undefined" ? 0 : this.unit)
return interpolate(this.from, this.to, this.getProgress()) + suffix;
var suffix = (typeof this.unit === "undefined" ? 0 : this.unit);
return interpolate(from, to, this.getProgress()) + suffix;
}
});

Expand Down Expand Up @@ -672,10 +720,10 @@
function TransformContainer($el, options) {
SceneContainer.call(this, $el, options);
if (options.x) {
this.x = new VOScene($el, options.x, 'translateX', $el.outerWidth(true));
this.x = new VOScene($el, options.x, 'translateX');
}
if (options.y) {
this.y = new VOScene($el, options.y, 'translateY', $el.outerHeight(true));
this.y = new VOScene($el, options.y, 'translateY');
}
if (options.z) {
this.z = new VOScene($el, options.z, 'translateZ');
Expand Down
Loading

0 comments on commit c9f9c64

Please sign in to comment.