Есть такой код:
$(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 для кастомного скролла (при прокрутке блоки появлялись плавно, последовательно)?