trAvis - MANAGER

Edit File: segmentation.js

!function(t){"use strict";function n(t,i){for(var e in i)i.hasOwnProperty(e)&&(t[e]=i[e]);return t}function r(t,i,e){for(var n=[],s=0;s<e;++s)n.push(anime.random(t,i));return n.sort(function(t,i){return t-i}),n}function s(t){return 0<Object.getOwnPropertyNames(t).length}function i(t,i){this.el=t,this.options=n({},this.options),n(this.options,i);var e=this;imagesLoaded(this.el,{background:!0},function(){e._init(),e._initEvents(),e.options.onReady()})}i.prototype.options={pieces:4,renderOnLoad:!1,shadows:!0,shadowsAnimation:{opacity:.5},parallax:!1,parallaxMovement:{min:10,max:40},animation:{duration:1500,easing:"easeOutQuad",delay:0,translateZ:{min:10,max:65}},animated_effects:{effects:[{effect:"scale"},{effect:"float"},{effect:"rotate"},{effect:"flash"}],animatespeed:[{duration:"1s"},{duration:"2s"},{duration:"1.1s"},{duration:"2.2s"}]},onReady:function(){return!1},onAnimationComplete:function(){return!1},onAnimationStart:function(){return!1},positions:[{top:80,left:10,width:30,height:20},{top:2,left:2,width:40,height:40},{top:30,left:60,width:30,height:60},{top:10,left:20,width:50,height:60}]},i.prototype._init=function(){this.dimensions={width:this.el.offsetWidth,height:this.el.offsetHeight};var t=this.el.style.backgroundImage;this.imgsrc=t.replace("url(","").replace(")","").replace(/\"/gi,""),this._layout();var e=this;this.pieces=[].slice.call(this.el.querySelectorAll(".segmenter__piece-wrap")),this.pieces.forEach(function(t,i){t.style.WebkitTransform=t.style.transform="translateZ(0.0001px)",e.options.renderOnLoad&&e._renderPiece(t)}),this.options.renderOnLoad&&(this.active=!0)},i.prototype._layout=function(){var t=function(){for(var t="clipPath",i=["webkit","moz","ms","o"],e=[t],n=document.createElement("testelement"),s=0,o=i.length;s<o;s++){var a=i[s]+t.charAt(0).toUpperCase()+t.slice(1);e.push(a)}for(s=0,o=e.length;s<o;s++){var r=e[s];if(""===n.style[r]&&(n.style[r]="polygon(50% 0%, 0% 100%, 100% 100%)",""!==n.style[r]))return!0}return!1}(),i=document.createElement("div");i.className="segmenter__background",i.style.backgroundImage="url("+this.imgsrc+")";var e=document.createElement("div"),n="",s=this.options.positions.length;e.className="segmenter__pieces";for(var o=0,a=this.options.pieces;o<a;++o){this.options.parallax&&(n+='<div class="segmenter__piece-parallax">');var r="";if("undefined"!=this.options.animated_effects.animatespeed&&"undefined"!=this.options.animated_effects.effects){var p=this.options.animated_effects.animatespeed[o].duration,l=this.options.animated_effects.effects[o].effect,m=anime.random(10,1e5);"scale"==l&&(r="animation: piece-"+l+"-"+m+" "+p+" cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s infinite alternate none running"),"float"==l&&(r="animation: piece-"+l+"-"+m+" "+p+" ease 0s infinite alternate none running"),"rotate"==l&&(r="animation: piece-"+l+"-"+m+" "+p+" ease 0s infinite alternate none running"),"flash"==l&&(r="animation: piece-"+l+"-"+m+" "+p+" ease 0s infinite normal none running"),"scale"==l&&function(t){t(document).ready(function(){t("head").append("<style type='text/css'>@keyframes piece-"+l+"-"+m+"{from{transform: translate3d(0px, 0px, 10.000"+o+"px) scale(1)}to{transform: translate3d(0px, 0px, 10.000"+o+"px) scale(1.1)}}@-webkit-keyframes piece-"+l+"-"+m+"{from{transform: translate3d(0px, 0px, 10.000"+o+"px) scale(1)}to{transform: translate3d(0px, 0px, 10.000"+o+"px) scale(1.1)}}</style>")})}(jQuery),"float"==l&&function(t){t(document).ready(function(){t("head").append("<style type='text/css'>@keyframes piece-"+l+"-"+m+"{from{transform: translate3d(0px,0px,10.000"+o+"px);}to{transform: translate3d(0px,-15px,10px);}}@-webkit-keyframes piece-"+l+"-"+m+"{from{transform: translate3d(0px,0px,10px);}to{transform: translate3d(0px,-15px,10.000"+o+"px);}}</style>")})}(jQuery),"rotate"==l&&function(t){t(document).ready(function(){t("head").append("<style type='text/css'>@keyframes piece-"+l+"-"+m+"{from{transform: translate3d(0px, 0px, 10.000"+o+"px) rotateY(0deg)}to{transform: translate3d(0px, 0px, 10.000"+o+"px) rotateY(180deg)}}@-webkit-keyframes piece-"+l+"-"+m+"{from{transform: translate3d(0px, 0px, 10.000"+o+"px) rotateY(0deg)}to{transform: translate3d(0px, 0px, 10.000"+o+"px) rotateY(180deg)}}</style>")})}(jQuery),"flash"==l&&function(t){t(document).ready(function(){t("head").append("<style type='text/css'>@keyframes piece-"+l+"-"+m+"{from, 50%, to{opacity: 1;}25%, 75%{opacity: 0;}}@-webkit-keyframes piece-"+l+"-"+m+"{from, 50%, to{opacity: 1;}25%, 75%{opacity: 0;}}</style>")})}(jQuery)}n+='<div class="segmenter__piece-wrap" style="'+r+'">';var f,h,d,c,u,y,x,g,v=o<=s-1?o:0,w="random"===this.options.positions;f=w?anime.random(0,100):this.options.positions[v].top,h=w?anime.random(0,100):this.options.positions[v].left,d=w?anime.random(0,100):this.options.positions[v].width,c=w?anime.random(0,100):this.options.positions[v].height,t||(u=w?f/100*this.dimensions.height:this.options.positions[v].top/100*this.dimensions.height,y=w?h/100*this.dimensions.width:this.options.positions[v].left/100*this.dimensions.width,x=w?d/100*this.dimensions.width+y:this.options.positions[v].width/100*this.dimensions.width+y,g=w?c/100*this.dimensions.height+u:this.options.positions[v].height/100*this.dimensions.height+u),this.options.shadows&&(n+='<div class="segmenter__shadow" style="top: '+f+"%; left: "+h+"%; width: "+d+"%; height: "+c+'%"></div>'),n+=t?'<div class="segmenter__piece" style="background-image: url('+this.imgsrc+"); -webkit-clip-path: polygon("+h+"% "+f+"%, "+(h+d)+"% "+f+"%, "+(h+d)+"% "+(f+c)+"%, "+h+"% "+(f+c)+"%); clip-path: polygon("+h+"% "+f+"%, "+(h+d)+"% "+f+"%, "+(h+d)+"% "+(f+c)+"%, "+h+"% "+(f+c)+'%)"></div>':'<div class="segmenter__piece" style="background-image: url('+this.imgsrc+"); clip: rect("+u+"px,"+x+"px,"+g+"px,"+y+'px)"></div>',n+="</div>",this.options.parallax&&(n+="</div>")}e.innerHTML=n,this.el.innerHTML="",this.el.appendChild(i),this.el.appendChild(e)},i.prototype._renderPiece=function(t){var i=this.pieces.indexOf(t);if(null!=self.options.animation.translateZ)if("object"==typeof self.options.animation.translateZ){var e=r(self.options.animation.translateZ.min,self.options.animation.translateZ.max,self.options.pieces);t.style.transform=t.style.WebkitTransform="translateZ("+e[i]+"px)"}else t.style.transform=t.style.WebkitTransform="translateZ("+self.options.animation.translateZ+"px)";if(null!=self.options.animation.translateY)if("object"==typeof self.options.animation.translateY){e=r(self.options.animation.translateY.min,self.options.animation.translateY.max,self.options.pieces);t.style.transform=t.style.WebkitTransform="translateY("+e[i]+"px)"}else t.style.transform=t.style.WebkitTransform="translateY("+self.options.animation.translateY+"px)";if(null!=self.options.animation.translateX)if("object"==typeof self.options.animation.translateX){e=r(self.options.animation.translateX.min,self.options.animation.translateX.max,self.options.pieces);t.style.transform=t.style.WebkitTransform="translateX("+e[i]+"px)"}else t.style.transform=t.style.WebkitTransform="translateX("+self.options.animation.translateX+"px)";if(null!=self.options.animation.opacity&&(t.style.opacity=self.options.animation.opacity),self.options.shadows&&s(self.options.shadowsAnimation)){var n=t.querySelector(".segmenter__shadow");n.style.opacity=null!=self.options.shadowsAnimation.opacity?self.options.shadowsAnimation.opacity:0,n.style.transform=n.style.WebkitTransform="translateX("+(null!=self.options.shadowsAnimation.translateX?self.options.shadowsAnimation.translateX:0)+"px) translateY("+(null!=self.options.shadowsAnimation.translateY?self.options.shadowsAnimation.translateY:0)+"px)"}},i.prototype.animate=function(){if(this.active)return!1;this.active=!0;var e=this,t={targets:this.pieces,duration:this.options.animation.duration,delay:function(t,i){return(e.options.pieces-i-1)*e.options.animation.delay},easing:this.options.animation.easing,begin:this.options.onAnimationStart,complete:this.options.onAnimationComplete};if(null!=this.options.animation.translateZ){var n=r(this.options.animation.translateZ.min,this.options.animation.translateZ.max,this.options.pieces);t.translateZ="object"==typeof this.options.animation.translateZ?function(t,i){return n[i]}:this.options.animation.translateZ}null!=this.options.animation.translateX&&(t.translateX="object"==typeof this.options.animation.translateX?function(t,i){return anime.random(e.options.animation.translateX.min,e.options.animation.translateX.max)}:this.options.animation.translateX),null!=this.options.animation.translateY&&(t.translateY="object"==typeof this.options.animation.translateY?function(t,i){return anime.random(e.options.animation.translateY.min,e.options.animation.translateY.max)}:this.options.animation.translateY),null!=this.options.animation.opacity&&(t.opacity=this.options.animation.opacity),anime(t),this.options.shadows&&s(this.options.shadowsAnimation)&&anime(function(){for(var t={},i=arguments.length,e=0;e<i;e++)for(var n in arguments[e])arguments[e].hasOwnProperty(n)&&(t[n]=arguments[e][n]);return t}({targets:this.el.querySelectorAll(".segmenter__shadow"),duration:this.options.animation.duration,delay:function(t,i){return(e.options.pieces-i-1)*e.options.animation.delay},easing:this.options.animation.easing},this.options.shadowsAnimation))},i.prototype._initEvents=function(){var n,s,o,a,d=this;if(this.debounceResize=(n=function(t){var h=d.options.positions.length;d.dimensions={width:d.el.offsetWidth,height:d.el.offsetHeight},d.pieces.forEach(function(t,i){var e,n,s,o,a=t.querySelector(".segmenter__piece");if("random"===d.options.positions){var r=anime.random(0,100),p=anime.random(0,100),l=anime.random(0,100),m=anime.random(0,100);e=r/100*d.dimensions.height,n=p/100*d.dimensions.width,s=l/100*d.dimensions.width+n,o=m/100*d.dimensions.height+e}else{var f=i<=h-1?i:0;e=d.options.positions[f].top/100*d.dimensions.height,n=d.options.positions[f].left/100*d.dimensions.width,s=d.options.positions[f].width/100*d.dimensions.width+n,o=d.options.positions[f].height/100*d.dimensions.height+e}a.style.clip="rect("+e+"px,"+s+"px,"+o+"px,"+n+"px)"})},s=10,function(){var t=this,i=arguments,e=o&&!a;clearTimeout(a),a=setTimeout(function(){a=null,o||n.apply(t,i)},s),e&&n.apply(t,i)}),t.addEventListener("resize",this.debounceResize),this.options.parallax){var e=r(this.options.parallaxMovement.min,this.options.parallaxMovement.max,this.options.pieces);this.pieces.forEach(function(t,i){t.setAttribute("data-parallax-translation","object"==typeof d.options.parallaxMovement?e[i]:d.options.parallaxMovement)}),this.mousemove=function(s){if(!d.active)return!1;requestAnimationFrame(function(){d.pieces.forEach(function(t){var i=t.getAttribute("data-parallax-translation"),e=i/d.dimensions.width*s.clientX-i/2,n=i/d.dimensions.height*s.clientY-i/2;t.parentNode.style.transform=t.parentNode.style.WebkitTransform="translate3d("+e+"px,"+n+"px,0)"})})},t.addEventListener("mousemove",this.mousemove),this.handleOrientation=function(){if(!d.active)return!1;var s=event.gamma;s+=90,requestAnimationFrame(function(){d.pieces.forEach(function(t){var i=t.getAttribute("data-parallax-translation"),e=i/d.dimensions.width*s-i/2,n=i/d.dimensions.height*s-i/2;t.parentNode.style.transform=t.parentNode.style.WebkitTransform="translate3d("+e+"px,"+n+"px,0)"})})},t.addEventListener("deviceorientation",this.handleOrientation)}},t.Segmenter=i}(window);