浙江 杭州

jQuery创意loading文字动画特效

系统分类: 网页特效 - jquery插件 - 其他jQuery插件 2017-05-25

人气4432

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款效果非常炫酷的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  );
  });
              

查看演示
下载资源:3
下载资源
错误提交:

格式:zip 大小:11.02KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1830.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery创意loading文字动画特效

我当前G币余额:0 已下载次数:3

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

说点什么...(已有2 评论)