自定义水平滚动与动画。css

I have some code:

我有一些代码:

$(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>

I use custom scroll (horizontal) - malihu custom scrollbar

我使用自定义滚动(水平)- malihu自定义滚动条。

For animation - animate.css and wow.js

动画,动画。css和wow.js

The problem is that with the horizontal scroll, the text in the blocks appeared (animated) smoothly and, consequently, sequentially (as when using wow.js).

问题是，在水平滚动中，块中的文本(动画)平滑地呈现出来，因此，顺序地呈现出来(就像使用wow.js一样)。

Question: how to configure wow.js (or, perhaps, what is another plugin) for a horizontal scroll? or How to configure animate.css for a custom scroll (when scrolling blocks appear smoothly, sequentially)?

问题:如何配置wow。对于水平滚动，js(或者，可能还有什么插件)?或者如何配置动画。用于自定义滚动条的css(当滚动块按顺序显示时)?

2 个解决方案

#1

In your snippet, the issue is you have initiated the WOW plugin on the scrolling. That's why the animation for all paragraph tag is triggered simultaneously.

在您的代码片段中，问题是您已经在滚动中启动了WOW插件。这就是为什么同时触发所有段落标记的动画。

From your snippet, I have added custom code instead of using WOW Plugin. While scrolling I have called custom function added by me animateContent();

从您的代码片段中，我添加了自定义代码，而不是使用WOW插件。在滚动时，我调用了由我animateContent()添加的自定义函数;

JS CODE

// 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");
                     }

                     });

                }

What I have done:

我都做了什么:

• At first, I have found the total width of the outer div
• 首先，我找到了外部div的总宽度
• Then next to it I have found the offset position of each section
• 然后在它旁边我找到了每个部分的偏移位置
• If the offset position is less then the total width of outer div and the right offset position, I added animated fadeInUp class thats it.
• 如果偏移位置小于外部div的总宽度和右偏移位置，我就添加了动画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>

Here is the demo in Fiddle.

这是小提琴的演示。

---

UPDATE (Seperate animation for each element)

Here I have attached the Fiddle demo link.

这里我附加了小提琴演示链接。

What I have done here: I just get the animation IN and OUT class form data attribute, and append the required animation when it necessary.

我在这里所做的是:我只需要将动画输入和输出类form数据属性，并在必要时附加所需的动画。

By this you can handle IN and OUT animation for each section.

这样，您就可以为每个部分处理动画的输入和输出。

$(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>

Hope this will helps you.

希望这能对你有所帮助。

Thanks.

谢谢。

#2

Horizontal scroll detection can be achieved with some simple JS without the need for additional libraries. You are using JQuery so this is one possible solution utilising it.

水平滚动检测可以通过一些简单的JS实现，而不需要额外的库。您正在使用JQuery，所以这是一个可能的解决方案。

I used Gemini custom scollbar as it's quite light and user friendly.

我使用了双子座定制的scollbar，因为它非常轻和用户友好。

I have also included an offset so you can decide when to show the animations rather than firing them off as soon as the element is in view.

我还包含了一个偏移量，以便您可以决定何时显示动画，而不是在元素出现时立即将它们触发。

---

Check it out the fiddle here: http://jsfiddle.net/zfd2t31h/1/

看看这个小提琴:http://jsfiddle.net/zfd2t31h/1/

---

JS

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

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

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;
}