Agregando Profundidad Como una Película - Usando Bootstrap 5.3
Bootstrap 5.3 CSS Parallax JavaScript Parallax
Desplázate para ver el efecto
El parallax scrolling hace que los fondos se muevan más lento que el contenido del primer plano cuando te desplazas. Es como mirar por la ventana de un auto: los árboles (fondo) se mueven más lento que la carretera (primer plano). Esto agrega profundidad y hace que los sitios se sientan dinámicos.
HTML con Bootstrap:
<div class="parallax-section d-flex align-items-center justify-content-center text-white">
<div class="container">
<h2 class="display-3 fw-bold">Contenido Parallax</h2>
</div>
</div>
CSS Personalizado para Parallax:
.parallax-section {
background-image: url('...');
min-height: 500px;
background-attachment: fixed; /* ¡CLAVE! */
background-position: center;
background-size: cover;
}
d-flex align-items-center – Centrado flexboxcontainer – Ancho responsivodisplay-3 fw-bold – Tipografíatext-white – Color de textopy-5 – Padding verticalprefers-reduced-motion¿El efecto parallax hace que esta página se sienta más "viva"? ¿Por qué sí o por qué no? ¿Mejora tu comprensión del contenido, o es puramente decorativo? Considera el equilibrio entre interés visual y accesibilidad.
Compara con la sección parallax de arriba
La sección verde de arriba usa background-attachment: scroll (el valor por defecto).
Nota cómo se desplaza con el contenido en lugar de quedarse fija. Este es el enfoque tradicional.
| Técnica | Implementación | Soporte Móvil | Complejidad |
|---|---|---|---|
| Parallax (fijo) | background-attachment: fixed |
Limitado | ⭐ Simple |
| Normal (scroll) | background-attachment: scroll |
✅ Funciona | ⭐ Simple |
¿El efecto parallax realmente mejora la experiencia del usuario, o podría ser una barrera? Considera usuarios con trastornos
vestibulares que pueden experimentar incomodidad con efectos de movimiento. ¿Cómo podríamos ofrecer alternativas o respetar la
media query prefers-reduced-motion?
La sección de arriba usa JavaScript con transform: translateY() para mover tres capas separadas a diferentes velocidades.
Esto crea un efecto de profundidad más sofisticado que CSS puro.
Cada capa tiene un atributo data-speed:
data-speed="0.2" - Se mueve muy lentamente (fondo distante)data-speed="0.5" - Se mueve a velocidad mediadata-speed="0.8" - Se mueve más rápido (más cercano al espectador)
<div class="parallax-js-section">
<!-- Cada capa se mueve a diferente velocidad -->
<div class="parallax-layer layer-back" data-speed="0.2">🌌</div>
<div class="parallax-layer layer-middle" data-speed="0.5">☁️</div>
<div class="parallax-layer layer-front" data-speed="0.8">Texto</div>
</div>
// 1. Seleccionar todas las capas
const parallaxLayers = document.querySelectorAll('.parallax-layer');
// 2. Al hacer scroll, actualizar posición de cada capa
function updateParallax() {
parallaxLayers.forEach((layer) => {
// Leer el valor de velocidad del atributo HTML
const speed = parseFloat(layer.dataset.speed);
// Calcular cuánto mover esta capa
const scrolled = window.pageYOffset;
const yPos = scrolled * speed * 0.5;
// Aplicar el transform
layer.style.transform = `translateY(${yPos}px)`;
});
}
// 3. Escuchar eventos de scroll eficientemente
window.addEventListener('scroll', () => {
requestAnimationFrame(updateParallax);
}, { passive: true });
requestAnimationFrame para rendimientoprefers-reduced-motion
Los efectos parallax pueden causar mareos, vértigo o trastornos vestibulares en algunos usuarios.
Es esencial respetar la media query prefers-reduced-motion.
prefers-reduced-motion es una media query CSS que detecta si un usuario ha solicitado movimiento reducido
en la configuración de su sistema operativo. Los usuarios pueden habilitarlo en:
Esta demo automáticamente deshabilita los efectos parallax cuando los usuarios tienen la reducción de movimiento habilitada:
// 1. Detectar la preferencia de movimiento del usuario
const prefersReducedMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
);
let isReducedMotion = prefersReducedMotion.matches;
// 2. Deshabilitar parallax CSS si es necesario
function handleMotionPreference() {
if (isReducedMotion) {
// Cambiar fondos fijos para que se desplacen normalmente
document.querySelectorAll('.parallax-bg').forEach((el) => {
el.style.backgroundAttachment = 'scroll';
});
}
}
// 3. No inicializar parallax JavaScript si hay movimiento reducido
function initParallax() {
if (isReducedMotion) {
console.log('Parallax deshabilitado: el usuario prefiere movimiento reducido');
return; // Salir sin configurar animaciones
}
// ... resto del código parallax
}
// 4. Escuchar cambios de preferencia durante la sesión
prefersReducedMotion.addEventListener('change', (e) => {
isReducedMotion = e.matches;
// Actualizar animaciones en consecuencia
});
window.matchMedia('(prefers-reduced-motion: reduce)').matchestrue si el movimiento reducido está habilitado, false de lo contrario