当前位置：首页 > 网页特效 > 文字效果

jQuery滑动文字特效

分类：文字效果日期：2024-05-14 点击(1) 评论(0)

jQuery滑动文字特效

简介

##### HTML
```html
<div class="sl_examples">
  <a href="#" id="example1" data-hover="Creativity">Illustrations</a>
</div>
```
使用data-hover来表示鼠标滑过的元素。

##### CSS
```html
.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”表示第二个字母。

##### 调用插件：
```html
$(window).load(function(){
  $('#example1').hoverwords({ delay:50 });      
});
```
##### 可用参数：
```html
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 
```

web299.com

jQuery滑动文字特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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