网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
一个超轻量级的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');
};
转载请注明来源:jQuery文本摇动效果插件
本文永久链接地址:https://www.moyouyouw.cn/code/1327.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论