前端插件 -- WOW.js动画插件

最新推荐文章于 2024-06-15 14:09:16 发布

卡夫卡的baby

最新推荐文章于 2024-06-15 14:09:16 发布

阅读量1.7k

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_72303943/article/details/131045836

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

WOW.js动画插件

有的页面在向下滚动的时候，有些元素会产生细小的动画效果。比如需要做到滚动条滑到某个位置时，才能显示动画。wow.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。

IE6、IE7 等老浏览器不支持 CSS3动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

使用wow.js这个插件（实现页面动画效果），提高前端开发效率

使用npm包管理工具，下载:

 npm install wowjs

下载完成后，我们把 node_modules目录下的对应的js文件和css样式表文件拿出来，放置到你当前项目的指定目录下，然后，在你当前项目中去使用。

使用方法：

1、wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css。

如过引入之后没有动态效果，可能是安装的版本过高，这时，我们低一点的版本，然后再引入

<link rel="stylesheet" href="./css/animate3.5.css">

2、在最底部或引入的css下面引用wow.js或者wow.min.js，然后再下面再写一行javascript代码。（无需引用jquery）

<script src="./js/wow.min.js"></script>

3、写html代码（必须设置为块状或者行内块状），并添加class类名。

在页面中，我们使用旧版本的animate.css即可。

旧版本的animate.css 的类名引入：

  <section class="wow animated slideInLeft">小李子是憨憨</section>
   <section class="wow animated slideInRight">小李子是大傻瓜</section>
   <section class="wow animated rotateInDownLeft">小李子你好呀</section>

新版本的animate.css的类名引入：

在类名的前面要加前缀animate__

  <section class="wow animate__slideInRight">小李子是憨憨</section>
   <section class="wow animate__backOutRight">小李子是大傻瓜</section>

完整代码：

<title>wowjs结合animate动画实现页面动画效果</title>
    <link rel="stylesheet" href="./css/animate3.5.css">
    <style>
        body{
            background-color: palegreen
        }
        section{
            color: darksalmon;
            font-size: 30px;
        }
        div{
            color: slateblue;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <section class="wow animated slideInLeft">小李子是憨憨</section>
    <section class="wow animated slideInRight">小李子是大傻瓜</section>
    <section class="wow animated rotateInDownLeft">小李子你好呀</section>

    <div class="wow fadeInUp">小李子是蠢猪</div>

    <script src="./js/wow.min.js"></script>
    <script>
        new WOW().init()
    </script>

预览效果：