wow.js

这个东西很有意思，具体怎么有意思呢，就是你可以用很简单的方法引用它，然后通过加类名的方法就可以让你的网页实现很多很炫酷的效果！

用法：

官网地址：https://www.delac.io/wow/
点击github可以找到wow.js和wow.min.js 以及animate.css者animate.min.css
wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css。

首先引入animate.css和wow.min.js
我这里找到官网的cdn地址，没有验证过可用性，不过既然是官网给的应该没问题，也可以下载到本地再用。

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"/><script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>

然后在js里面注册一下

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"/>
<script>var wow = new WOW({boxClass: 'wow', // animated element css class (default is wow)animateClass: 'animated', // animation css class (default is animated)offset: 0, // distance to the element when triggering the animation (default is 0)mobile: true, // trigger animations on mobile devices (default is true)live: true, // act on asynchronously loaded content (default is true)callback: function (box) {// the callback is fired every time an animation is started// the argument that is passed in is the DOM node being animated},scrollContainer: null // optional scroll container selector, otherwise use window});wow.init();
</script>

最后就是使用了


wow rollIn  从左到右、顺时针滚动、透明度从100%变化至设定值
wow bounceIn    从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值
wow bounceInUp  从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
wow bounceInDown    从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
wow bounceInLeft    从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
wow bounceInRight   从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变
wow slideInUp   从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度）
wow slideInDown 从上往下、上来后固定到设定位置、透明度为设定值不变
wow slideInLeft 从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）
wow slideInRight    从右往左、上来后固定到设定位置、透明度为设定值不变
wow lightSpeedIn    从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值
wow pulse   原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
wow flipInX 原位置后仰前栽、透明度从100%变化至设定值
wow flipInY 原位置左右旋动、透明度从100%变化至设定值
wow bounce  上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow shake   左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow swing   从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
wow bounceInU   原位置不变、直接从不显示到显示（无过过渡效果）
wow wobble  原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变<div class="wow fadeInUp">使用示例</div>

好了这就是wowjs的使用流程，是不是很简单，效果的话可以看看官网的示例
https://www.delac.io/wow/

数字累加插件 CounterUp

CounterUp（Counter-Up）是一个jQuery插件，它可以实现数字从0到指定值的动态累加，简单的说就是页面加载到这个位置的时候给数字一个累加到指定值得一个动画
当然，这个插件的使用也很简单；

使用：
在git上去把counterup.min.js下下来
地址
https://github.com/bfintal/Counter-Up
然后引入依赖和counterup.min.js

<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>

然后在js里面注册一下

<script>$('.counter').counterUp({delay: 10,time: 1000});
</script>

参数我就不解释了，可以自己去官网看，哈哈哈哈哈

最后使用也很简单

<span class="counter">2020</span>

效果就是加上counter类名的标签内的值会从0开始加到期望值的一个加载动画。

暂时就先放这两个吧，来任务了，写bug去了

推荐几个比较有意思的js效果插件

推荐几个比较有意思的js效果插件

wow.js

数字累加插件 CounterUp

推荐几个比较有意思的js效果插件相关推荐

最新文章

热门文章