使用animate.css自定義水平滾動

Question

我有一些代碼：

 $(window).load(function(){ // Horizontal scroll if($(".js-page-scroll").length){ $(".js-page-scroll").mCustomScrollbar({ axis:"x", theme:"dark-3", // scrollbarPosition: 'outside', advanced:{ autoExpandHorizontalScroll:true }, callbacks:{ whileScrolling:function(){ new WOW().init(); } } }); } }); 

 main { display: flex; flex-flow: row nowrap; align-items: center; align-content: center; justify-content: space-between; } section { display: block; width: 300px; border: 1px solid #000; padding: 1rem; } .js-page-scroll { width: 100%; overflow-x: auto; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" /> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script> <div class="js-page-scroll"> <main> <section> <h2>1</h2> <p class="wow fadeInUp"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo? </p> </section> <section> <h2>2</h2> <p class="wow fadeInUp"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo? </p> </section> <section> <h2>3</h2> <p class="wow fadeInLeft"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo? </p> </section> <section> <h2>4</h2> <p class="wow fadeInUp"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo? </p> </section> <section> <h2>5</h2> <p class="wow bounceIn"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo? </p> </section> </main> </div> 

我使用自定義滾動（水平） - 馬里胡自定義滾動條

對於動畫 - animate.css和wow.js

問題是，對於水平滾動，塊中的文本平滑地出現（動畫），因此順序出現（如使用wow.js時）。

問題：如何為水平滾動配置wow.js（或者，也許是另一個插件）？ or如何為自定義滾動配置animate.css（當滾動塊按順序順利顯示時）？

Answer 1

在你的代碼片段中，問題是你已經在滾動時啟動了WOW插件。 這就是為什么同時觸發所有段落標記的動畫的原因。

在您的代碼段中，我添加了自定義代碼，而不是使用WOW插件。 滾動時我調用了自定義函數animateContent();

JS代碼

// Custome code for smooth animation 

                  function animateContent() {

                   var divWidth = $(".js-page-scroll").width();
                   var divWidthLg = $(".js-page-scroll").width() - 20;
                   var divWidthMd = $(".js-page-scroll").width() - 40;
                   var divWidthSm = $(".js-page-scroll").width() - 100;
                        //console.log(divWidth);
                         //console.log(divWidthLg);console.log(divWidthMd);


                    var section =$("section");


                     section.each(function(){


                     var offset = $(this).offset().left;
                     var ind = $(this).index() + 1;

                    // console.log(ind, offset);

                     if(offset > divWidth) {
                         $("p" , this).addClass("animated fadeOutUp");

                      }

                     if ( (offset < divWidthLg)){

                     if ($("p" , this).hasClass("fadeOutUp")){
                     $("p" , this).removeClass("fadeOutUp");
                     $("p" , this).addClass("animated fadeInUp");
                     setTimeout(function(){
                     $("p" , this).removeClass("fadeInUp");
                     }, 1500);
                     }
                     else {
                     $("p" , this).addClass("animated fadeInUp");
                     }

                     }

                     if(offset < divWidthSm) {
                      // $("p" , this).removeClass("fadeOutUp");
                       // $("p" , this).removeClass("fadeInUp");
                     }

                     });

                }

我做了什么：

• 首先，我找到了外部div的總寬度
• 然后在它旁邊我找到了每個section的偏移位置
• 如果偏移位置小於外部div的總寬度和右偏移位置，我添加了animated fadeInUp類。

DEMO

 $(window).load(function(){ // Horizontal scroll if($(".js-page-scroll").length){ $(".js-page-scroll").mCustomScrollbar({ axis:"x", theme:"dark-3", // scrollbarPosition: 'outside', advanced:{ autoExpandHorizontalScroll:true }, callbacks:{ whileScrolling:function(){ animateContent(); } } }); } }); // Custome code for smooth animation function animateContent() { var divWidth = $(".js-page-scroll").width(); var divWidthLg = $(".js-page-scroll").width() - 20; var divWidthMd = $(".js-page-scroll").width() - 40; var divWidthSm = $(".js-page-scroll").width() - 100; //console.log(divWidth); //console.log(divWidthLg);console.log(divWidthMd); var section =$("section"); section.each(function(){ var offset = $(this).offset().left; var ind = $(this).index() + 1; // console.log(ind, offset); if(offset > divWidthLg) { $("p" , this).addClass("animated fadeOutUp"); } if ( (offset < divWidthLg)){ if ($("p" , this).hasClass("fadeOutUp")){ $("p" , this).removeClass("fadeOutUp"); $("p" , this).addClass("animated fadeInUp"); setTimeout(function(){ $("p" , this).removeClass("fadeInUp"); }, 1500); } else { $("p" , this).addClass("animated fadeInUp"); } } if(offset < divWidthSm) { // $("p" , this).removeClass("fadeOutUp"); // $("p" , this).removeClass("fadeInUp"); } }); } 

 main { display: flex; flex-flow: row nowrap; align-items: center; align-content: center; justify-content: space-between; } section { display: block; width: 300px; border: 1px solid #000; padding: 1rem; } .js-page-scroll { width: 100%; overflow-x: auto; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" /> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script> <div class="js-page-scroll"> <main> <section> <h2>1</h2> <p class="wow fadeInUp"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo? </p> </section> <section> <h2>2</h2> <p class="wow fadeInUp"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo? </p> </section> <section> <h2>3</h2> <p class="wow fadeInUp"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo? </p> </section> <section> <h2>4</h2> <p class="wow fadeInUp"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo? </p> </section> <section> <h2>5</h2> <p class="wow fadeInUp"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo? </p> </section> </main> </div> 

這是Fiddle的演示。

---

更新（每個元素的單獨動畫）

在這里，我附上了Fiddle演示鏈接。

我在這里做了什么：我只獲取動畫IN和OUT類表單data attribute ，並在必要時附加所需的動畫。

通過這個，您可以處理每個部分的IN和OUT動畫。

 $(window).ready(function(){ // Horizontal scroll if($(".js-page-scroll").length){ $(".js-page-scroll").mCustomScrollbar({ axis:"x", theme:"dark-3", // scrollbarPosition: 'outside', advanced:{ autoExpandHorizontalScroll:true }, callbacks:{ whileScrolling:function(){ animateContent(); } } }); } }); // new WOW().init(); function animateContent() { var divWidth = $(".js-page-scroll").width(); var divWidthLg = $(".js-page-scroll").width() - 20; var divWidthMd = $(".js-page-scroll").width() - 40; var divWidthSm = $(".js-page-scroll").width() - 100; //console.log(divWidth); //console.log(divWidthLg);console.log(divWidthMd); var section =$("section"); section.each(function(){ var inAnimation = $("p" , this).data("inanimation"); var outAnimation = $("p" , this).data("outanimation"); var offset = $(this).offset().left; var ind = $(this).index() + 1; // console.log(ind, offset, inAnimation, outAnimation); if(offset > divWidthLg) { $("p" , this).addClass("animated "+ outAnimation); } if ( (offset < divWidthLg)){ if ($("p" , this).hasClass("animated")){ $("p" , this).removeClass(); $("p" , this).addClass("animated "+ inAnimation); setTimeout(function(){ $("p" , this).css("background", "red"); }, 1500); } else { $("p" , this).addClass("animated " + inAnimation); } } if ( (offset < 0)){ $("p" , this).addClass("animate "+ outAnimation); setTimeout(function(){ $("p" , this).removeClass(); }, 1500); } if(offset < divWidthSm) { // $("p" , this).removeClass("fadeOutUp"); // $("p" , this).removeClass("fadeInUp"); } }); } 

 main { display: flex; flex-flow: row nowrap; align-items: center; align-content: center; justify-content: space-between; } section { display: block; width: 300px; border: 1px solid #000; padding: 1rem; } .js-page-scroll { width: 100%; overflow-x: auto; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" /> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script> <div class="js-page-scroll"> <main> <section> <h2>1</h2> <p class="wow" data-inanimation="fadeInUp" data-outanimation="fadeOutUp" data-inanimationn="dsfsdg"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo? </p> </section> <section> <h2>2</h2> <p class="wow" data-inanimation="fadeInUp" data-outanimation="fadeOutUp"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo? </p> </section> <section> <h2>3</h2> <p class="wow" data-inanimation="fadeInLeft" data-outanimation="fadeOutLeft"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo? </p> </section> <section> <h2>4</h2> <p class="wow" data-inanimation="fadeInUp" data-outanimation="fadeOutUp"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo? </p> </section> <section> <h2>5</h2> <p class="wow" data-inanimation="bounceIn" data-outanimation="bounceOut"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo? </p> </section> </main> </div> 

希望這會對你有所幫助。

謝謝。

Answer 2

使用一些簡單的JS可以實現水平滾動檢測，而無需額外的庫。 您正在使用JQuery，因此這是一種可能的解決方案。

我使用了雙子座定制的scollbar，因為它非常輕便且用戶友好。

我還包含了一個偏移量，因此您可以決定何時顯示動畫，而不是在元素處於視圖中時將其關閉。

---

看看這里的小提琴： http ： //jsfiddle.net/zfd2t31h/1/

---

JS

// Add custom scrollbar
var myScrollbar = new GeminiScrollbar({
  element: document.querySelector('.js-page-scroll')
}).create();

// Add scroll events
var scrollContainer = $('.gm-scroll-view');
var scrollElem = $('section');
var offset = 300;

scrollContainer.scroll(function() {
  var $thisContainer = $(this);

  $thisContainer.find(scrollElem).each(function(n) {
    var $thisElem = $(this);

    if ($thisElem.position().left + $thisElem.width() > 0 && $thisElem.position().left < $thisContainer.width() - offset) {
      $('p', $thisElem).addClass('animated fadeInUp');
    }
  });
});

HTML

<script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar@1.5.3/index.js"></script>
<link href="https://cdn.jsdelivr.net/npm/gemini-scrollbar@1.5.3/gemini-scrollbar.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="js-page-scroll">
  <main>
    <section>
      <h2>1</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
      </p>
    </section>
    <section>
      <h2>2</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
      </p>
    </section>
    <section>
      <h2>3</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
      </p>
    </section>
    <section>
      <h2>4</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimi neque laudantium, facilis explicabo?
      </p>
    </section>
    <section>
      <h2>5</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
      </p>
    </section>
  </main>
</div>

CSS

main {
  display: flex;
  flex-flow: row;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

section {
  display: block;
  border: 1px solid #000;
  padding: 1rem;
  flex: 1 0 300px;
}

section p {
  opacity: 0;
}

.gm-scrollbar .thumb {
  background: darkblue;
}