Niq's OA Resources

Fade in effect

Fade Effect script

This tool has several different options for the fade in effect, as well as custom settings that can be applied to every selected div on the page, or even individually. The commented out section in the code has the different settings that can be over-ridden, and how to apply it individually. For example, you can set it to do it once, disable it on mobile, etc.

Fade effects include (they go in the direction mentioned): fade-up, fade-down, fade-left, fade-right, fade-up-right, fade-up-left, fade-down-right, fade-down-left, flip-up, flip-down, flip-left, flip-right, zoom-in, zoom-in-up, zoom-in-down, zoom-in-right, zoom-in-left, zoom-out, zoom-out-right, zoom-out-left, zoom-out-up, and zoom-out-down.

You can put any content in here

Code: (the init script has to go after the .js script)

You don't have to copy the commented out code when you're using it, but if you want to change default setting, look through those settings.

<link href="/css/aos.css" rel="stylesheet"> <script src="/js/aos.js"></script> <script> AOS.init({ offset: 200, duration: 800, once: true, disable: 'mobile' }); </script> <div data-aos="fade-up"></div> <!--Default setup: AOS.init({ // Global settings: 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) // Settings that can be overridden on per-element basis, by `data-aos-[inster attribute]="[insert value]"` attributes: offset: 120, // offset (in px) from the original trigger point delay: 0, // values from 0 to 3000, with step 50ms duration: 400, // values from 0 to 3000, with step 50ms easing: 'ease', // default easing for AOS animations once: true, // whether animation should happen only once - while scrolling down mirror: false, // whether elements should animate out while scrolling past them anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation }); -->