Loading
0

页面滚动加载特效脚本WOW.js

技术小学生微信公众号
腾讯云服务器大促销。
华为服务器

现在很多网页都有个炫酷的特效:滚动页面时会展示各式各样的动画效果。WOW.js 可帮你实现这种 CSS3 动画效果,通过设置调整可以改变动画的风格、延迟、偏移量等。我现在用的 Begin主题 就在使用这个特效,只是添加了首屏展示的元素不加载动画。

页面滚动加载特效脚本WOW.js

使用方法:

1、引用动画样式文件Animate.css 

  1. <link rel=“stylesheet” href=“css/animate.css”>

2、加载激活WOW.js

  1. <script src=“js/wow.min.js”></script>
  2. <script>
  3. new WOW().init();
  4. </script>

可选择参数:

  1. wow = new WOW({
  2.     boxClass:     ‘wow’,      // default
  3.     animateClass: ‘animated’, // default
  4.     offset:       0,          // default
  5.     mobile:       true,       // default
  6.     live:         true        // default
  7. })
  8. wow.init();

其中:

boxClass WOW.js需要执行动画的元素的 class

animateClass animated’animation.css 动画的 class

offset 距离可视区域多少开始执行动画

mobile 是否在移动设备上执行动画默认:true,可选:false

live 异步加载的内容是否有效,默认:true,可选:false

3、为HTML添加专有class

  1. <div class=“wow slideInLeft”></div>
  2. <div class=“wow slideInRight”></div>

其中:

slideInLeftslideInRight分别代表方式,可以改为fadeInUp和fadeInDown等实现不同的动画效果。

还可以这样写:

  1. <section class=“wow slideInLeft” data-wow-duration=“2s” data-wow-delay=“5s”></section>
  2. <section class=“wow slideInRight” data-wow-offset=“10”  data-wow-iteration=“10”></section>

通过添加参数调整动画效果。

data-wow-duration 改变动画时间

data-wow-delay 延迟在动画开始之前

data-wow-offset 距离开始动画(有关浏览器底部)

data-wow-iteration 动画重复的次数

技术小学生微信公众号
华为服务器
腾讯云服务器大促销。

声明:站长码字很辛苦啊,转载时请保留本声明及附带文章链接:https://blog.tag.gg/showinfo-19-18677-0.html
亲爱的:若该文章解决了您的问题,可否收藏+评论+分享呢?
上一篇:wordpress网站移动端底部菜单栏源码
下一篇:wordpress安装WP-PostViews Plus插件,显示文章的阅读次数