这是一款效果非常炫酷的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 ); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!