博客专辑1

Darlene Robertson

Darlene Robertson

Darlene Robertson

Leslie Alexander

© 2025. Artevo

const USE_SCROLL_ANIMATION_CLASSNAMES = ['shoplaza-section']; const USE_SCROLL_ANIMATION_CLASSNAMES_WITH_DATA_CASCADE = ['product-card', 'collection-card']; const SCROLL_ANIMATION_CLASSNAME = 'scroll-animation'; const SCROLL_ANIMATION_OFFSCREEN_CLASSNAME = 'scroll-animation--offscreen'; function onIntersection(elements, observer) { elements.forEach((element, index) => { if (element.isIntersecting) { const elementTarget = element.target; if (elementTarget.classList.contains(SCROLL_ANIMATION_OFFSCREEN_CLASSNAME)) { elementTarget.classList.remove(SCROLL_ANIMATION_OFFSCREEN_CLASSNAME); } if ( USE_SCROLL_ANIMATION_CLASSNAMES_WITH_DATA_CASCADE.some((className) => elementTarget.classList.contains(className) ) ) { elementTarget.setAttribute('style', `--animation-order: ${elementTarget._scrollCustomIndex};`); } observer.unobserve(elementTarget); elementTarget.addEventListener('animationend', () => { elementTarget.classList.remove(SCROLL_ANIMATION_CLASSNAME); }); } else { element.target.classList.add(SCROLL_ANIMATION_OFFSCREEN_CLASSNAME); } }); } function initScrollAnimation(rootElement = document) { const scrollAnimationElements = []; USE_SCROLL_ANIMATION_CLASSNAMES.forEach((className) => { const elements = Array.from(rootElement.querySelectorAll(`.${className}`)); scrollAnimationElements.push(...elements); elements.forEach((element) => { USE_SCROLL_ANIMATION_CLASSNAMES_WITH_DATA_CASCADE.forEach((clsName) => { const dataCascadeElements = Array.from(element.querySelectorAll(`.${clsName}`)); dataCascadeElements.forEach((item, index) => { item._scrollCustomIndex = index; }); scrollAnimationElements.push(...dataCascadeElements); }); }); }); if (scrollAnimationElements.length === 0) { return; } const observer = new IntersectionObserver(onIntersection, { rootMargin: '0px 0px -30px 0px' }); scrollAnimationElements.forEach((element) => { element.classList.add(SCROLL_ANIMATION_CLASSNAME); observer.observe(element); }); } const enableScrollAnimation = document.querySelector('body.enable-scroll-animation'); if (enableScrollAnimation) { initScrollAnimation(); }