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!