frontblocks-animations.css
2 years ago
frontblocks-animations.js
2 years ago
frontblocks-animations.php
2 years ago
frontblocks-animations.js
41 lines
| 1 | window.addEventListener('load', (event) => { |
| 2 | /** |
| 3 | * onIntersection will be triggered each time an observed item is visible in the viewport. |
| 4 | * |
| 5 | * @param {elements} The list of queried elements |
| 6 | * @param {*} Defines the option parameters for the observer API |
| 7 | */ |
| 8 | const onIntersection = (elements, options) => { |
| 9 | elements.forEach((element) => { |
| 10 | let animationData = element.target.dataset.frontblocks_animation; |
| 11 | |
| 12 | // Check if the data attribute doesn't include the prefix, and add it otherwise. |
| 13 | if (!animationData.includes('animate__')) { |
| 14 | animationData = 'animate__'.concat(animationData); |
| 15 | } |
| 16 | |
| 17 | // Add the CSS class if the element is visible. |
| 18 | if (element.isIntersecting) { |
| 19 | element.target.classList.add('animate__animated', animationData); |
| 20 | } |
| 21 | }); |
| 22 | } |
| 23 | |
| 24 | /** |
| 25 | * Declares an instance of the IntersectionObserver API, which receives a function that will execute each time an observed |
| 26 | * item is present in the viewport. |
| 27 | */ |
| 28 | const observer = new IntersectionObserver(onIntersection, { |
| 29 | root: null, |
| 30 | threshold: 0.5, |
| 31 | }); |
| 32 | |
| 33 | /** |
| 34 | * Gather a list of all the DOM elements which contain the 'data-frontblocks-animation' attribute. |
| 35 | * Then, observe the presence of each one in the viewport. |
| 36 | */ |
| 37 | const animatedElements = document.querySelectorAll('[data-frontblocks_animation]'); |
| 38 | animatedElements.forEach((element) => { |
| 39 | observer.observe(element); |
| 40 | }); |
| 41 | }); |