浙江 杭州

jQuery滑动文字特效

系统分类: 网页特效 - jquery插件 - jQuery文本框特效 2015-07-16

人气8792

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


这是一款使用Lettering.js制作的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  
                

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

格式:zip 大小:104.63KB

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

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

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

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

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

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)