wow.js让页面动起来

          阅读(145)

    wow.js让页面动起来

    wow.js,一个轻量级js库。当你滚动下拉页面时,它可以实现一些动画效果,让你的页面动起来,很炫哦~下面简单讲下wp中配置wow.js的方法。

    <1.准备>

    我们需要俩个文件 wow.min.js 和?animate.css

    下面博主会打包好的

    你也可以访问官方github下载 ? ? ?

    <2.引入wow.min.js>

    将wow.js放到你的网站目录下,然后在页面中引入代码

    wp的话推荐加在footer.php最后

    <script src="<?php bloginfo("template_url"); ?>/js/wow.min.js"></script>

    <3.引入animate.css>

    同样丢到foot.php,当然你也可以整合到style.css

    <link rel="stylesheet" href="<?php bloginfo("template_url"); ?>/css/animate.css">

    <4.添加初始化wow.js代码>

    在前面两段代码后加上一句js,这样可以实现异步ajax

    <script>
    new WOW().init();
    </script>

    wow.js让页面动起来

    这里还有一些自定义配置,可以按照自己喜好配置下

    属性/方法类型默认值说明
    boxClass字符串‘wow’需要执行动画的元素的 class
    animateClass字符串‘animated’animation.css 动画的 class
    offset整数0距离可视区域多少开始执行动画
    mobile布尔值true是否在移动设备上执行动画
    live布尔值true异步加载的内容是否有效

    例如:

    <script>

    wow = new WOW({

    animateClass: ‘animated’,
    });
    wow.init();

    </script>

    <5.css添加元素>

    接下来我们要在各个div中添加css元素

    div会分布在各个文件,耐心找哦~

    例如我们要让侧边栏实现效果,可以在sidebar.php中加入以下两句代码

    class="wow fadeInUp" ?data-wow-delay="0.1s"

    wow.js让页面动起来

    说明下

    wow fadeInUp属性是动画效果样式,可以对照以下网站的演示替换?

    data-wow-delay=”0.1s”属性是时间延迟,根据你的网站速度调成合适的延迟即可,0.1s差不多了

    至此,我们的教程结束了^

    哈哈,下面是文件链接↓↓↓

    2016-10-18 12:54:41


    喜欢 0



还没有人抢沙发呢~

加载中……