fullpage与wow.js的兼容问题

最新推荐文章于 2022-04-28 18:08:04 发布

weixin_41818291

最新推荐文章于 2022-04-28 18:08:04 发布

阅读量587

点赞数 1

分类专栏：前端记录文章标签： jquery html

本文链接：https://blog.csdn.net/weixin_41818291/article/details/108414484

版权

前端记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在fullpage的滚屏中使用wow.js

下面展示一些 内联代码片。

// 整屏滚动
     $('#fullpage').fullpage({
         resize: true,
         autoScrolling: false,
         // scrollBar: true,
         scrollingSpeed: 700,
         sectionsColor: ['#003b75', '#003b75', '#003b75', '#fefefe', '#ffffff', '#ffffff', '#003b75'],// 背景色
         afterRender: function () {
            // 加载wow动画
            wow = new WOW({
               animateClass: 'animated',
            });
            wow.init();
         },
         onLeave: function (prev, index, direction) {
            // 这一段解决wow的兼容问题
            $("#fullpage .section").eq(index - 1).find('.wow').each(function () {
               if ($(this).attr('data-wow-delay')) {
                  $(this).attr('style', 'animation-delay:' + $(this).attr('data-wow-delay'))
               } else {
                  $(this).attr('style', '')
               };
            });
            $("#fullpage .section").eq(index - 1).find('.wow').addClass('animated');
            // 结束
         }
      });
      // 宽度变化监测
      $(window).resize(function () {
         autoScrolling();
      });
      // 整屏滚动判断
      function autoScrolling() {
         var $ww = $(window).width();
         if ($ww < 1024) {
            $.fn.fullpage.setAutoScrolling(false);
         } else {
            $.fn.fullpage.setAutoScrolling(true);
         }
      }