https://lapazrobles-cesar.gov.co/SiteAssets/lapazTW/assets/components/dinamic-scroll/main.js

1// Script para animaciones de scroll que se repiten con dirección
2document.addEventListener('DOMContentLoaded', function() {
3    // Seleccionar todos los elementos con clases de animación
4    const animatedElements = document.querySelectorAll('.scroll-animate, .scroll-animate-left, .scroll-animate-right, .scroll-animate-scale');
5    
6    // Variable para detectar dirección del scroll
7    let lastScrollY = window.scrollY;
8    let scrollDirection = 'down';
9    
10    // Detectar dirección del scroll
11    window.addEventListener('scroll', () => {
12        if (window.scrollY > lastScrollY) {
13            scrollDirection = 'down';
14        } else {
15            scrollDirection = 'up';
16        }
17        lastScrollY = window.scrollY;
18    });
19    
20    // Crear el observer
21    const observer = new IntersectionObserver((entries) => {
22        entries.forEach(entry => {
23            if (entry.isIntersecting) {
24                // Elemento entra en vista - mostrar animación según dirección
25                entry.target.classList.remove('scroll-up', 'scroll-down');
26                
27                if (scrollDirection === 'down') {
28                    entry.target.classList.add('scroll-down');
29                } else {
30                    entry.target.classList.add('scroll-up');
31                }
32                
33                entry.target.classList.add('in-view');
34            } else {
35                // Elemento sale de vista - resetear animación
36                entry.target.classList.remove('in-view', 'scroll-up', 'scroll-down');
37            }
38        });
39    }, {
40        threshold: 0.1, // Se activa cuando el 10% del elemento es visible
41        rootMargin: '0px 0px -50px 0px' // Se activa un poco antes de que entre completamente
42    });
43
44    // Observar todos los elementos
45    animatedElements.forEach(element => {
46        observer.observe(element);
47    });
48});