commit 2bd1f6eaff454a34d3b80cdab535af427255f71a Author: Tim Holman Date: Tue Dec 7 19:12:44 2021 -0500 init diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..d9c2a63 Binary files /dev/null and b/.DS_Store differ diff --git a/css/style.css b/css/style.css new file mode 100755 index 0000000..dac37ed --- /dev/null +++ b/css/style.css @@ -0,0 +1,110 @@ +* { + box-sizing: border-box; +} + +body { + background-color: #0e0e0e; + height: 100vh; + margin: 0; + display: flex; + justify-content: center; + align-items: center; +} + +.background { + 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; + opacity: 0; +} + +.card { + display: block; + position: relative; + width: 420px; + height: 260px; + color: #fff; + flex: none; + perspective: 1000px; +} + +.card__figure { + margin: 0; + width: 100%; + height: 100%; + display: block; + position: relative; + background: #111; + border-radius: 2px; +} + +.card__figure::before { + content: ''; + position: absolute; + width: calc(100% - 14px); + height: calc(100% - 14px); + top: 6px; + left: 6px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 2px; + pointer-events: none; + box-shadow: 0 30px 20px rgb(0 0 0 / 50%); +} + +.card__deco { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; +} + +.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%); +} + +figcaption { + height: 100%; + padding: 25px; + color: #eee; + font-family: Avenir; + display: flex; + justify-content: space-between; + flex-direction: column; +} + +h1 { + margin: 0; + font-size: 3.3rem; + line-height: 3.3rem; + font-weight: 900; +} + +p { + margin: 0; + font-weight: 900; +} + + +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + diff --git a/index.html b/index.html new file mode 100755 index 0000000..2a6c2c1 --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + + + Travis Heinström + + + + + + + +

+ +

Travis
Heinström

Things Here
Things Here - Things here

+ +

+ + + + + + + \ No newline at end of file diff --git a/js/anime.min.js b/js/anime.min.js new file mode 100644 index 0000000..c7ed90e --- /dev/null +++ b/js/anime.min.js @@ -0,0 +1,19 @@ +(function(u,r){"function"===typeof define&&define.amd?define([],r):"object"===typeof module&&module.exports?module.exports=r():u.anime=r()})(this,function(){var u={duration:1E3,delay:0,loop:!1,autoplay:!0,direction:"normal",easing:"easeOutElastic",elasticity:400,round:!1,begin:void 0,update:void 0,complete:void 0},r="translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(" "),y,f={arr:function(a){return Array.isArray(a)},obj:function(a){return-1< +Object.prototype.toString.call(a).indexOf("Object")},svg:function(a){return a instanceof SVGElement},dom:function(a){return a.nodeType||f.svg(a)},num:function(a){return!isNaN(parseInt(a))},str:function(a){return"string"===typeof a},fnc:function(a){return"function"===typeof a},und:function(a){return"undefined"===typeof a},nul:function(a){return"null"===typeof a},hex:function(a){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a)},rgb:function(a){return/^rgb/.test(a)},hsl:function(a){return/^hsl/.test(a)}, +col:function(a){return f.hex(a)||f.rgb(a)||f.hsl(a)}},D=function(){var a={},b={Sine:function(a){return 1-Math.cos(a*Math.PI/2)},Circ:function(a){return 1-Math.sqrt(1-a*a)},Elastic:function(a,b){if(0===a||1===a)return a;var d=1-Math.min(b,998)/1E3,g=a/1-1;return-(Math.pow(2,10*g)*Math.sin(2*(g-d/(2*Math.PI)*Math.asin(1))*Math.PI/d))},Back:function(a){return a*a*(3*a-2)},Bounce:function(a){for(var b,d=4;a<((b=Math.pow(2,--d))-1)/11;);return 1/Math.pow(4,3-d)-7.5625*Math.pow((3*b-2)/22-a,2)}};["Quad", +"Cubic","Quart","Quint","Expo"].forEach(function(a,e){b[a]=function(a){return Math.pow(a,e+2)}});Object.keys(b).forEach(function(c){var e=b[c];a["easeIn"+c]=e;a["easeOut"+c]=function(a,b){return 1-e(1-a,b)};a["easeInOut"+c]=function(a,b){return.5>a?e(2*a,b)/2:1-e(-2*a+2,b)/2};a["easeOutIn"+c]=function(a,b){return.5>a?(1-e(1-2*a,b))/2:(e(2*a-1,b)+1)/2}});a.linear=function(a){return a};return a}(),z=function(a){return f.str(a)?a:a+""},E=function(a){return a.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}, +F=function(a){if(f.col(a))return!1;try{return document.querySelectorAll(a)}catch(b){return!1}},A=function(a){return a.reduce(function(a,c){return a.concat(f.arr(c)?A(c):c)},[])},t=function(a){if(f.arr(a))return a;f.str(a)&&(a=F(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]},G=function(a,b){return a.some(function(a){return a===b})},R=function(a,b){var c={};a.forEach(function(a){var d=JSON.stringify(b.map(function(b){return a[b]}));c[d]=c[d]||[];c[d].push(a)}); +return Object.keys(c).map(function(a){return c[a]})},H=function(a){return a.filter(function(a,c,e){return e.indexOf(a)===c})},B=function(a){var b={},c;for(c in a)b[c]=a[c];return b},v=function(a,b){for(var c in b)a[c]=f.und(a[c])?b[c]:a[c];return a},S=function(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,m){return b+b+c+c+m+m});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var c=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+c+","+b+")"}, +T=function(a){a=/hsl$(\d+),\s*([\d.]+)%,\s*([\d.]+)%$/g.exec(a);var b=parseInt(a[1])/360,c=parseInt(a[2])/100,e=parseInt(a[3])/100;a=function(a,b,c){0>c&&(c+=1);1c?b:c<2/3?a+(b-a)*(2/3-c)*6:a};if(0==c)c=e=b=e;else var d=.5>e?e*(1+c):e+c-e*c,g=2*e-d,c=a(g,d,b+1/3),e=a(g,d,b),b=a(g,d,b-1/3);return"rgb("+255*c+","+255*e+","+255*b+")"},p=function(a){return/([\+\-]?[0-9|auto\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg)?/.exec(a)[2]},I=function(a,b,c){return p(b)? +b:-1=d.delay&&(d.begin(b),d.begin=void 0);c.current>=b.duration&&(d.loop?(c.start=a,"alternate"===d.direction&&C(b,!0),f.num(d.loop)&&d.loop--):(b.ended=!0,b.pause(),d.complete&&d.complete(b)),c.last=0)};b.seek=function(a){P(b,a/100*b.duration)};b.pause=function(){ba(b);var a=n.indexOf(b);-1 div'); + this._initEvents(); + }; + + /** + * Init/Bind events. + */ + TiltFx.prototype._initEvents = function() { + var self = this; + + 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.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, + scaleX: 1, + scaleY: 1, + scaleZ: 1, + translateX: 0, + translateY: 0, + translateZ: 0, + rotateX: 0, + rotateY: 0, + rotateZ: 0 + }); + } + }); + }; + + 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) { + // 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}, + 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 }; + + // Movement settings for the animatable elements. + 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}, + 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]]; + } + } + }; + + 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], + }, + 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)'; + } + }; + + window.TiltFx = TiltFx; + +})(window); \ No newline at end of file