Advertisement
agunq

Preloading

May 20th, 2015
4,614
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*!
  2.  * classie - class helper functions
  3.  * from bonzo https://github.com/ded/bonzo
  4.  *
  5.  * classie.has( elem, 'my-class' ) -> true/false
  6.  * classie.add( elem, 'my-new-class' )
  7.  * classie.remove( elem, 'my-unwanted-class' )
  8.  * classie.toggle( elem, 'my-class' )
  9.  */
  10.  
  11. /*jshint browser: true, strict: true, undef: true */
  12. /*global define: false */
  13.  
  14. ( function( window ) {
  15.  
  16. 'use strict';
  17.  
  18. // class helper functions from bonzo https://github.com/ded/bonzo
  19.  
  20. function classReg( className ) {
  21.   return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
  22. }
  23.  
  24. // classList support for class management
  25. // altho to be fair, the api sucks because it won't accept multiple classes at once
  26. var hasClass, addClass, removeClass;
  27.  
  28. if ( 'classList' in document.documentElement ) {
  29.   hasClass = function( elem, c ) {
  30.     return elem.classList.contains( c );
  31.   };
  32.   addClass = function( elem, c ) {
  33.     elem.classList.add( c );
  34.   };
  35.   removeClass = function( elem, c ) {
  36.     elem.classList.remove( c );
  37.   };
  38. }
  39. else {
  40.   hasClass = function( elem, c ) {
  41.     return classReg( c ).test( elem.className );
  42.   };
  43.   addClass = function( elem, c ) {
  44.     if ( !hasClass( elem, c ) ) {
  45.       elem.className = elem.className + ' ' + c;
  46.     }
  47.   };
  48.   removeClass = function( elem, c ) {
  49.     elem.className = elem.className.replace( classReg( c ), ' ' );
  50.   };
  51. }
  52.  
  53. function toggleClass( elem, c ) {
  54.   var fn = hasClass( elem, c ) ? removeClass : addClass;
  55.   fn( elem, c );
  56. }
  57.  
  58. var classie = {
  59.   // full names
  60.   hasClass: hasClass,
  61.   addClass: addClass,
  62.   removeClass: removeClass,
  63.   toggleClass: toggleClass,
  64.   // short names
  65.   has: hasClass,
  66.   add: addClass,
  67.   remove: removeClass,
  68.   toggle: toggleClass
  69. };
  70.  
  71. // transport
  72. if ( typeof define === 'function' && define.amd ) {
  73.   // AMD
  74.   define( classie );
  75. } else {
  76.   // browser global
  77.   window.classie = classie;
  78. }
  79.  
  80. })( window );
  81.  
  82. /**
  83.  * pathLoader.js v1.0.0
  84.  * http://www.codrops.com
  85.  *
  86.  * Licensed under the MIT license.
  87.  * http://www.opensource.org/licenses/mit-license.php
  88.  *
  89.  * Copyright 2014, Codrops
  90.  * http://www.codrops.com
  91.  */
  92. ;( function( window ) {
  93.    
  94.     'use strict';
  95.  
  96.     function PathLoader( el ) {
  97.         this.el = el;
  98.         // clear stroke
  99.         this.el.style.strokeDasharray = this.el.style.strokeDashoffset = this.el.getTotalLength();
  100.     }
  101.  
  102.     PathLoader.prototype._draw = function( val ) {
  103.         this.el.style.strokeDashoffset = this.el.getTotalLength() * ( 1 - val );
  104.     }
  105.  
  106.     PathLoader.prototype.setProgress = function( val, callback ) {
  107.         this._draw(val);
  108.         if( callback && typeof callback === 'function' ) {
  109.             // give it a time (ideally the same like the transition time) so that the last progress increment animation is still visible.
  110.             setTimeout( callback, 200 );
  111.         }
  112.     }
  113.  
  114.     PathLoader.prototype.setProgressFn = function( fn ) {
  115.         if( typeof fn === 'function' ) { fn( this ); }
  116.     }
  117.  
  118.     // add to global namespace
  119.     window.PathLoader = PathLoader;
  120.  
  121. })( window );
  122. /**
  123.  * main.js
  124.  * http://www.codrops.com
  125.  *
  126.  * Licensed under the MIT license.
  127.  * http://www.opensource.org/licenses/mit-license.php
  128.  *
  129.  * Copyright 2014, Codrops
  130.  * http://www.codrops.com
  131.  */
  132. (function() {
  133.  
  134.     var support = { animations : Modernizr.cssanimations },
  135.         container = document.getElementById( 'ip-container' ),
  136.         header = container.querySelector( 'header.ip-header' ),
  137.         loader = new PathLoader( document.getElementById( 'ip-loader-circle' ) ),
  138.         animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
  139.         // animation end event name
  140.         animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
  141.  
  142.     function init() {
  143.         var onEndInitialAnimation = function() {
  144.             if( support.animations ) {
  145.                 this.removeEventListener( animEndEventName, onEndInitialAnimation );
  146.             }
  147.  
  148.             startLoading();
  149.         };
  150.  
  151.         // disable scrolling
  152.         window.addEventListener( 'scroll', scroll );
  153.  
  154.         // initial animation
  155.         classie.add( container, 'loading' );
  156.  
  157.         if( support.animations ) {
  158.             container.addEventListener( animEndEventName, onEndInitialAnimation );
  159.         }
  160.         else {
  161.             onEndInitialAnimation();
  162.         }
  163.     }
  164.  
  165.     function startLoading() {
  166.         // simulate loading something..
  167.         var simulationFn = function(instance) {
  168.             var progress = 0,
  169.                 interval = setInterval( function() {
  170.                     progress = Math.min( progress + Math.random() * 0.1, 1 );
  171.  
  172.                     instance.setProgress( progress );
  173.  
  174.                     // reached the end
  175.                     if( progress === 1 ) {
  176.                         classie.remove( container, 'loading' );
  177.                         classie.add( container, 'loaded' );
  178.                         clearInterval( interval );
  179.  
  180.                         var onEndHeaderAnimation = function(ev) {
  181.                             if( support.animations ) {
  182.                                 if( ev.target !== header ) return;
  183.                                 this.removeEventListener( animEndEventName, onEndHeaderAnimation );
  184.                             }
  185.  
  186.                             classie.add( document.body, 'layout-switch' );
  187.                             window.removeEventListener( 'scroll', scroll );
  188.                         };
  189.  
  190.                         if( support.animations ) {
  191.                             header.addEventListener( animEndEventName, onEndHeaderAnimation );
  192.                         }
  193.                         else {
  194.                             onEndHeaderAnimation();
  195.                         }
  196.                     }
  197.                 }, 80 );
  198.         };
  199.  
  200.         loader.setProgressFn( simulationFn );
  201.     }
  202.    
  203.     function noscroll() {
  204.         window.scrollTo( 0, 0 );
  205.     }
  206.  
  207.     init();
  208.  
  209. })();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement