jQuery创意loading文字动画特效

这是一款效果非常炫酷的loading文字动画jQuery特效。该loading特效使用字母来做文字特效，不同的字母不停的变换，最后组成loading文字。该特效科技感十足，就像一些科幻大片中的文字特效一样。

制作方法

HTML结构

该旋转木马的HTML结构使用两个<div>：一个用于放置loading文字，一个用于制作遮罩层效果。

<div class="word">LOADING...</div>
<div class="overlay"></div>
              

CSS样式

这个loading文字动画特效的CSS样式非常简单，主要是一些定位和背景渐变的样式。

body {
  background: -webkit-radial-gradient(#222922, #000500);
  background: radial-gradient(#222922, #000500);
  font-family: 'Source Code Pro', monospace;
  font-weight: 400;
  overflow: hidden;
  padding: 30px 0 0 30px;
  text-align: center;
}

.word {
  bottom: 0;
  color: #fff;
  font-size: 2.5em;
  height: 2.5em;
  left: 0;
  line-height: 2.5em;
  margin: auto;
  right: 0;
  position: absolute;
  text-shadow: 0 0 10px rgba(50, 255, 50, 0.5), 0 0 5px rgba(100, 255, 100, 0.5);
  top: 0
}

.word span {
  display: inline-block;
  -webkit-transform: translateX(100%) scale(0.9);
      -ms-transform: translateX(100%) scale(0.9);
          transform: translateX(100%) scale(0.9);
  -webkit-transition: -webkit-transform 500ms;
          transition: transform 500ms;
}

.word .done {
  color: #6f6;
  -webkit-transform: translateX(0) scale(1);
      -ms-transform: translateX(0) scale(1);
          transform: translateX(0) scale(1);
}

.overlay {
  background-image: -webkit-linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%);
  background-image: linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%);
  background-size: 1000px 2px;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}     
              

JAVASCRIPT

该loading文字动画特效使用jquery.lettering.js来制作文字效果，使用时需要引入jquery.lettering.min.js文件。

function Ticker( elem ) {
    elem.lettering();
    this.done = false;
    this.cycleCount = 5;
    this.cycleCurrent = 0;
      this.chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()-_=+{}|[]\\;\':"<>?,./`~'.split('');
    this.charsCount = this.chars.length;
    this.original = elem.html();
    this.letters = elem.find( 'span' );
    this.letterCount = this.letters.length;
    this.letterCurrent = 0;
    
    this.letters.each( function() {
      var $this = $( this );
      $this.attr( 'data-orig', $this.text() );
      $this.text( '-' );
    });
  }

  Ticker.prototype.getChar = function() {
    return this.chars[ Math.floor( Math.random() * this.charsCount ) ];
  };

  Ticker.prototype.reset = function() {
    this.done = false;
    this.cycleCurrent = 0;
    this.letterCurrent = 0;
    this.letters.each( function() {
      var $this = $( this );
      $this.text( $this.attr( 'data-orig' ) );
       $this.removeClass( 'done' );
    });
    this.loop();
  };

  Ticker.prototype.loop = function() {
    var self = this;
    
    this.letters.each( function( index, elem ) {
      var $elem = $( elem );
      if( index >= self.letterCurrent ) {
        if( $elem.text() !== ' ' ) {
          $elem.text( self.getChar() );
          $elem.css( 'opacity', Math.random() );
        }
      }
    });
    
    if( this.cycleCurrent < this.cycleCount ) {
      this.cycleCurrent++;
    } else if( this.letterCurrent < this.letterCount ) {
       var currLetter = this.letters.eq( this.letterCurrent );
      this.cycleCurrent = 0;
      currLetter.text( currLetter.attr( 'data-orig' ) ).css( 'opacity', 1 ).addClass( 'done' );
      this.letterCurrent++;
    } else {
      this.done = true;
    }
    
    if( !this.done ) {
      requestAnimationFrame( function() {
        self.loop();
      });
    } else {
      var self = this;
      setTimeout( function() {
        self.reset();
      }, 750 );
    }
  };

  $words = $( '.word' );

  $words.each( function() {
    var $this = $( this ),
        ticker = new Ticker( $this ).reset();
    $this.data( 'ticker', ticker  );
  });