travis/heinstrom.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive

Browse Source
This commit is contained in:
Tim Holman
2021-12-08 19:25:03 -05:00
parent d82aeb744b
commit e86f1afb2f
3 changed files with 228 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
js/main.js
View File

@@ -1,12 +1,10 @@
;(function(window) {
'use strict';
(function (window) {
"use strict";
// Helper vars and functions.
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
function extend(a, b) {
for (var key in b) {
if (b.hasOwnProperty(key)) {
a[key] = b[key];
}
}
@@ -14,17 +12,23 @@
}
function getMousePos(e) {
var posx = 0, posy = 0;
var posx = 0,
posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
} else if (e.clientX || e.clientY) {
posx =
e.clientX +
document.body.scrollLeft +
document.documentElement.scrollLeft;
posy =
e.clientY +
document.body.scrollTop +
document.documentElement.scrollTop;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return { x : posx, y : posy }
return { x: posx, y: posy };
}
/**
@@ -40,61 +44,76 @@
TiltFx.prototype.options = {
movement: {
imgWrapper : {
translation : {x: 0, y: 0, z: 0},
rotation : {x: -5, y: 5, z: 0},
reverseAnimation : {
duration : 1200,
easing : 'easeOutElastic',
elasticity : 600
}
wrapper: {
translation: { x: 0, y: 0, z: 0 },
rotation: { x: -5, y: 5, z: 0 },
reverseAnimation: {
duration: 1200,
easing: "easeOutElastic",
elasticity: 600,
},
},
shine : {
translation : {x: 50, y: 50, z: 0},
reverseAnimation : {
duration : 1200,
easing : 'easeOutElastic',
elasticity: 600
}
}
}
shine: {
translation: { x: 50, y: 50, z: 0 },
reverseAnimation: {
duration: 1200,
easing: "easeOutElastic",
elasticity: 600,
},
},
},
};
/**
* Init.
*/
TiltFx.prototype._init = function() {
TiltFx.prototype._init = function () {
this.DOM.animatable = {};
this.DOM.animatable.imgWrapper = this.DOM.el.querySelector('.card__figure');
this.DOM.animatable.shine = this.DOM.el.querySelector('.card__deco--shine > div');
this.DOM.animatable.wrapper = this.DOM.el.querySelector(".card__figure");
this.DOM.animatable.shine = this.DOM.el.querySelector(
".card__deco--shine > div"
);
this._initEvents();
};
/**
* Init/Bind events.
*/
TiltFx.prototype._initEvents = function() {
TiltFx.prototype._initEvents = function () {
var self = this;
this.mouseenterFn = function() {
for(var key in self.DOM.animatable) {
this.mouseenterFn = function () {
for (var key in self.DOM.animatable) {
anime.remove(self.DOM.animatable[key]);
}
};
this.mousemoveFn = function(ev) {
requestAnimationFrame(function() { self._layout(ev); });
this.mousemoveFn = function (ev) {
requestAnimationFrame(function () {
self._layout(ev);
});
};
this.mouseleaveFn = function(ev) {
requestAnimationFrame(function() {
for(var key in self.DOM.animatable) {
if( self.options.movement[key] == undefined ) {continue;}
this.mouseleaveFn = function (ev) {
requestAnimationFrame(function () {
for (var key in self.DOM.animatable) {
if (self.options.movement[key] == undefined) {
continue;
}
anime({
targets: self.DOM.animatable[key],
duration: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.duration || 0 : 1,
easing: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.easing || 'linear' : 'linear',
elasticity: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.elasticity || null : null,
duration:
self.options.movement[key].reverseAnimation != undefined
? self.options.movement[key].reverseAnimation.duration || 0
: 1,
easing:
self.options.movement[key].reverseAnimation != undefined
? self.options.movement[key].reverseAnimation.easing || "linear"
: "linear",
elasticity:
self.options.movement[key].reverseAnimation != undefined
? self.options.movement[key].reverseAnimation.elasticity || null
: null,
scaleX: 1,
scaleY: 1,
scaleZ: 1,
@@ -103,64 +122,92 @@
translateZ: 0,
rotateX: 0,
rotateY: 0,
rotateZ: 0
rotateZ: 0,
});
}
});
};
this.DOM.el.addEventListener('mousemove', this.mousemoveFn);
this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn);
this.DOM.el.addEventListener('mouseenter', this.mouseenterFn);
this.DOM.el.addEventListener("mousemove", this.mousemoveFn);
this.DOM.el.addEventListener("mouseleave", this.mouseleaveFn);
this.DOM.el.addEventListener("mouseenter", this.mouseenterFn);
};
TiltFx.prototype._layout = function(ev) {
TiltFx.prototype._layout = function (ev) {
// Mouse position relative to the document.
var mousepos = getMousePos(ev),
// Document scrolls.
docScrolls = {left : document.body.scrollLeft + document.documentElement.scrollLeft, top : document.body.scrollTop + document.documentElement.scrollTop},
docScrolls = {
left: document.body.scrollLeft + document.documentElement.scrollLeft,
top: document.body.scrollTop + document.documentElement.scrollTop,
},
bounds = this.DOM.el.getBoundingClientRect(),
// Mouse position relative to the main element (this.DOM.el).
relmousepos = { x : mousepos.x - bounds.left - docScrolls.left, y : mousepos.y - bounds.top - docScrolls.top };
relmousepos = {
x: mousepos.x - bounds.left - docScrolls.left,
y: mousepos.y - bounds.top - docScrolls.top,
};
// Movement settings for the animatable elements.
for(var key in this.DOM.animatable) {
if( this.DOM.animatable[key] == undefined || this.options.movement[key] == undefined ) {
for (var key in this.DOM.animatable) {
if (
this.DOM.animatable[key] == undefined ||
this.options.movement[key] == undefined
) {
continue;
}
var t = this.options.movement[key] != undefined ? this.options.movement[key].translation || {x:0,y:0,z:0} : {x:0,y:0,z:0},
r = this.options.movement[key] != undefined ? this.options.movement[key].rotation || {x:0,y:0,z:0} : {x:0,y:0,z:0},
var t =
this.options.movement[key] != undefined
? this.options.movement[key].translation || { x: 0, y: 0, z: 0 }
: { x: 0, y: 0, z: 0 },
r =
this.options.movement[key] != undefined
? this.options.movement[key].rotation || { x: 0, y: 0, z: 0 }
: { x: 0, y: 0, z: 0 },
setRange = function (obj) {
for(var k in obj) {
if( obj[k] == undefined ) {
obj[k] = [0,0];
}
else if( typeof obj[k] === 'number' ) {
obj[k] = [-1*obj[k],obj[k]];
for (var k in obj) {
if (obj[k] == undefined) {
obj[k] = [0, 0];
} else if (typeof obj[k] === "number") {
obj[k] = [-1 * obj[k], obj[k]];
}
}
};
setRange(t);
setRange(r);
var transforms = {
translation : {
x: (t.x[1]-t.x[0])/bounds.width*relmousepos.x + t.x[0],
y: (t.y[1]-t.y[0])/bounds.height*relmousepos.y + t.y[0],
z: (t.z[1]-t.z[0])/bounds.height*relmousepos.y + t.z[0],
translation: {
x: ((t.x[1] - t.x[0]) / bounds.width) * relmousepos.x + t.x[0],
y: ((t.y[1] - t.y[0]) / bounds.height) * relmousepos.y + t.y[0],
z: ((t.z[1] - t.z[0]) / bounds.height) * relmousepos.y + t.z[0],
},
rotation: {
x: ((r.x[1] - r.x[0]) / bounds.height) * relmousepos.y + r.x[0],
y: ((r.y[1] - r.y[0]) / bounds.width) * relmousepos.x + r.y[0],
z: ((r.z[1] - r.z[0]) / bounds.width) * relmousepos.x + r.z[0],
},
rotation : {
x: (r.x[1]-r.x[0])/bounds.height*relmousepos.y + r.x[0],
y: (r.y[1]-r.y[0])/bounds.width*relmousepos.x + r.y[0],
z: (r.z[1]-r.z[0])/bounds.width*relmousepos.x + r.z[0]
}
};
this.DOM.animatable[key].style.WebkitTransform = this.DOM.animatable[key].style.transform = 'translateX(' + transforms.translation.x + 'px) translateY(' + transforms.translation.y + 'px) translateZ(' + transforms.translation.z + 'px) rotateX(' + transforms.rotation.x + 'deg) rotateY(' + transforms.rotation.y + 'deg) rotateZ(' + transforms.rotation.z + 'deg)';
this.DOM.animatable[key].style.WebkitTransform = this.DOM.animatable[
key
].style.transform =
"translateX(" +
transforms.translation.x +
"px) translateY(" +
transforms.translation.y +
"px) translateZ(" +
transforms.translation.z +
"px) rotateX(" +
transforms.rotation.x +
"deg) rotateY(" +
transforms.rotation.y +
"deg) rotateZ(" +
transforms.rotation.z +
"deg)";
}
};
window.TiltFx = TiltFx;
})(window);
})(window);