我正在使用wow.js
和animate.js
在鼠标滚动上显示动画。
我想在小型设备上改变动画的方向,就像在大屏幕上一样,它应该从右侧和小型设备上动画,它应该从底部动画。
这是一个显示我需要的片段。
new WOW().init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<section class="wow fadeInRight" >Section 1</section>
<section class="wow fadeInUp" data-wow-delay="1s">Section 1 on mobile</section>
你可以这样做:
new WOW().init();
.desktop {
display: block;
}
.mobile {
display: none;
}
@media all and (max-width:767px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<section class="wow fadeInRight desktop">Section 1</section>
<section class="wow fadeInUp mobile">Section 1 on mobile</section>
我认为您不必为此使用两个内容,只需使用一个元素并更改移动设备的动画类。您可以减少内容。
我只是添加一个媒体查询来更改anime.min.css
中的动画类
您可以更改媒体查询值(767px)
new WOW().init();
@media only screen and (max-width: 767px) {
.anim-mob-up.fadeInRight {
-webkit-animation-name: fadeInLeft !important;
animation-name: fadeInLeft !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<section class="wow fadeInRight anim-mob-up">Section 1 Both Desk & Mobile</section>
fadeInRight
。fadeInUp
添加到元素,否则将fadeInRight
添加到元素。 const wow = document.querySelectorAll('.wow')
const dir = window.innerWidth <= 1024 ? 'fadeInUp' : 'fadeInRight'
Array.prototype.forEach.call(wow, el => el.classList.add(dir))
new WOW().init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<section class="wow" >Section 1</section>
<section class="wow" data-wow-delay="1s">Section 1 on mobile</section>