indikatordesign

Crazy Animation

Mar 3rd, 2017
98
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function($){
  2.     $(function(){
  3.     "use strict";
  4.  
  5.         // see it in action on codepen: https://codepen.io/anon/pen/ryedMR
  6.  
  7.         var crazyAnimation =
  8.         {
  9.  
  10.             init : function()
  11.             {
  12.  
  13.                 this.vars();
  14.  
  15.                 this.events();
  16.  
  17.             },
  18.  
  19.             vars : function()
  20.             {
  21.  
  22.                 this.header  = $('#changing-title');
  23.  
  24.                 this.crazy   = $( 'div.crazy.video');
  25.  
  26.                 this.default = 'Default Text';
  27.  
  28.             },
  29.  
  30.             phrases : [
  31.  
  32.                 "word 1",
  33.                 "word 2",
  34.                 "word 3",
  35.                 "word 4", // etc.
  36.  
  37.             ],
  38.  
  39.             iterate : function( el, i = 0, $this = this )
  40.             {
  41.  
  42.                 if ( i < this.phrases.length )
  43.                 {
  44.  
  45.                     setTimeout(function()
  46.                     {
  47.  
  48.                         if ( $this.crazy.hasClass( 'show' ) )
  49.                         {
  50.  
  51.                             el.text( $this.phrases[i] );
  52.  
  53.                             i === $this.phrases.length - 1 ? i = 0 : i++;
  54.  
  55.                             $this.iterate( el, i );
  56.  
  57.                         }
  58.  
  59.                     }, 200, el );
  60.  
  61.                 }
  62.             },
  63.  
  64.             events : function( $this = this )
  65.             {
  66.  
  67.                 this.header.on(
  68.                 {
  69.                     mouseenter : function()
  70.                     {
  71.  
  72.                         $this.crazy.addClass( 'show' );
  73.  
  74.                         $this.iterate( $(this).children( 'span' ) );
  75.  
  76.                     },
  77.  
  78.                     mouseleave : function()
  79.                     {
  80.  
  81.                         $this.crazy.removeClass( 'show' );
  82.  
  83.                         $(this).children( 'span' ).text( $this.default );
  84.  
  85.                     },
  86.                 });
  87.             }
  88.         }.init();
  89.  
  90.     });
  91. }(jQuery));
RAW Paste Data