我正在尝试根据屏幕尺寸更改AOS-Animate的动画。不幸的是我无法做到这一点,有人可以帮我吗?
谢谢您的帮助。
我设法根据屏幕尺寸禁用AOS库,但是我希望根据屏幕尺寸的变化让不同的img播放其动画
<div class="thumb gridItem">
<img data-aos="fade-left" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-once="false" src="images/image.jpg">
<div class="overlay">
<div class="overlayText">Website</div>
</div>
</div>
AOS.init({
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
disable: function() {
var maxWidth = 600;
return window.innerWidth < maxWidth;
}
});