jQuery滑动文字特效

这是一个很简单的jQuery滑动文字效果。插件中使用了 Lettering.js，你可以在 Github 上找到它。

HTML

<div class="sl_examples">
  <a href="#" id="example1" data-hover="Creativity">Illustrations</a>
</div>
                

使用data-hover来表示鼠标滑过的元素。

CSS

.sl_examples{
  float:left;
  font-family: 'Bevan', arial, serif;
  font-size:50px;
  line-height:50px;
  color:#f0f0f0;
  margin-right:5px;
  text-transform:uppercase;
}
.sl_examples a{
  display:block;
  position:relative;
  float:left;
  clear:both;
  color:#fff;
}
.sl_examples a > span{
  height:50px;
  float:left;
  position:relative;
  overflow:hidden;
}
.sl_examples a span span{
  position:absolute;
  display:block;
  left:0px;
  top:0px;
  text-align:center;
}
.sl_examples a span span.sl-w1{
  color:#fff;
  text-shadow:0px 0px 1px #fff;
  z-index:2;
}
.sl_examples a span span.sl-w2{
  color:#e82760;
  text-shadow:-1px 1px 2px #9f0633;
  z-index:3;
}
                

“sl-w1”表示第一个字母，“sl-w2”表示第二个字母。

调用插件：

$(window).load(function(){
  $('#example1').hoverwords({ delay:50 });      
});
                

可用参数：

delay   : false,    // each letter will have different animation times
speed   : 300,      // animation speed    
easing    : 'jswing',   // easing animation
dir     : 'leftright',  // leftright - current goes left, new one goes right || rightleft - current goes right, new one goes left, 
overlay   : false,    // hover word is slided on top of the current word (just for the case when the hover word equals word)
opacity   : true