7

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

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

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

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

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

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

2
  • Советую и свой код кастомного scroll добавить, на сколько я понял animate.css и wow.js будет в нем использоваться?
    – Air
    18 окт 2017 в 11:05
  • 1
    В wow.js offsetTop захардкожен, а нужен offsetLeft. Он так просто не умеет. Сейчас все анимации срабатывают одновременно, потому что отступ сверху у блоков одинаковый и соответственно при обработке события скрола они оказываются в зоне видимости по вертикали одновременно.
    – Talleyran
    20 окт 2017 в 8:55

1 ответ 1

5
+100

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

$(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;
}
<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>
  
<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="animated">
          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="animated">
          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="animated">
          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="animated">
          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="animated">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        </p>
      </section>
    </main>
  </div>

1
  • 1
    @HamSter тогда убрать просто thisLeft > -thisWidth и $(this).removeClass('fadeInUp'); 24 окт 2017 в 14:57

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.