diff --git a/css/style.css b/css/style.css index dac37ed..83f2d7d 100755 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,5 @@ * { - box-sizing: border-box; + box-sizing: border-box; } body { @@ -12,40 +12,47 @@ body { } .background { - background-color: #0e0e0e; - background-image: repeating-linear-gradient(135deg, #000, #19191a 1%, transparent 1.5%, transparent 50% ); + background-color: #0e0e0e; + background-image: repeating-linear-gradient( + 135deg, + #000, + #19191a 1%, + transparent 1.5%, + transparent 50% + ); background-size: 100px 100px; position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - animation: fade-in 2500ms ease-out forwards 1s; + top: 0; + left: 0; + width: 100%; + height: 100%; + animation: fade-in 1750ms ease-out forwards; opacity: 0; } .card { - display: block; - position: relative; - width: 420px; + display: block; + position: relative; + max-width: 420px; + width: 80%; height: 260px; - color: #fff; - flex: none; - perspective: 1000px; + color: #fff; + flex: none; + perspective: 1000px; } .card__figure { - margin: 0; - width: 100%; - height: 100%; - display: block; - position: relative; - background: #111; - border-radius: 2px; + margin: 0; + width: 100%; + height: 100%; + display: block; + position: relative; + background: #111; + border-radius: 3px; } .card__figure::before { - content: ''; + content: ""; position: absolute; width: calc(100% - 14px); height: calc(100% - 14px); @@ -58,26 +65,32 @@ body { } .card__deco { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow: hidden; - pointer-events: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; + border-radius: 3px; } .card__deco--shine div { - position: absolute; - width: 200%; - height: 200%; - top: -50%; - left: -50%; - background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.9) 0%, rgba(200, 200, 200, 0.05) 50%, transparent 100%); + position: absolute; + width: 200%; + height: 200%; + top: -50%; + left: -50%; + background-image: linear-gradient( + 45deg, + rgba(0, 0, 0, 0.9) 0%, + rgba(200, 200, 200, 0.05) 50%, + transparent 100% + ); } figcaption { - height: 100%; + height: 100%; padding: 25px; color: #eee; font-family: Avenir; @@ -94,17 +107,42 @@ h1 { } p { - margin: 0; - font-weight: 900; + margin: 0; + font-weight: 900; } - @keyframes fade-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } +@media screen and (max-width: 430px) { + .card { + height: 450px; + } +} + +@media screen and (max-width: 380px) { + h1 { + font-size: 2.8rem; + line-height: 2.8rem; + } +} + +@media screen and (max-width: 330px) { + h1 { + font-size: 2rem; + line-height: 2rem; + } +} + +@media screen and (max-width: 250px) { + h1 { + font-size: 1.3rem; + line-height: 1.3rem; + } +} diff --git a/index.html b/index.html index 2a6c2c1..95e4d4c 100755 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - - - + + + Travis Heinström @@ -12,30 +12,26 @@ -
- -
-
-
-
-
-
-

Travis
Heinström

-

Things Here
Things Here - Things here

-
-
-
-
-
- +
+
+
+
+

+ Travis
+ Heinström +

+

Things Here
Things Here - Things here

+
+
+
- \ No newline at end of file + diff --git a/js/main.js b/js/main.js index 641321e..bcc389f 100644 --- a/js/main.js +++ b/js/main.js @@ -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); \ No newline at end of file +})(window);