使用 animate.css 自定义水平滚动

Posted

技术标签:

【中文标题】使用 animate.css 自定义水平滚动【英文标题】：Custom horizontal scroll with animate.css 【发布时间】：2018-03-28 06:25:41 【问题描述】：

我有一些代码：

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

我使用自定义滚动（水平）-malihu custom scrollbar

对于动画 - animate.css 和 wow.js

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

问题：如何为水平滚动配置 wow.js（或者，也许是另一个插件）？ or如何为自定义滚动配置animate.css（当滚动块平滑出现时，顺序）？

【问题讨论】：

我可能会推荐使用ScrollMagic 而不是WOW，因为它似乎更易于配置并且可以处理水平滚动（请参阅here） @zgood，我尝试了滚动魔法，但我需要类保持在后滚动。也就是说，我无法删除切换（.setClassToggle ... setClass - 没有这样的属性） 对不起我的英语 @zgood 我倾向于避免使用 ScrollMagic，因为它不适用于移动设备。 我想你最近改变了你的要求，是这样吗？我已经看到所有选项卡都有相同的动画，但现在它与其他选项卡不同。 【参考方案1】：

在你的 sn-p 中，问题是你在滚动时启动了 WOW 插件。这就是为什么同时触发所有段落标签的动画的原因。

从您的 sn-p 中，我添加了自定义代码，而不是使用 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 类。

演示

$(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 demo link.

我在这里做了什么： 我只是得到动画 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>

希望对你有帮助。

谢谢。

【讨论】：

【参考方案2】：

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

我使用了 Gemini 自定义 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;

【讨论】：

谢谢，但是当我滚动鼠标滚轮时它不起作用 嗯，这是一个单独的问题，不是大多数浏览器默认支持的行为，但是您可以使用插件或一些 JS 来解决这个问题。尝试：***.com/questions/11700927/… 或使用插件，例如：css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel

以上是关于使用 animate.css 自定义水平滚动的主要内容，如果未能解决你的问题，请参考以下文章

WOW.js和animate.css让页面滚动时显示动画

Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例

animate.css+wow.js页面滚动即时显示动画

使用 Interface Builder 和尽可能少的代码创建具有水平滚动的自定义 UITableViewCell

如何在 UWP ScrollViewer 中自定义水平滚动拇指

用wow.js实现页面滚动时触发animate.css动画特效