【发布时间】：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，因为它不适用于移动设备。
-
我想你最近改变了你的要求，是这样吗？我已经看到所有选项卡都有相同的动画，但现在它与其他选项卡不同。
标签： html css animate.css mcustomscrollbar wow.js