forked from gopatrik/space.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
space.min.js
8 lines (8 loc) · 3.97 KB
/
space.min.js
1
2
3
4
5
6
7
8
(function(){var u=function(){var d,p,f,g=$(window),b=0,l=0,m=function(){if(f){var k=g.scrollTop();k==b&&30<=++l&&(l=0,window.clearInterval(f),f=void 0);b=k;d()}};return Object.freeze({repeatOnScroll:function(b,g){d=b;p=g;window.onscroll=function(){f||(f=window.setInterval(m,p))}},getScrollTop:function(){return b}})};(function(){var d=document.createElement("style");d.type="text/css";d.innerHTML=".space-frame {display: none;position: fixed;width: 100vw;height: 100vh;} .space-frame .space-inner-frame {position: absolute;transform-style: preserve-3d;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}";
document.getElementsByTagName("head")[0].appendChild(d)})();Space=function(){function d(e,a){switch(e){case "scale":return"scale("+a+")";case "rotate":return"rotate("+a+"deg)";case "translate3d":return"translate3d("+(a.x?a.x+"px":0)+","+(a.y?a.y+"px":0)+","+(a.z?a.z+"px":0)+")";case "rotate3d":return"rotate3d("+(a.x?a.x:0)+","+(a.y?a.y:0)+","+(a.z?a.z:0)+","+(a.angle?a.angle+"deg":0)+")";default:return a}}var p=$(window).height(),f=u(),g,b=0,l={scaleIn:{scale:{from:0,to:1}},fadeIn:{opacity:{from:0,
to:1}},scaleOut:{scale:{from:1,to:1.5}},fadeOut:{opacity:{from:1,to:0}},rotateQuarterRight:{rotate:{from:0,to:90}},rotateInQuarterClockwise:{rotate:{from:-90,to:0}},zoomOut:{scale:{from:1,to:0}},slideInBottom:{translate3d:{from:{y:700},to:{y:0}}},slideOutDown:{translate3d:{from:{y:0},to:{y:700}}},slideOutLeft:{translate3d:{from:{x:0},to:{x:-700}}},slideOutRight:{translate3d:{from:{x:0},to:{x:700}}},slideInRight:{translate3d:{from:{x:700},to:{x:0}}},slideOutUp:{translate3d:{from:{y:0},to:{y:-700}}},
slideInTop:{translate3d:{from:{y:-700},to:{y:0}}},slideInLeft:{translate3d:{from:{x:-700},to:{x:0}}},slideBottomRight:{translate3d:{from:{x:0,y:0},to:{x:500,y:500}}},rotate360:{rotate:{from:0,to:360}},rotate3dOut:{rotate3d:{from:{x:0,y:0,z:0,angle:0},to:{x:1,y:-1,z:0,angle:90}}}},m={all:[l.scaleOut,l.fadeOut],enter:[],exit:[]},k=function(){var e=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)?.3:1,a=0;g=$(".space-frame").map(function(b,n){var c=(n.dataset.duration||
1)*e*p,g=a;a+=c;var d="frame-"+b;n.id=d;var f=n.dataset.transition,h=n.dataset.enter,k=n.dataset.exit;if(f||h||k){var q={all:[],enter:[],exit:[]},m=function(a){return a.split(/\s+/).map(function(a){return l[a]})};q.all=f?m(f):[];q.enter=h?m(h):[];q.exit=k?m(k):[];return{selector:"#"+d,duration:c,distanceTo:g,transition:q}}return{selector:"#"+d,duration:c,distanceTo:g}});$("body").height(a);$(g[b].selector).show();f.repeatOnScroll(t,1E3/60)},t=function(){window.requestAnimationFrame(function(){var e=
f.getScrollTop(),a=g[b].distanceTo;e<a?($(".space-frame").hide(),b--,0>b&&(b=0),$(g[b].selector).show()):e>a+g[b].duration&&($(".space-frame").hide(),b++,$(g[b].selector).show());v()})},v=function(){var e=f.getScrollTop()-g[b].distanceTo,a={transform:""},r=g[b].transition||m;r.all.forEach(function(b){for(var c in b)"scale"==c||"translate3d"==c||"rotate"==c||"rotate3d"==c?a.transform+=d(c,h(b,e,c)):a[c]=d(c,h(b,e,c))});e<=g[b].duration/2?r.enter.forEach(function(b){for(var c in b)"scale"==c||"translate3d"==
c||"rotate"==c||"rotate3d"==c?a.transform+=d(c,h(b,2*e,c)):a[c]=d(c,h(b,2*e,c))}):r.exit.forEach(function(f){for(var c in f)"scale"==c||"translate3d"==c||"rotate"==c||"rotate3d"==c?a.transform+=d(c,h(f,2*(e-g[b].duration/2),c)):a[c]=d(c,h(f,2*(e-g[b].duration/2),c))});a["-webkit-transform"]=a.transform;a["-moz-transform"]=a.transform;$(g[b].selector).css(a)},h=function(e,a,d){e=e[d];var f=g[b].duration;if("translate3d"==d||"rotate3d"==d){d={};for(axis in e.from)d[axis]=+(e.from[axis]+a/f*(e.to[axis]-
e.from[axis])).toFixed(4);return d}return+(e.from+a/f*(e.to-e.from)).toFixed(4)};return Object.freeze({init:k,addTransitions:function(b){for(var a in b){if(l[a]){console.log("Transition name already exists!!!");return}l[a]=b[a]}k()}})}();Space.init()}).call(this);