AOS-Animate滚动库响应

时间:2019-10-08 10:02:51

标签: javascript jquery html css

我正在尝试根据屏幕尺寸更改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;
        }
    });

0 个答案:

没有答案