当前位置：首页 > 网页特效 > 进度条

jQuery创意loading文字动画特效

分类：进度条日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<div class="word">LOADING...</div>
<div class="overlay"></div>
```
#####  CSS样式
这个loading文字动画特效的CSS样式非常简单，主要是一些定位和背景渐变的样式。

```html
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文件。

```html
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  );
  });
```

web299.com

jQuery创意loading文字动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果