Кастомный горизонтальный скролл с animate.css

#html #jquery #css #plugin

Есть такой код:



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


  

  


  
  

    

      

        
1
        

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum
cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        
      
      

        
2
        

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum
cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        
      
      

        
3
        

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum
cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        
      
      

        
4
        

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum
cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        
      
      

        
5
        

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum
cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        
      
    
  




Использую кастомный скролл (горизонтальный) - malihu custom scrollbar

Для анимации - animate.css и wow.js

Суть в том, что при горизонтальном скролле, текст в блоках появлялся (анимировался)
плавно и соответственно последовательно (как при использовании wow.js). Т.е. wow.js
но для горизонтальной прокрутки.

Вопрос: как настроить wow.js (или, возможно, есть какой другой плагин) для горизонтального
скролла? || Как настроить animate.css для кастомного скролла (при прокрутке блоки появлялись
плавно, последовательно)?
    

Ответы

Ответ 1

Можно сделать обычную проверку на наличие элемента в зоне видимости, без всяких доп
плагинов.

$(this).offset().left < windowWidth - проверяем вошел ли элемент в зону видимости
"справа"

$(this).offset().left > -$(this).width() - проверяем вошел ли элемент в зону видимости
"слева"

Если вошел, до добавляем ему класс анимации, если ушел, то удаляем 



$(window).load(function(){
  
  var windowWidth = $(window).width();
  var thisLeft, thisWidth;
  
  function animateBlocks(){
    $('.animated').each(function(){
      thisLeft = $(this).offset().left;
      thisWidth = $(this).width();
      if(thisLeft < windowWidth && thisLeft > -thisWidth){
         $(this).addClass('fadeInUp');
      }else{
        $(this).removeClass('fadeInUp');
      }
    });
  }
  
  animateBlocks();
  
	// Horizontal scroll
    if($(".js-page-scroll").length){
        $(".js-page-scroll").mCustomScrollbar({
        	axis:"x",
            theme:"dark-3",
            // scrollbarPosition: 'outside',
            advanced:{ autoExpandHorizontalScroll:true },

            callbacks:{
                    whileScrolling:function(){
                    	
                    	animateBlocks();
                        
                    }
                }
        });
    }
});
main {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}

section {
    display: block;
    min-width: 300px;
    border: 1px solid #000;
    padding: 1rem;
}

.js-page-scroll {
    width: 100%;
    overflow-x: auto;
}


  


  
  

    

      

        
1
        

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum
cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        
      
      

        
2
        

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum
cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        
      
      

        
3
        

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum
cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        
      
      

        
4
        

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum
cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        
      
      

        
5
        

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum
cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?