From ace8cf56856ef5a769b0c5f47676bf1a9c3aa5d2 Mon Sep 17 00:00:00 2001 From: Nikos M Date: Tue, 31 Mar 2020 21:21:54 +0300 Subject: [PATCH] v.1.1.1 contd * remove pixelate transition awful implementation * pan-diagonal transition * pan-left-right,pan-up-down,pan-diagonal with better easing * rhomboidal/diagonal tiles almost complete support, fade-diagonal demo transition in progress --- src/Imagik.js | 136 +++++++++++++++++++++++++++++++++++----------- src/Imagik.min.js | 2 +- src/imagik.css | 43 ++++----------- 3 files changed, 114 insertions(+), 67 deletions(-) diff --git a/src/Imagik.js b/src/Imagik.js index 31124db..443fa1d 100644 --- a/src/Imagik.js +++ b/src/Imagik.js @@ -12,8 +12,8 @@ else root.Imagik = factory(); }('undefined' !== typeof self ? self : this, function Imagik__Factory( ){ "use strict"; -var stdMath = Math, toRad = stdMath.PI/180, - prop_re = /(?:X\()(\w+)(?:\))/g, expr_re = /(?:\$\()([^\(\)]+)(?:\))/g, +var stdMath = Math, toRad = stdMath.PI/180, sqrt2 = stdMath.sqrt(2), + prop_re = /(?:X\()(\w+)(?:\))/g, toString = Object.prototype.toString, HAS = Object.prototype.hasOwnProperty, slice = Array.prototype.slice; @@ -483,9 +483,9 @@ function checkerBoard( pieces, rows, columns ) } return {pieces:pieces, delays:delays, groups:2}; } -function tiles( img, rows, columns, W, H, angle, asImg ) +function tiles( img, rows, columns, W, H, angle, diagonal, asImg ) { - var i, j, x, y, bx, by, w, h, pieces, tile, ww, s, m1, m2, imax, clipPath; + var i, j, x, y, bx, by, w, h, pieces, tile, ww, s, m1, m2, imax, clipPath, side, margin, margin2, offset; if ( null != angle ) { angle = angle || 0; @@ -548,6 +548,26 @@ function tiles( img, rows, columns, W, H, angle, asImg ) } } } + else if ( diagonal ) + { + side = stdMath.min(W, H)/stdMath.max(rows, columns); w = stdMath.round(side*sqrt2); + columns = 2*stdMath.ceil(W/w)+2; rows = 2*stdMath.ceil(H/w)+2; + margin = w/2; margin2 = margin/2; offset = 0; + pieces = new Array(rows*columns); + for(i=0;i
'), r:rows, c:columns, i:i, j:j, x:x, y:y, bx:bx, by:by, w:side, h:side, u:'px', W:W, H:H, img:img}; + tile.firstChild.style.backgroundImage = 'url("'+String(img)+'")'; + tile.firstChild.style.backgroundPosition = String(bx)+'px '+String(by)+'px'; + tile.firstChild.style.backgroundSize = String(W)+'px auto'; + } + offset = 0===offset ? -margin : 0; + } + } else { w = 1===columns ? 100 : (W/columns*101/W); @@ -596,21 +616,49 @@ function destroy( pieces ) } function translate( where, what ) { + var i, j, k, p, c, e, evaluator, r, done; if ( is_string(where) ) { where = where.replace(prop_re, function(m0, m1){ return HAS.call(what, m1) ? String(what[m1]) : m0; }); - where = where.replace(expr_re, function(m0, m1){ - var evaluator; - try { - evaluator = new Function('', 'return String('+m1+');'); - } catch(err) { - console.warn('Imagik: Error in expression "'+m0+'", '+err.toString()); - evaluator = function(){return '0';}; + j = 0; + while( -1!==(i=where.indexOf('$(', j)) ) + { + p = 1; k = 2; e = ''; done = false; + while( i+k "+r.replace(/,/g,",#"+o+" > "),t),a||t.removeAttribute("id"),e):n.call(t.children)}function u(r,t,e){return 2'),r:t,c:e,i:i,j:l,x:d,y:m,bx:u,by:c,w:x,h:f,u:"px",W:a,H:o,slope:w,angle:n,img:r},v.firstChild.src=String(r),v.firstChild.style.width="100%",v.firstChild.style.height="auto"):(g[i*t+l]={piece:v=D('
'),r:t,c:e,i:i,j:l,x:d,y:m,bx:u,by:c,w:x,h:f,u:"px",W:a,H:o,slope:w,angle:n,img:r},v.firstChild.style.backgroundImage='url("'+String(r)+'")',v.firstChild.style.backgroundPosition=String(u)+"px "+String(c)+"px",v.firstChild.style.backgroundSize=String(a)+"px auto")}else for(p=1===e?100:a/e*101/a,f=1===t?100:o/t*101/o,g=new Array(t*e),i=0;i'),r:t,c:e,i:i,j:l,x:d,y:m,bx:u,by:c,w:x,h:f,u:"%",W:a,H:o,img:r},v.firstChild.src=String(r),v.firstChild.style.width="100%",v.firstChild.style.height="auto"):(g[i*t+l]={piece:v=D('
'),r:t,c:e,i:i,j:l,x:d,y:m,bx:u,by:c,w:p,h:f,u:"%",W:a,H:o,img:r},v.firstChild.style.backgroundImage='url("'+String(r)+'")',v.firstChild.style.backgroundPosition=String(u)+"px "+String(c)+"px",v.firstChild.style.backgroundSize=String(a)+"px auto");return g}function w(r){if(!r)return r;for(var t=0;t'),K(b.style,document.createTextNode("")),K(document.head,b.style);var $,Y,W,k,y,z,S,H,a,A,j,e,T=[],i=[],C=[],l=[],I=[],N=-1,P=-1,o=!0,n=!1,q=null,R=null,F=0,O="",E=null,L=null,s=v(nr.Static.randomTransitions.slice()),d=0;b.autoResize=function(){return b.el&&$&&(z=M.round(b.el.clientWidth),S=M.round(z/b.options.aspectRatio),$.style.width=String(z)+"px",$.style.height=String(S)+"px",W.style.backgroundSize=String(z)+"px auto"),b},b.init=function(){return!b.el||J(".imagik-holder",b.el).length||(z=M.round(b.el.clientWidth),S=M.round(z/b.options.aspectRatio),$=D('
'),"webkitRequestAnimationFrame"in window&&Q($,"imagik-webkit"),$.style.width=String(z)+"px",$.style.height=String(S)+"px",h(b.id,function(r){b.autoResize()}),m("div",b.el).forEach(function(r){var t,e,a,o,n,s={};if(s.transition=b.options.transition,s.delay=b.options.delay,s.ease=b.options.ease,s.order=b.options.order,s.rows=b.options.rows,s.columns=b.options.columns,s.overlap=b.options.overlap,s.duration=b.options.duration,""!=(t=u(r,"class"))&&null!=t){for(o=t.split(" "),e=0;e')).style.zIndex=2,W.style.backgroundSize=String(z)+"px auto",(k=D('
')).style.zIndex=1,K($,W),K($,k),b.options.caption&&(Y=D('
'),K($,Y)),b.options.controls&&(r=D(''),t=D(''),e=D(''),K($,r),K($,t),K($,e),G(r,"click",function(r){r.stopPropagation(),n||b.prevTransition()}),G(t,"click",function(r){r.stopPropagation(),n||b.nextTransition()}),G($,"click",function(r){(n=!n)?(b.stopPlay(),Q($,"paused")):(b.resumePlay(),rr($,"paused"))})),I=g(T.length),b.options.randomOrder&&v(I),N=P=0,W.style.backgroundImage='url("'+(T[I[N]].currentSrc||T[I[N]].src)+'")',W.href=i[I[N]],Q($,"imagik-show-image"),b.options.caption&&null!=l[I[N]]&&""!=l[I[N]]&&(c(Y,l[I[N]]),Q(Y,"show")),a()),b;var r,t,e},H=function(){return d>=s.length&&(s=v(nr.Static.randomTransitions.slice()),d=0),d'),q[t].piece.id=b.el.id+"-next-"+q[t].i+"-"+q[t].j,R[t].piece.id=b.el.id+"-current-"+R[t].i+"-"+R[t].j,K(e,Q(Q(R[t].piece,"imagik-tile-current"),"imagik-tile-"+R[t].i+"-"+R[t].j)),K(e,Q(Q(q[t].piece,"imagik-tile-next"),"imagik-tile-"+q[t].i+"-"+q[t].j)),Z(o.current)&&(v=er(or(B({},o.current,["animation","selector","reverse"]),R[t]))).length&&(O+="\n#"+R[t].piece.id+"{"+v+"}"),Z(o.next)&&(v=er(or(B({},o.next,["animation","selector","reverse"]),q[t]))).length&&(O+="\n#"+q[t].piece.id+"{"+v+"}"),R[t].piece=e,q[t].piece=e;for(d=nr.Static.order[n](q,i,l),q=d.pieces,W.style.zIndex=0,m=d.groups,c=(u=a.duration/(m-(m-1)*a.overlap))*(1-a.overlap),f=0,g=!1,(V(o.animation)&&2<=o.animation.length||V(o.animation1)&&2<=o.animation1.length&&V(o.animation2)&&2<=o.animation2.length)&&(o.animation1&&o.animation2?(X["animation-"+b.el.id+"-even"]="@keyframes imagik-animation-"+b.el.id+"-even{"+o.animation2.map(function(r,t){return String(100*t/(o.animation2.length-1))+"%{"+er(or(r,q[0]))+"}"}).join("\n")+"}",1.imagik-tile-inside"},"iris-reverse":{reverse:!0,rows:1,columns:1,animation:"iris",selector:">.imagik-tile-inside"},tv:{rows:1,columns:1,current:{animation:"tv"},next:{animation:"tv",reverse:!0}},pixelate:{rows:1,columns:1,img:!0,current:{animation:"pixelate"},next:{animation:"pixelate",reverse:!0}},brightness:{rows:1,columns:1,current:{animation:"brightness"},next:{animation:"brightness",reverse:!0}},darkness:{rows:1,columns:1,current:{animation:"darkness"},next:{animation:"darkness",reverse:!0}},fade:{animation:"fade"},"fade-zoom":{rows:1,columns:1,current:{animation:"fade-zoom"},next:{animation:"fade-zoom",reverse:!0}},"move-diagonal":{rows:1,angle:30,animation1:[{transform:"translate3d($(0===X(angle)?'100%':'X(slope)px'),$(0===X(angle)?0:'100%'),0)"},{transform:"translate3d(0,0,0)"}],animation2:[{transform:"translate3d($(0===X(angle)?'-100%':'-X(slope)px'),$(0===X(angle)?0:'-100%'),0)"},{transform:"translate3d(0,0,0)"}]},"move-diagonal-reverse":{rows:1,angle:30,reverse:!0,animation1:[{transform:"translate3d($(0===X(angle)?'100%':'X(slope)px'),$(0===X(angle)?0:'100%'),0)"},{transform:"translate3d(0,0,0)"}],animation2:[{transform:"translate3d($(0===X(angle)?'-100%':'-X(slope)px'),$(0===X(angle)?0:'-100%'),0)"},{transform:"translate3d(0,0,0)"}]},"move-down":{animation:"move-down"},"move-down-reverse":{reverse:!0,animation:"move-down"},"move-up":{animation:"move-up"},"move-up-reverse":{reverse:!0,animation:"move-up"},"move-right":{animation:"move-right"},"move-right-reverse":{reverse:!0,animation:"move-right"},"move-left":{animation:"move-left"},"move-left-reverse":{reverse:!0,animation:"move-left"},"move-up-down":{animation1:"move-down",animation2:"move-up"},"move-up-down-reverse":{reverse:!0,animation1:"move-down",animation2:"move-up"},"move-left-right":{animation1:"move-right",animation2:"move-left"},"move-left-right-reverse":{reverse:!0,animation1:"move-right",animation2:"move-left"},"move-fade-down":{animation:"move-fade-down"},"move-fade-up":{animation:"move-fade-up"},"move-fade-up-down":{animation1:"move-fade-down",animation2:"move-fade-up"},"move-fade-right":{animation:"move-fade-right"},"move-fade-left":{animation:"move-fade-left"},"move-fade-left-right":{animation1:"move-fade-right",animation2:"move-fade-left"},"fade-grow":{animation:"fade-grow",selector:">.imagik-tile-inside"},"fade-shrink":{reverse:!0,animation:"fade-grow",selector:">.imagik-tile-inside"},grow:{animation:"grow",selector:">.imagik-tile-inside"},shrink:{reverse:!0,animation:"grow",selector:">.imagik-tile-inside"},"grow-horizontal":{rows:1,animation:"grow-horizontal",selector:">.imagik-tile-inside"},"shrink-horizontal":{reverse:!0,rows:1,animation:"grow-horizontal",selector:">.imagik-tile-inside"},"grow-vertical":{columns:1,animation:"grow-vertical",selector:">.imagik-tile-inside"},"shrink-vertical":{reverse:!0,columns:1,animation:"grow-vertical",selector:">.imagik-tile-inside"},"fade-grow-horizontal":{rows:1,animation:"fade-grow-horizontal",selector:">.imagik-tile-inside"},"fade-grow-vertical":{columns:1,animation:"fade-grow-vertical",selector:">.imagik-tile-inside"},"blinds-horizontal":{current:{animation:"blinds-horizontal-current"},next:{animation:"blinds-horizontal-next"}},"blinds-vertical":{current:{animation:"blinds-vertical-current"},next:{animation:"blinds-vertical-next"}},"fly-top-left":{rows:1,columns:1,animation:"fly-top-left"},"fly-bottom-left":{rows:1,columns:1,animation:"fly-bottom-left"},"fly-top-right":{rows:1,columns:1,animation:"fly-top-right"},"fly-bottom-right":{rows:1,columns:1,animation:"fly-bottom-right"},"fly-left":{rows:1,columns:1,animation:"fly-left"},"fly-right":{rows:1,columns:1,animation:"fly-right"},"fly-top":{rows:1,columns:1,animation:"fly-top"},"fly-bottom":{rows:1,columns:1,animation:"fly-bottom"},"pan-top-left":{current:!0,next:!0,rows:1,columns:1,animation:"pan-top-left"},"pan-top-right":{current:!0,next:!0,rows:1,columns:1,animation:"pan-top-right"},"pan-bottom-right":{current:!0,next:!0,rows:1,columns:1,animation:"pan-bottom-right"},"pan-bottom-left":{current:!0,next:!0,rows:1,columns:1,animation:"pan-bottom-left"},"pan-left":{current:!0,next:!0,rows:1,columns:1,animation:"pan-left"},"pan-right":{current:!0,next:!0,rows:1,columns:1,animation:"pan-right"},"pan-top":{current:!0,next:!0,rows:1,columns:1,animation:"pan-top"},"pan-bottom":{current:!0,next:!0,rows:1,columns:1,animation:"pan-bottom"},"pan-left-right":{current:!0,next:!0,columns:1,animation1:"pan-right",animation2:"pan-left"},"pan-up-down":{current:!0,next:!0,rows:1,animation1:"pan-top",animation2:"pan-bottom"}},order:{checkerboard:function(r,t,e){var a,o,n,s=new Array(t*e),i=!1;for(a=0;a "+t.replace(/,/g,",#"+n+" > "),r),a||r.removeAttribute("id"),e):o.call(r.children)}function m(t,r,e){return 2'),r:r,c:e,i:l,j:d,x:u,y:m,bx:c,by:p,w:h,h:g,u:"px",W:a,H:n,slope:w,angle:o,img:t},x.firstChild.src=String(t),x.firstChild.style.width="100%",x.firstChild.style.height="auto"):(v[l*r+d]={piece:x=G('
'),r:r,c:e,i:l,j:d,x:u,y:m,bx:c,by:p,w:h,h:g,u:"px",W:a,H:n,slope:w,angle:o,img:t},x.firstChild.style.backgroundImage='url("'+String(t)+'")',x.firstChild.style.backgroundPosition=String(c)+"px "+String(p)+"px",x.firstChild.style.backgroundSize=String(a)+"px auto")}else if(i)for(Y=_.min(a,n)/_.max(r,e),f=_.round(Y*H),e=2*_.ceil(a/f)+2,r=2*_.ceil(n/f)+2,y=(W=f/2)/2,z=0,v=new Array(r*e),l=0;l
'),r:r,c:e,i:l,j:d,x:u,y:m,bx:c,by:p,w:Y,h:Y,u:"px",W:a,H:n,img:t},x.firstChild.style.backgroundImage='url("'+String(t)+'")',x.firstChild.style.backgroundPosition=String(c)+"px "+String(p)+"px",x.firstChild.style.backgroundSize=String(a)+"px auto";z=0===z?-W:0}else for(f=1===e?100:a/e*101/a,g=1===r?100:n/r*101/n,v=new Array(r*e),l=0;l'),r:r,c:e,i:l,j:d,x:u,y:m,bx:c,by:p,w:h,h:g,u:"%",W:a,H:n,img:t},x.firstChild.src=String(t),x.firstChild.style.width="100%",x.firstChild.style.height="auto"):(v[l*r+d]={piece:x=G('
'),r:r,c:e,i:l,j:d,x:u,y:m,bx:c,by:p,w:f,h:g,u:"%",W:a,H:n,img:t},x.firstChild.style.backgroundImage='url("'+String(t)+'")',x.firstChild.style.backgroundPosition=String(c)+"px "+String(p)+"px",x.firstChild.style.backgroundSize=String(a)+"px auto");return v}function h(t){if(!t)return t;for(var r=0;r'),Q($.style,document.createTextNode("")),Q(document.head,$.style);var k,Y,W,y,z,S,H,A,a,j,q,e,T=[],s=[],C=[],l=[],I=[],N=-1,P=-1,n=!0,o=!1,O=null,R=null,F=0,E="",L=null,M=null,i=x(it.Static.randomTransitions.slice()),d=0;$.autoResize=function(){return $.el&&k&&(S=_.round($.el.clientWidth),H=_.round(S/$.options.aspectRatio),k.style.width=String(S)+"px",k.style.height=String(H)+"px",W.style.backgroundSize=String(S)+"px auto"),$},$.init=function(){return!$.el||K(".imagik-holder",$.el).length||(S=_.round($.el.clientWidth),H=_.round(S/$.options.aspectRatio),k=G('
'),"webkitRequestAnimationFrame"in window&&tt(k,"imagik-webkit"),k.style.width=String(S)+"px",k.style.height=String(H)+"px",w($.id,function(t){$.autoResize()}),u("div",$.el).forEach(function(t){var r,e,a,n,o,i={};if(i.transition=$.options.transition,i.delay=$.options.delay,i.ease=$.options.ease,i.order=$.options.order,i.rows=$.options.rows,i.columns=$.options.columns,i.overlap=$.options.overlap,i.duration=$.options.duration,""!=(r=m(t,"class"))&&null!=r){for(n=r.split(" "),e=0;e')).style.zIndex=2,W.style.backgroundSize=String(S)+"px auto",(y=G('
')).style.zIndex=1,Q(k,W),Q(k,y),$.options.caption&&(Y=G('
'),Q(k,Y)),$.options.controls&&(t=G(''),r=G(''),e=G(''),Q(k,t),Q(k,r),Q(k,e),J(t,"click",function(t){t.stopPropagation(),o||$.prevTransition()}),J(r,"click",function(t){t.stopPropagation(),o||$.nextTransition()}),J(k,"click",function(t){(o=!o)?($.stopPlay(),tt(k,"paused")):($.resumePlay(),rt(k,"paused"))})),I=v(T.length),$.options.randomOrder&&x(I),N=P=0,W.style.backgroundImage='url("'+(T[I[N]].currentSrc||T[I[N]].src)+'")',W.href=s[I[N]],tt(k,"imagik-show-image"),$.options.caption&&null!=l[I[N]]&&""!=l[I[N]]&&(p(Y,l[I[N]]),tt(Y,"show")),a()),$;var t,r,e},A=function(){return d>=i.length&&(i=x(it.Static.randomTransitions.slice()),d=0),d'),O[r].piece.id=$.el.id+"-next-"+O[r].i+"-"+O[r].j,R[r].piece.id=$.el.id+"-current-"+R[r].i+"-"+R[r].j,Q(e,tt(tt(R[r].piece,"imagik-tile-current"),"imagik-tile-"+R[r].i+"-"+R[r].j)),Q(e,tt(tt(O[r].piece,"imagik-tile-next"),"imagik-tile-"+O[r].i+"-"+O[r].j)),B(n.current)&&(v=at(ot(D({},n.current,["animation","selector","reverse"]),R[r]))).length&&(E+="\n#"+R[r].piece.id+"{"+v+"}"),B(n.next)&&(v=at(ot(D({},n.next,["animation","selector","reverse"]),O[r]))).length&&(E+="\n#"+O[r].piece.id+"{"+v+"}"),R[r].piece=e,O[r].piece=e;for(d=it.Static.order[o](O,s,l),O=d.pieces,W.style.zIndex=0,u=d.groups,c=(m=a.duration/(u-(u-1)*a.overlap))*(1-a.overlap),f=0,g=!1,(Z(n.animation)&&2<=n.animation.length||Z(n.animation1)&&2<=n.animation1.length&&Z(n.animation2)&&2<=n.animation2.length)&&(n.animation1&&n.animation2?(b["animation-"+$.el.id+"-even"]="@keyframes imagik-animation-"+$.el.id+"-even{"+n.animation2.map(function(t,r){return String(100*r/(n.animation2.length-1))+"%{"+at(ot(t,O[0]))+"}"}).join("\n")+"}",1.imagik-tile-inside"},"iris-reverse":{reverse:!0,rows:1,columns:1,animation:"iris",selector:">.imagik-tile-inside"},tv:{rows:1,columns:1,current:{animation:"tv"},next:{animation:"tv",reverse:!0}},brightness:{rows:1,columns:1,current:{animation:"brightness"},next:{animation:"brightness",reverse:!0}},darkness:{rows:1,columns:1,current:{animation:"darkness"},next:{animation:"darkness",reverse:!0}},fade:{animation:"fade"},"fade-diagonal":{diagonal:!0,animation:"fade"},"fade-zoom":{rows:1,columns:1,current:{animation:"fade-zoom"},next:{animation:"fade-zoom",reverse:!0}},"move-diagonal":{rows:1,angle:30,animation1:[{transform:"translate3d($(0===X(angle)?'100%':'X(slope)px'),$(0===X(angle)?0:'100%'),0)"},{transform:"translate3d(0,0,0)"}],animation2:[{transform:"translate3d($(0===X(angle)?'-100%':'-X(slope)px'),$(0===X(angle)?0:'-100%'),0)"},{transform:"translate3d(0,0,0)"}]},"move-diagonal-reverse":{rows:1,angle:30,reverse:!0,animation1:[{transform:"translate3d($(0===X(angle)?'100%':'X(slope)px'),$(0===X(angle)?0:'100%'),0)"},{transform:"translate3d(0,0,0)"}],animation2:[{transform:"translate3d($(0===X(angle)?'-100%':'-X(slope)px'),$(0===X(angle)?0:'-100%'),0)"},{transform:"translate3d(0,0,0)"}]},"move-down":{animation:"move-down"},"move-down-reverse":{reverse:!0,animation:"move-down"},"move-up":{animation:"move-up"},"move-up-reverse":{reverse:!0,animation:"move-up"},"move-right":{animation:"move-right"},"move-right-reverse":{reverse:!0,animation:"move-right"},"move-left":{animation:"move-left"},"move-left-reverse":{reverse:!0,animation:"move-left"},"move-up-down":{animation1:"move-down",animation2:"move-up"},"move-up-down-reverse":{reverse:!0,animation1:"move-down",animation2:"move-up"},"move-left-right":{animation1:"move-right",animation2:"move-left"},"move-left-right-reverse":{reverse:!0,animation1:"move-right",animation2:"move-left"},"move-fade-down":{animation:"move-fade-down"},"move-fade-up":{animation:"move-fade-up"},"move-fade-up-down":{animation1:"move-fade-down",animation2:"move-fade-up"},"move-fade-right":{animation:"move-fade-right"},"move-fade-left":{animation:"move-fade-left"},"move-fade-left-right":{animation1:"move-fade-right",animation2:"move-fade-left"},"fade-grow":{animation:"fade-grow",selector:">.imagik-tile-inside"},"fade-shrink":{reverse:!0,animation:"fade-grow",selector:">.imagik-tile-inside"},grow:{animation:"grow",selector:">.imagik-tile-inside"},shrink:{reverse:!0,animation:"grow",selector:">.imagik-tile-inside"},"grow-horizontal":{rows:1,animation:"grow-horizontal",selector:">.imagik-tile-inside"},"shrink-horizontal":{reverse:!0,rows:1,animation:"grow-horizontal",selector:">.imagik-tile-inside"},"grow-vertical":{columns:1,animation:"grow-vertical",selector:">.imagik-tile-inside"},"shrink-vertical":{reverse:!0,columns:1,animation:"grow-vertical",selector:">.imagik-tile-inside"},"fade-grow-horizontal":{rows:1,animation:"fade-grow-horizontal",selector:">.imagik-tile-inside"},"fade-grow-vertical":{columns:1,animation:"fade-grow-vertical",selector:">.imagik-tile-inside"},"blinds-horizontal":{current:{animation:"blinds-horizontal-current"},next:{animation:"blinds-horizontal-next"}},"blinds-vertical":{current:{animation:"blinds-vertical-current"},next:{animation:"blinds-vertical-next"}},"fly-top-left":{rows:1,columns:1,animation:"fly-top-left"},"fly-bottom-left":{rows:1,columns:1,animation:"fly-bottom-left"},"fly-top-right":{rows:1,columns:1,animation:"fly-top-right"},"fly-bottom-right":{rows:1,columns:1,animation:"fly-bottom-right"},"fly-left":{rows:1,columns:1,animation:"fly-left"},"fly-right":{rows:1,columns:1,animation:"fly-right"},"fly-top":{rows:1,columns:1,animation:"fly-top"},"fly-bottom":{rows:1,columns:1,animation:"fly-bottom"},"pan-top-left":{current:!0,next:!0,rows:1,columns:1,animation:"pan-top-left"},"pan-top-right":{current:!0,next:!0,rows:1,columns:1,animation:"pan-top-right"},"pan-bottom-right":{current:!0,next:!0,rows:1,columns:1,animation:"pan-bottom-right"},"pan-bottom-left":{current:!0,next:!0,rows:1,columns:1,animation:"pan-bottom-left"},"pan-left":{current:!0,next:!0,rows:1,columns:1,animation:"pan-left"},"pan-right":{current:!0,next:!0,rows:1,columns:1,animation:"pan-right"},"pan-top":{current:!0,next:!0,rows:1,columns:1,animation:"pan-top"},"pan-bottom":{current:!0,next:!0,rows:1,columns:1,animation:"pan-bottom"},"pan-left-right":{current:!0,next:!0,columns:1,animation1:"pan-right",animation2:"pan-left"},"pan-up-down":{current:!0,next:!0,rows:1,animation1:"pan-top",animation2:"pan-bottom"},"pan-diagonal":{rows:1,angle:30,current:{transform:"translate3d(0,0,0)"},next:{transform:"translate3d($(0===X(angle)?(X(i)%2?'-100%':'100%'):(X(i)%2?'-X(slope)px':'X(slope)px')),$(0===X(angle)?0:(X(i)%2?'-100%':'100%')),0)"},animation1:[{transform:"translate3d(0,0,0)"},{transform:"translate3d($(0===X(angle)?'100%':'X(slope)px'),$(0===X(angle)?0:'100%'),0)"}],animation2:[{transform:"translate3d(0,0,0)"},{transform:"translate3d($(0===X(angle)?'-100%':'-X(slope)px'),$(0===X(angle)?0:'-100%'),0)"}]}},order:{checkerboard:function(t,r,e){var a,n,o,i=new Array(r*e),s=!1;for(a=0;a - - - - - - - - -*/ - image-rendering:pixelated; - image-rendering:-moz-crisp-edges; - image-rendering:crisp-edges; -} .imagik-animation-layer.imagik-fx-iris .imagik-tile-inside, .imagik-animation-layer.imagik-fx-iris-reverse .imagik-tile-inside { @@ -552,20 +543,6 @@ transform:translate(-100%, 0) scale(1, 1); } }*/ -@keyframes imagik-animation-pixelate { - 0%{ - transform:scale(1); - opacity:1; - } - 50%{ - transform:scale(10); - opacity:1; - } - 100%{ - transform:scale(10); - opacity:0; - } -} @keyframes imagik-animation-fade { from{ opacity: 0;