window.onload = function(){ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("three"),require("gsap/TweenMax")):"function"==typeof define&&define.amd?define(["three","gsap/TweenMax"],t):e.hoverEffect=t(e.THREE,e.TweenMax)}(this,function(e,t){return t=t&&t.hasOwnProperty("default")?t.default:t,function(n){function i(){for(var e=arguments,t=0;t { setCanvasWidth(); }); function setCanvasWidth() { ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; } function rand(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // Init animation function init() { setCanvasWidth(); window.setInterval(() => { if (sparks.length < OPT.amount) { addSpark(); } }, 1000 / OPT.amount); window.requestAnimationFrame(draw); } function draw() { ctx.fillStyle = 'rgba(0,0,0, 0.1)'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); sparks.forEach((spark, i, array) => { if (spark.opacity <= 0) { array.splice(i, 1); } else { drawSpark(spark); } }); window.requestAnimationFrame(draw); } function Spark(x, y) { this.x = x; this.y = y; this.age = 0; this.acceleration = rand(OPT.acceleration[0], OPT.acceleration[1]); this.color = OPT.randColor ? rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) : OPT.color; this.opacity = OPT.maxopacity - this.age / (OPT.lifetime * rand(1, 10)); this.go = function () { this.x += OPT.speed * OPT.direction.x * this.acceleration / 2; this.y += OPT.speed * OPT.direction.y * this.acceleration / 2; this.opacity = OPT.maxopacity - ++this.age / OPT.lifetime; }; } function addSpark() { let x = rand(-200, window.innerWidth + 200); let y = rand(-200, window.innerHeight + 200); sparks.push(new Spark(x, y)); } function drawSpark(spark) { let x = spark.x,y = spark.y; spark.go(); ctx.beginPath(); ctx.fillStyle = `rgba(${spark.color}, ${spark.opacity})`; ctx.rect(x, y, OPT.size[0], OPT.size[1], 0, 0, Math.PI * 2); ctx.fill(); } init(); })(); // =================================================== var radius = 160; var autoRotate = true; var rotateSpeed = -60; var imgWidth = 120; var imgHeight = 170; setTimeout(init, 100); var obox = document.getElementById('drag-container'); var ospin = document.getElementById('spin-container'); var aImg = ospin.getElementsByTagName('img'); var aVid = ospin.getElementsByTagName('video'); var aEle = [...aImg, ...aVid]; ospin.style.width = imgWidth + "px"; ospin.style.height = imgHeight + "px"; var ground = document.getElementById('ground'); ground.style.width = radius * 3 + "px"; ground.style.height = radius * 3 + "px"; function init(delayTime) { for (var i = 0; i < aEle.length; i++) { aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)"; aEle[i].style.transition = "transform 1s"; aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s"; } } function playSpin(yes) { ospin.style.animationPlayState = (yes?'running':'paused'); } if (autoRotate) { var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert'); ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`; } //================================== var $jscomp$this=this; (function(u,r){"function"===typeof define&&define.amd?define([],r):"object"===typeof module&&module.exports?module.exports=r():u.anime=r()})(this,function(){function u(a){if(!g.col(a))try{return document.querySelectorAll(a)}catch(b){}}function r(a){return a.reduce(function(a,c){return a.concat(g.arr(c)?r(c):c)},[])}function v(a){if(g.arr(a))return a;g.str(a)&&(a=u(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]}function E(a,b){return a.some(function(a){return a===b})} function z(a){var b={},c;for(c in a)b[c]=a[c];return b}function F(a,b){var c=z(a),d;for(d in a)c[d]=b.hasOwnProperty(d)?b[d]:a[d];return c}function A(a,b){var c=z(a),d;for(d in b)c[d]=g.und(a[d])?b[d]:a[d];return c}function R(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,h){return b+b+c+c+h+h});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+")"}function S(a){function b(a,b,c){0> c&&(c+=1);1c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}var c=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);a=parseInt(c[1])/360;var d=parseInt(c[2])/100,c=parseInt(c[3])/100;if(0==d)d=c=a=c;else{var e=.5>c?c*(1+d):c+d-c*d,k=2*c-e,d=b(k,e,a+1/3),c=b(k,e,a);a=b(k,e,a-1/3)}return"rgb("+255*d+","+255*c+","+255*a+")"}function w(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(a))return a[2]}function T(a){if(-1k&&q=m&&(f.began=!0,e("begin")),e("run")):(q<=k&&0!==O&&(d(0),p&&g()),q>=h&&O!==h&&(d(h),p||g()));a>=h&&(f.remaining?(t=n,"alternate"===f.direction&&(f.reversed=!f.reversed)):(f.pause(),P(),Q=b(),f.completed||(f.completed=!0,e("complete"))),l=0);if(f.children)for(a=f.children,h=0;h=b&& 0<=d&&1>=d){var g=new Float32Array(11);if(b!==c||d!==e)for(var h=0;11>h;++h)g[h]=a(.1*h,b,d);return function(h){if(b===c&&d===e)return h;if(0===h)return 0;if(1===h)return 1;for(var k=0,l=1;10!==l&&g[l]<=h;++l)k+=.1;--l;var l=k+(h-g[l])/(g[l+1]-g[l])*.1,n=3*(1-3*d+3*b)*l*l+2*(3*d-6*b)*l+3*b;if(.001<=n){for(k=0;4>k;++k){n=3*(1-3*d+3*b)*l*l+2*(3*d-6*b)*l+3*b;if(0===n)break;var m=a(l,b,d)-h,l=l-m/n}h=l}else if(0===n)h=l;else{var l=k,k=k+.1,f=0;do m=l+(k-l)/2,n=a(m,b,d)-h,0++f);h=m}return a(h,c,e)}}}}(),M=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var b="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),c={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,.335],[.6,-.28,.735,.045],a],Out:[[.25,.46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1], [.075,.82,.165,1],[.175,.885,.32,1.275],function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/2:1-a(-2*b+2,c)/2}]},d={linear:x(.25,.25,.75,.75)},e={},k;for(k in c)e.type=k,c[e.type].forEach(function(a){return function(c,e){d["ease"+a.type+b[e]]=g.fnc(c)?c:x.apply($jscomp$this,c)}}(e)),e={type:e.type};return d}(),ha={css:function(a,b,c){return a.style[b]= c},attribute:function(a,b,c){return a.setAttribute(b,c)},object:function(a,b,c){return a[b]=c},transform:function(a,b,c,d,e){d[e]||(d[e]=[]);d[e].push(b+"("+c+")")}},p=[],y=0,ia=function(){function a(){y=requestAnimationFrame(b)}function b(b){var c=p.length;if(c){for(var e=0;ed&&(b.duration=a.duration);b.children.push(a)});return b};return b};m.random=function(a,b){return Math.floor(Math.random()*(b-a+1))+a};return m}); !function(e){"undefined"==typeof module?this.charming=e:module.exports=e}(function(e,n){"use strict";n=n||{};var t=n.tagName||"span",o=null!=n.classPrefix?n.classPrefix:"char",r=1,a=function(e){for(var n=e.parentNode,a=e.nodeValue,c=a.length,l=-1;++l 1 ? Array.from(this.DOM.shape.querySelectorAll('path')) : this.DOM.shape.querySelector('path'); } this.DOM.deco = this.DOM.base.querySelector('.tooltip__deco'); this.DOM.content = this.DOM.base.querySelector('.tooltip__content'); this.DOM.letters = this.DOM.content.querySelector('.tooltip__letters'); if( this.DOM.letters ) { // Create spans for each letter. charming(this.DOM.letters); // Redefine content. this.DOM.content = this.DOM.letters.querySelectorAll('span'); } this.initEvents(); } initEvents() { this.mouseenterFn = () => { this.mouseTimeout = setTimeout(() => { this.isShown = true; this.show(); }, 75); } this.mouseleaveFn = () => { clearTimeout(this.mouseTimeout); if( this.isShown ) { this.isShown = false; this.hide(); } } this.DOM.trigger.addEventListener('mouseenter', this.mouseenterFn); this.DOM.trigger.addEventListener('mouseleave', this.mouseleaveFn); this.DOM.trigger.addEventListener('touchstart', this.mouseenterFn); this.DOM.trigger.addEventListener('touchend', this.mouseleaveFn); } show() { this.animate('in'); } hide() { this.animate('out'); } animate(dir) { if ( config[this.type][dir].base ) { anime.remove(this.DOM.base); let baseAnimOpts = {targets: this.DOM.base}; anime(Object.assign(baseAnimOpts, config[this.type][dir].base)); } if ( config[this.type][dir].shape ) { anime.remove(this.DOM.shape); let shapeAnimOpts = {targets: this.DOM.shape}; anime(Object.assign(shapeAnimOpts, config[this.type][dir].shape)); } if ( config[this.type][dir].path ) { anime.remove(this.DOM.path); let shapeAnimOpts = {targets: this.DOM.path}; anime(Object.assign(shapeAnimOpts, config[this.type][dir].path)); } if ( config[this.type][dir].content ) { anime.remove(this.DOM.content); let contentAnimOpts = {targets: this.DOM.content}; anime(Object.assign(contentAnimOpts, config[this.type][dir].content)); } if ( config[this.type][dir].trigger ) { anime.remove(this.DOM.triggerSpan); let triggerAnimOpts = {targets: this.DOM.triggerSpan}; anime(Object.assign(triggerAnimOpts, config[this.type][dir].trigger)); } if ( config[this.type][dir].deco ) { anime.remove(this.DOM.deco); let decoAnimOpts = {targets: this.DOM.deco}; anime(Object.assign(decoAnimOpts, config[this.type][dir].deco)); } } destroy() { this.DOM.trigger.removeEventListener('mouseenter', this.mouseenterFn); this.DOM.trigger.removeEventListener('mouseleave', this.mouseleaveFn); this.DOM.trigger.removeEventListener('touchstart', this.mouseenterFn); this.DOM.trigger.removeEventListener('touchend', this.mouseleaveFn); } } const init = (() => tooltips.forEach(t => new Tooltip(t)))(); }; // Menu const ease = { exponentialIn: (t) => { return t == 0.0 ? t : Math.pow(2.0, 10.0 * (t - 1.0)); }, exponentialOut: (t) => { return t == 1.0 ? t : 1.0 - Math.pow(2.0, -10.0 * t); }, exponentialInOut: (t) => { return t == 0.0 || t == 1.0 ? t : t < 0.5 ? +0.5 * Math.pow(2.0, (20.0 * t) - 10.0) : -0.5 * Math.pow(2.0, 10.0 - (t * 20.0)) + 1.0; }, sineOut: (t) => { const HALF_PI = 1.5707963267948966; return Math.sin(t * HALF_PI); }, circularInOut: (t) => { return t < 0.5 ? 0.5 * (1.0 - Math.sqrt(1.0 - 4.0 * t * t)) : 0.5 * (Math.sqrt((3.0 - 2.0 * t) * (2.0 * t - 1.0)) + 1.0); }, cubicIn: (t) => { return t * t * t; }, cubicOut: (t) => { const f = t - 1.0; return f * f * f + 1.0; }, cubicInOut: (t) => { return t < 0.5 ? 4.0 * t * t * t : 0.5 * Math.pow(2.0 * t - 2.0, 3.0) + 1.0; }, quadraticOut: (t) => { return -t * (t - 2.0); }, quarticOut: (t) => { return Math.pow(t - 1.0, 3.0) * (1.0 - t) + 1.0; }, } class ShapeOverlays { constructor(elm) { this.elm = elm; this.path = elm.querySelectorAll('path'); this.numPoints = 4; this.duration = 800; this.delayPointsArray = []; this.delayPointsMax = 180; this.delayPerPath = 70; this.timeStart = Date.now(); this.isOpened = false; this.isAnimating = false; } toggle() { this.isAnimating = true; const range = Math.random() * Math.PI * 2; for (var i = 0; i < this.numPoints; i++) { const radian = (i / (this.numPoints - 1)) * Math.PI * 2; this.delayPointsArray[i] = (Math.sin(radian + range) + 1) / 2 * this.delayPointsMax; } if (this.isOpened === false) { this.open(); } else { this.close(); } } open() { this.isOpened = true; this.elm.classList.add('is-opened'); this.timeStart = Date.now(); this.renderLoop(); } close() { this.isOpened = false; this.elm.classList.remove('is-opened'); this.timeStart = Date.now(); this.renderLoop(); } updatePath(time) { const points = []; for (var i = 0; i < this.numPoints; i++) { points[i] = ease.cubicInOut(Math.min(Math.max(time - this.delayPointsArray[i], 0) / this.duration, 1)) * 100 } let str = ''; str += (this.isOpened) ? `M 0 0 V ${points[0]} ` : `M 0 ${points[0]} `; for (var i = 0; i < this.numPoints - 1; i++) { const p = (i + 1) / (this.numPoints - 1) * 100; const cp = p - (1 / (this.numPoints - 1) * 100) / 2; str += `C ${cp} ${points[i]} ${cp} ${points[i + 1]} ${p} ${points[i + 1]} `; } str += (this.isOpened) ? `V 0 H 0` : `V 100 H 0`; return str; } render() { if (this.isOpened) { for (var i = 0; i < this.path.length; i++) { this.path[i].setAttribute('d', this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * i))); } } else { for (var i = 0; i < this.path.length; i++) { this.path[i].setAttribute('d', this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * (this.path.length - i - 1)))); } } } renderLoop() { this.render(); if (Date.now() - this.timeStart < this.duration + this.delayPerPath * (this.path.length - 1) + this.delayPointsMax) { requestAnimationFrame(() => { this.renderLoop(); }); } else { this.isAnimating = false; } } } (function() { const elmHamburger = document.querySelector('.hamburger'); const gNavItems = document.querySelectorAll('.global-menu__item'); const elmOverlay = document.querySelector('.shape-overlays'); const overlay = new ShapeOverlays(elmOverlay); elmHamburger.addEventListener('click', () => { const slider = document.querySelector('.my-slider'); const boxStyle = document.querySelector('.section-1 .box-style'); const contentBox = document.querySelector('.section-1 .content-box'); if (overlay.isAnimating) { return false; } overlay.toggle(); if (overlay.isOpened === true) { slider.style.zIndex =2; boxStyle.style.zIndex=3; contentBox.style.zIndex=3; elmHamburger.classList.add('is-opened-navi'); for (var i = 0; i < gNavItems.length; i++) { gNavItems[i].classList.add('is-opened'); } } else { elmHamburger.classList.remove('is-opened-navi'); for (var i = 0; i < gNavItems.length; i++) { gNavItems[i].classList.remove('is-opened'); } setTimeout(function(){ slider.style.zIndex =4; boxStyle.style.zIndex=5; contentBox.style.zIndex =6; },1000) } }); }()); window.onscroll = () =>{ let ws = window.pageYOffset; let elems = document.getElementsByClassName('content-box'); let section_6 = document.querySelector('.section-6'); let animeItem = document.querySelector('.anime-list'); let flexItem = document.getElementsByClassName('flex-item'); let flexItemImg = document.getElementsByClassName('flex-item-img'); if (ws > 2600){ flexItemImg[0].classList.add('magictime','tinLeftIn'); flexItem[1].classList.add('magictime','spaceInDown'); flexItem[1].style.display = 'block'; flexItemImg[0].style.display = 'block'; }else{ flexItem[1].classList.remove('magictime','spaceInDown'); flexItemImg[0].classList.remove('magictime','tinLeftIn'); flexItem[1].style.display = 'none'; flexItemImg[0].style.display = 'none'; } if (ws > 2606){ flexItem[2].classList.add('magictime','spaceInDown'); flexItemImg[1].classList.add('magictime','tinLeftIn'); flexItem[2].style.display = 'block'; flexItemImg[1].style.display = 'block'; }else{ flexItem[2].classList.remove('magictime','spaceInDown'); flexItemImg[1].classList.remove('magictime','tinLeftIn'); flexItem[2].style.display = 'none'; flexItemImg[1].style.display = 'none'; } if (ws > 2806){ flexItem[5].classList.add('magictime','spaceInDown'); flexItemImg[2].classList.add('magictime','tinLeftIn'); flexItem[5].style.display = 'block'; flexItemImg[2].style.display = 'block'; }else{ flexItem[5].classList.remove('magictime','spaceInDown'); flexItemImg[2].classList.remove('magictime','tinLeftIn'); flexItem[5].style.display = 'none'; flexItemImg[2].style.display = 'none'; } if (ws > 1966){ section_6.classList.add('magictime','spaceInLeft'); animeItem.classList.add('magictime','spaceInRight'); animeItem.style.display = 'block'; section_6.style.display = 'block'; }else{ section_6.classList.remove('magictime','spaceInLeft'); animeItem.classList.remove('magictime','spaceInRight'); animeItem.style.display = 'none'; section_6.style.display = 'none'; } if (ws > 150){ elems[0].classList.add('magictime','foolishIn'); elems[0].style.display = 'block'; }else{ elems[0].classList.remove('magictime','foolishIn'); elems[0].style.display = 'none'; } if (ws > 550){ elems[1].classList.add('magictime','tinDownIn'); elems[1].style.display = 'block'; }else{ elems[1].classList.remove('magictime','tinDownIn'); elems[1].style.display = 'none'; } if (ws > 600){ elems[2].classList.add('magictime','vanishIn'); elems[2].style.display = 'block'; }else{ elems[2].classList.remove('magictime','vanishIn'); elems[2].style.display = 'none'; } if (ws > 1100){ elems[3].classList.add('magictime','swashIn'); elems[3].style.display = 'block'; }else{ elems[3].classList.remove('magictime','swashIn'); section_6.style.display = 'none'; } } } function clikedAnimeCharacter(index,name){ var imgSrc = document.getElementsByClassName('anime-charcter-list')[index]; var animeName = document.querySelector('.shape-text'); var setImage = document.querySelector('.anime-list-img'); setImage.src = imgSrc.src; animeName.innerHTML = name; setImage.classList.remove('magictime','foolishIn'); setTimeout(function(){ setImage.classList.add('magictime','foolishIn'); },10); } var areWeReady = false; setTimeout(function(){ areWeReady = true; var my_header = document.getElementsByClassName("my_header")[0]; my_header.innerHTML = "Touch to Enter..."; },16000); setTimeout(function(){ var my_header = document.getElementsByClassName("my_header")[0]; my_header.innerHTML = "Initializing Data..."; },2000); setTimeout(function(){ var my_header = document.getElementsByClassName("my_header")[0]; my_header.innerHTML = "Downloading Images..."; },5000); setTimeout(function(){ var my_header = document.getElementsByClassName("my_header")[0]; my_header.innerHTML = "Building Animation..."; },10000); function loadingFinish(){ if(!areWeReady) return; var my_loader = document.getElementsByClassName("my_loader")[0]; $(my_loader).fadeOut(1000); setTimeout(function(){ my_loader.style.display = "none"; document.getElementById("myAudio").play(); document.querySelector("body").style.overflow = 'visible'; },1000) }

Anime Life | Contest