页面滚动加载特效脚本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 动画重复的次数

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
avatar
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:30   其中:访客  30   博主:  0

    • avatar boke112导航 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 电信 3

      如果评论内容多的话,用这个感觉很不错

        • avatar BanYuner 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 4

          @boke112导航 但是最基本的就要加载一个JS以及一个CSS

        • avatar Win7en乐园 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信 7

          鸟哥这篇文章写的好啊,滚动加载特效非常的漂亮。

            • avatar boke112导航 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 电信 3

              @Win7en乐园 :wink: 是的,我已经用到我的那个评论列表中,感觉很不错

                • avatar Win7en乐园 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信 7

                  @boke112导航 不错,做的很赞!

                  • avatar 动感单车 来自天朝的朋友 谷歌浏览器 Windows XP 广西桂林市 电信 7

                    @boke112导航 具体怎么布置代码和实现,老古什么时候能否写篇文章详细的分享下呢?

                      • avatar BanYuner 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 4

                        @动感单车 http://www.banyuner.com/14965.html
                        参考一下吧

                  • avatar 雅兮网 来自天朝的朋友 谷歌浏览器 Windows 7 广东省珠海市 电信 4

                    wow.js 是一个特别棒的动画加载效果啊,整个页面都顺滑了不少,我在一个项目里用过。非常赞!!

                    • avatar 动感单车 来自天朝的朋友 谷歌浏览器 Windows XP 广西桂林市 电信 7

                      :oops: 这个虽然很炫酷,也很想为自己的博客也添加上这些个效果,但对于技术盲的我来说明显显得心有余而力不足,一句话弄不来呀,只能是继续维持目前的简洁与朴素的样式!

                        • avatar 明月登楼的博客 来自天朝的朋友 谷歌浏览器 Windows 10 河南省南阳市 电信 4

                          @动感单车 我也是!代码对我来说难度不小呀!同时,我也不是很喜欢修改主题代码,因为一更新就啥都没有了!还是添加到function.php里的代码最好了!

                        • avatar 网赚 来自天朝的朋友 谷歌浏览器 Windows 7 山东省聊城市 联通 2

                          学习了

                          • avatar 何先生 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信 0

                            JQUERY.FADETHIS.MIN.JS也不错哦,更简单轻便

                            • avatar 励志语录网 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省杭州市 联通 5

                              :cool: 赞赞赞

                              • avatar 龙笑天 来自天朝的朋友 火狐浏览器 Windows 7 广东省深圳市 电信 4

                                :evil: 我总感觉这个特效不是很好,具体哪不好又说不出来…

                                  • avatar Win7en乐园 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信 7

                                    @龙笑天 你是指有时候会失效的BUG是吧?鸟哥的我遇到过好几次,点回复不能弹出回复窗口,这点很让人头痛。

                                  • avatar 凯哥自媒体 来自天朝的朋友 谷歌浏览器 Windows 7 河南省郑州市 电信 1

                                    分享的不错,谢谢

                                    • avatar 明月登楼的博客 来自天朝的朋友 谷歌浏览器 Windows 10 河南省南阳市 电信 4

                                      始终不是很喜欢这种动画风格!总是感觉网页载入卡顿的错觉!

                                        • avatar Win7en乐园 来自天朝的朋友 谷歌浏览器  Nexus 5X Build/NMF26F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.91 Mobile Safari/537.36 江苏省苏州市 电信 7

                                          @明月登楼的博客 那你觉得怎么做流弊呢?说出来,鸟哥给你实现!鸟哥,有求必应!鸟哥,厉害的很

                                        • avatar DOQ 来自天朝的朋友 谷歌浏览器 Windows 10 安徽省滁州市 电信 1

                                          有种层层递进的感觉,很不错,丰富了浏览体验。

                                            • avatar Win7en乐园 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信 7

                                              @DOQ 是的,非常的赞。

                                            • avatar 雅兮网 来自天朝的朋友 谷歌浏览器 Windows 7 广东省珠海市 电信 4

                                              今日来访 发现评论列表头像变大了,等级标志也变化了

                                                • avatar Win7en乐园 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信 7

                                                  @雅兮网 是的,确实是,我目前是7级,不知道最高等级是多少,很期待啊。

                                                • avatar Win7en乐园 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信 7

                                                  我怎么又变成6级了啊,下午还是7级呢

                                                    • avatar 动感单车 来自天朝的朋友 谷歌浏览器 Windows XP 广西桂林市 电信 7

                                                      @Win7en乐园 我应该和你是一个等级,其实我们又何必太在意这个等级呢?

                                                        • avatar Win7en乐园 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信 7

                                                          @动感单车 嘿嘿,同意你的看法!http://cn.gravatar.com/avatar/88d4e50cfe390923144df3d6cce52c84?s=128&d=mm

                                                      • avatar PHP程序员雷雪松 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省武汉市 电信 0

                                                        很好用的js滚动插件-wow.js