帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery文本摇动效果插件

帝国模板之家 2021-01-14 网页特效 评论

介绍

一个超轻量级的jQuery插件,它利用CSS3转换和过渡对文档中的任何DOM元素实现平滑的抖动动画。

兼容的浏览器

Chrome, IE9+, FireFox, Opera, Safari

使用方法

1. 在jQuery库之后加载shake.js插件。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/shake.js"></script>

2. 将函数shake功能应用于要设置动画的元素。

<div id="shake">
  Shake Me!
</div>
$(function(){
  $('#shake').shake()
});

3.用于摇动动画的jQuery脚本。随意修改和覆盖代码以创建自己的摇动动画。

$.fn.shake = function(interval = 100){
    this.addClass('shaking');
    this.css('transition', 'all ' + (interval / 100).toString() + 's');
    setTimeout(() => {
        this.css('transform', 'translateX(-50%)');
    }, interval * 0);
    setTimeout(() => {
        this.css('transform', 'translateX(50%)');
    }, interval * 1);
    setTimeout(() => {
        this.css('transform', 'translateX(-25%)');
    }, interval * 2);
    setTimeout(() => {
        this.css('transform', 'translateX(25%)');
    }, interval * 3);
    setTimeout(() => {
        this.css('transform', 'translateX(-7%)');
    }, interval * 4);
    setTimeout(() => {
        this.css('transform', 'translateX(0%)');
    }, interval * 5);
    this.removeClass('shaking');
};
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言