XH_Digital_Management/static/js/pages/grid-animation/main.min.js

1 line
8.2 KiB
JavaScript

!function(e){function t(e,t){this.el=e,this.items=this.el.querySelectorAll(".grid__item > .grid__link")}function n(){c.forEach(function(e){e.addEventListener("click",i)}),d.forEach(function(e){e.addEventListener("click",a)})}function i(e){$(".control__item").removeClass("active"),$(this).parent(".control__item").addClass("active"),s[u].classList.add("grid--hidden");var t=s.filter(function(t){return t.classList.contains(e.target.value)})[0];u=s.indexOf(t),t.classList.remove("grid--hidden"),l[u].layout()}function a(e){clearTimeout(r),s[u].classList.add("grid--loading"),r=setTimeout(function(){s[u].classList.remove("grid--loading"),g[u]._render(e.target.getAttribute("data-fx"))},500)}t.prototype.effects={Hapi:{animeOpts:{duration:function(e,t){return 600+75*t},easing:"easeOutExpo",delay:function(e,t){return 50*t},opacity:{value:[0,1],easing:"linear"},scale:[0,1]}},Amun:{sortTargetsFn:function(e,t){var n=e.getBoundingClientRect(),i=t.getBoundingClientRect();return n.left-i.left||n.top-i.top},animeOpts:{duration:function(e,t){return 500+50*t},easing:"easeOutExpo",delay:function(e,t){return 20*t},opacity:{value:[0,1],duration:function(e,t){return 250+50*t},easing:"linear"},translateY:[400,0]}},Kek:{sortTargetsFn:function(e,t){return t.getBoundingClientRect().left-e.getBoundingClientRect().left},animeOpts:{duration:800,easing:[.1,1,.3,1],delay:function(e,t){return 20*t},opacity:{value:[0,1],duration:600,easing:"linear"},translateX:[-500,0],rotateZ:[15,0]}},Isis:{animeOpts:{duration:900,elasticity:500,delay:function(e,t){return 15*t},opacity:{value:[0,1],duration:300,easing:"linear"},translateX:function(){return[0===anime.random(0,1)?100:-100,0]},translateY:function(){return[0===anime.random(0,1)?100:-100,0]}}},Montu:{perspective:800,origin:"50% 0%",animeOpts:{duration:1500,elasticity:400,delay:function(e,t){return 75*t},opacity:{value:[0,1],duration:1e3,easing:"linear"},rotateX:[-90,0]}},Osiris:{perspective:3e3,animeOpts:{duration:function(){return anime.random(500,1e3)},easing:[.2,1,.3,1],delay:function(e,t){return 50*t},opacity:{value:[0,1],duration:700,easing:"linear"},translateZ:{value:[-3e3,0],duration:1e3},rotateY:["-1turns",0]}},Satet:{animeOpts:{duration:800,elasticity:600,delay:function(e,t){return 100*t},opacity:{value:[0,1],duration:600,easing:"linear"},scaleX:{value:[.4,1]},scaleY:{value:[.6,1],duration:1e3}}},Atum:{sortTargetsFn:function(t,n){var i={top:document.body.scrollTop+document.documentElement.scrollTop},a=e.innerHeight+i.top,r=t.getBoundingClientRect(),o=r.top+i.top+r.height/2,s=n.getBoundingClientRect(),l=s.top+i.top+s.height/2;return Math.abs(a-o)-Math.abs(a-l)},perspective:1e3,origin:"50% 0%",animeOpts:{duration:800,easing:[.1,1,.3,1],delay:function(e,t){return 35*t},opacity:{value:[0,1],duration:600,easing:"linear"},translateX:[100,0],translateY:[-100,0],translateZ:[400,0],rotateZ:[10,0],rotateX:[75,0]}},Ra:{origin:"50% 0%",animeOpts:{duration:500,easing:"easeOutBack",delay:function(e,t){return 100*t},opacity:{value:[0,1],easing:"linear"},translateY:[400,0],scaleY:[{value:[3,.6],delay:function(e,t){return 100*t+120},duration:300,easing:"easeOutExpo"},{value:[.6,1],duration:1400,easing:"easeOutElastic"}],scaleX:[{value:[.9,1.05],delay:function(e,t){return 100*t+120},duration:300,easing:"easeOutExpo"},{value:[1.05,1],duration:1400,easing:"easeOutElastic"}]}},Sobek:{animeOpts:{duration:600,easing:"easeOutExpo",delay:function(e,t){return 100*t},opacity:{value:[0,1],duration:100,easing:"linear"},translateX:function(t,n){var i={left:document.body.scrollLeft+document.documentElement.scrollLeft},a=e.innerWidth/2+i.left,r=t.getBoundingClientRect();return[a-(r.left+i.left+r.width/2),0]},translateY:function(t,n){var i={top:document.body.scrollTop+document.documentElement.scrollTop},a=e.innerHeight+i.top,r=t.getBoundingClientRect();return[a-(r.top+i.top+r.height/2),0]},rotate:function(t,n){var i=e.innerWidth/2,a=t.getBoundingClientRect();return[a.left+a.width/2<i?90:-90,0]},scale:[0,1]}},Ptah:{itemOverflowHidden:!0,sortTargetsFn:function(e,t){return t.getBoundingClientRect().left-e.getBoundingClientRect().left},origin:"100% 0%",animeOpts:{duration:500,easing:"easeOutExpo",delay:function(e,t){return 20*t},opacity:{value:[0,1],duration:400,easing:"linear"},rotateZ:[45,0]}},Bes:{revealer:!0,revealerOrigin:"100% 50%",animeRevealerOpts:{duration:800,delay:function(e,t){return 75*t},easing:"easeInOutQuart",scaleX:[1,0]},animeOpts:{duration:800,easing:"easeInOutQuart",delay:function(e,t){return 75*t},opacity:{value:[0,1],easing:"linear"},scale:[.8,1]}},Seker:{revealer:!0,revealerOrigin:"50% 100%",animeRevealerOpts:{duration:500,delay:function(e,t){return 50*t},easing:[.7,0,.3,1],translateY:[100,0],scaleY:[1,0]},animeOpts:{duration:500,easing:[.7,0,.3,1],delay:function(e,t){return 50*t},opacity:{value:[0,1],duration:400,easing:"linear"},translateY:[100,0],scale:[.8,1]}},Nut:{revealer:!0,revealerColor:"#1d1d1d",itemOverflowHidden:!0,animeRevealerOpts:{easing:"easeOutCubic",delay:function(e,t){return 100*t},translateX:[{value:["101%","0%"],duration:400},{value:["0%","-101%"],duration:400}]},animeOpts:{duration:900,easing:"easeOutCubic",delay:function(e,t){return 400+100*t},opacity:{value:1,duration:1,easing:"linear"},scale:[.8,1]}},Shu:{lineDrawing:!0,animeLineDrawingOpts:{duration:800,delay:function(e,t){return 150*t},easing:"easeInOutSine",strokeDashoffset:[anime.setDashoffset,0],opacity:[{value:[0,1]},{value:[1,0],duration:200,easing:"linear",delay:500}]},animeOpts:{duration:800,easing:[.2,1,.3,1],delay:function(e,t){return 150*t+800},opacity:{value:[0,1],easing:"linear"},scale:[.5,1]}}},t.prototype._render=function(e){this._resetStyles();var t=this.effects[e],n=t.animeOpts;if(void 0!=t.perspective&&[].slice.call(this.items).forEach(function(e){e.parentNode.style.WebkitPerspective=e.parentNode.style.perspective=t.perspective+"px"}),void 0!=t.origin&&[].slice.call(this.items).forEach(function(e){e.style.WebkitTransformOrigin=e.style.transformOrigin=t.origin}),void 0!=t.lineDrawing){[].slice.call(this.items).forEach(function(e){var t=document.createElementNS("http://www.w3.org/2000/svg","svg"),n=document.createElementNS("http://www.w3.org/2000/svg","path"),i=e.offsetWidth,a=e.offsetHeight;t.setAttribute("width",i+"px"),t.setAttribute("height",a+"px"),t.setAttribute("viewBox","0 0 "+i+" "+a),t.setAttribute("class","grid__deco"),n.setAttribute("d","M0,0 l"+i+",0 0,"+a+" -"+i+",0 0,-"+a),n.setAttribute("stroke-dashoffset",anime.setDashoffset(n)),t.appendChild(n),e.parentNode.appendChild(t)});var i=t.animeLineDrawingOpts;i.targets=this.el.querySelectorAll(".grid__deco > path"),anime.remove(i.targets),anime(i)}if(void 0!=t.revealer){[].slice.call(this.items).forEach(function(e){var n=document.createElement("div");n.className="grid__reveal",void 0!=t.revealerOrigin&&(n.style.transformOrigin=t.revealerOrigin),void 0!=t.revealerColor&&(n.style.backgroundColor=t.revealerColor),e.parentNode.appendChild(n)});var a=t.animeRevealerOpts;a.targets=this.el.querySelectorAll(".grid__reveal"),a.begin=function(e){for(var t=0,n=e.animatables.length;t<n;++t)e.animatables[t].target.style.opacity=1},anime.remove(a.targets),anime(a)}t.itemOverflowHidden&&[].slice.call(this.items).forEach(function(e){e.parentNode.style.overflow="hidden"}),n.targets=t.sortTargetsFn&&"function"==typeof t.sortTargetsFn?[].slice.call(this.items).sort(t.sortTargetsFn):this.items,anime.remove(n.targets),anime(n)},t.prototype._resetStyles=function(){this.el.style.WebkitPerspective=this.el.style.perspective="none",[].slice.call(this.items).forEach(function(e){var t=e.parentNode;e.style.opacity=0,e.style.WebkitTransformOrigin=e.style.transformOrigin="50% 50%",e.style.transform="none";var n=e.parentNode.querySelector("svg.grid__deco");n&&t.removeChild(n);var i=e.parentNode.querySelector(".grid__reveal");i&&t.removeChild(i),t.style.overflow=""})},e.GridLoaderFx=t;var r,o=document.body,s=[].slice.call(document.querySelectorAll(".grid")),l=[],u=0,c=[].slice.call(document.querySelectorAll(".control__radio")),d=[].slice.call(document.querySelectorAll(".control--effects > .control__btn")),g=[];!function(){imagesLoaded(o,function(){s.forEach(function(e){var n=new Masonry(e,{itemSelector:".grid__item",columnWidth:".grid__sizer",percentPosition:!0,transitionDuration:0});l.push(n),e.classList.add("grid--hidden"),g.push(new t(e))}),s[u].classList.remove("grid--hidden"),n(),o.classList.remove("loading")})}()}(window);