ANIMACIÓN SCROLL

Esta es la animación que tendrás en tu sitio (pero con lo que tú quieras!):

Instrucciones

ANUNCIO: Asumimos que cuentas con los FRAMES de la animación que quieres implementar.

IMPORTANTE: Las URLs de tus imágenes deben seguir el siguiente formato

/*
'https://www.ejemplo.com/url-a-tus-imagenes0001'
'https://www.ejemplo.com/url-a-tus-imagenes0002'
...
'https://www.ejemplo.com/url-a-tus-imagenes0102'
etc..
*/

Pasos

1. Sube las imágenes a tu sitio (con el formato descrito en la sección anterior)

Medios>Añadir nuevo archivo de medios

1.1 Crea o selecciona la página en la que quieres implementar la animación

1.

2. Añade un bloque de HTML Personalizado donde quieres que se vea la animación

/

3. Inserta el siguiente código (no scaled):

<style>
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.scroll-frame { 
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    visibility: hidden;
    z-index: 2;
}

.js-contenedor-animacion { 
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    height: 1000vh;
    position: relative;
    z-index: 1;
}

.site-footer {
    min-height: 100px;
    position: relative;
    z-index: 3;
}

.header_class { 
    position: relative;
    z-index: 10;
}

.preload-container {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    visibility: hidden;
    z-index: -1;
}

.scroll-indicator {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 5;
    font-size: 40px;
    color: white;
    visibility: visible; /* Asegura que inicialmente la flecha sea visible */
}
</style>


<div class="js-contenedor-animacion">
    <img id="scroll-frame" class="scroll-frame" alt="Scrolling Frame Animation">
</div>

<div class="scroll-indicator">
    ▼
</div>

<div class="site-footer">
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const frameElement = document.getElementById('scroll-frame');
    const scrollIndicator = document.querySelector('.scroll-indicator');
    const imageBasePath = 'https://www.cuentosartesana.com.mx/wp-content/uploads/2024/05/sirena';
    let preloadedImages = new Array(97);

    const frameNumbers = Array.from({length: 97}, (_, i) => i);

    function preloadImages() {
        return new Promise(resolve => {
            let loadedCount = 0;
            frameNumbers.forEach(i => {
                const img = new Image();
                img.src = ${imageBasePath}${String(i).padStart(3, '0')}.webp;
                img.onload = () => {
                    preloadedImages[i] = img;
                    if (++loadedCount === frameNumbers.length) resolve();
                };
            });
        });
    }

    preloadImages().then(() => {
        frameElement.style.visibility = 'visible';
        frameElement.src = preloadedImages[0].src;

        function enableScrollAnimation() {
            const footer = document.querySelector('.site-footer');
            const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
            const step = scrollHeight / preloadedImages.length;

            window.addEventListener('scroll', () => {
                const frameIndex = Math.min(preloadedImages.length - 1, Math.floor(window.scrollY / step));
                frameElement.src = preloadedImages[frameIndex].src;

                // Oculta tanto la flecha como el frame cuando el footer está lo suficientemente cerca de la ventana
                if (footer.getBoundingClientRect().top <= window.innerHeight) {
                    frameElement.style.visibility = 'hidden';
                    scrollIndicator.style.visibility = 'hidden';
                } else {
                    frameElement.style.visibility = 'visible';
                    scrollIndicator.style.visibility = 'visible';
                }
            });
        }

        enableScrollAnimation();
    });
});
</script>

Inserta el siguiente código (scaled):

<style>
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.scroll-frame { 
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    visibility: hidden;
    z-index: 2;
}

.js-contenedor-animacion { 
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    height: 1000vh;
    position: relative;
    z-index: 1;
}

.site-footer {
    min-height: 100px;
    position: relative;
    z-index: 3;
}

.header_class { 
    position: relative;
    z-index: 10;
}

.preload-container {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    visibility: hidden;
    z-index: -1;
}

.scroll-indicator {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 5;
    font-size: 40px;
    color: white;
    visibility: visible; /* Asegura que inicialmente la flecha sea visible */
}
</style>


<div class="js-contenedor-animacion">
    <img id="scroll-frame" class="scroll-frame" alt="Scrolling Frame Animation">
</div>

<div class="scroll-indicator">
    ▼
</div>

<div class="site-footer">
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const frameElement = document.getElementById('scroll-frame');
    const scrollIndicator = document.querySelector('.scroll-indicator');
    const imageBasePath = 'https://www.cuentosartesana.com.mx/wp-content/uploads/2024/05/sirena';
    let preloadedImages = new Array(97);

    const frameNumbers = Array.from({length: 97}, (_, i) => i);

    function preloadImages() {
        return new Promise(resolve => {
            let loadedCount = 0;
            frameNumbers.forEach(i => {
                const img = new Image();
                img.src = ${imageBasePath}${String(i).padStart(3, '0')}-scaled.webp;
                img.onload = () => {
                    preloadedImages[i] = img;
                    if (++loadedCount === frameNumbers.length) resolve();
                };
            });
        });
    }

    preloadImages().then(() => {
        frameElement.style.visibility = 'visible';
        frameElement.src = preloadedImages[0].src;

        function enableScrollAnimation() {
            const footer = document.querySelector('.site-footer');
            const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
            const step = scrollHeight / preloadedImages.length;

            window.addEventListener('scroll', () => {
                const frameIndex = Math.min(preloadedImages.length - 1, Math.floor(window.scrollY / step));
                frameElement.src = preloadedImages[frameIndex].src;

                // Oculta tanto la flecha como el frame cuando el footer está lo suficientemente cerca de la ventana
                if (footer.getBoundingClientRect().top <= window.innerHeight) {
                    frameElement.style.visibility = 'hidden';
                    scrollIndicator.style.visibility = 'hidden';
                } else {
                    frameElement.style.visibility = 'visible';
                    scrollIndicator.style.visibility = 'visible';
                }
            });
        }

        enableScrollAnimation();
    });
});
</script>

4. Asegúrate de modificar la ruta de las imágenes para que acceda a los frames de tú animación.

const imageBasePath = 'https://www.ejemplo.com/url-a-tus-imagenes';

5. Listo!