¿Qué es el Parallax Scrolling?
El parallax scrolling hace que los fondos se muevan más lento que el contenido en primer plano mientras desplazas. Es como mirar por la ventana de un auto: los árboles (fondo) se mueven más lento que la carretera (primer plano). Esto añade profundidad y hace que los sitios se sientan dinámicos.
Técnica 1: Fondo Fijo CSS
La propiedad CSS clave es
background-attachment: fixed
. Esto mantiene la imagen de fondo estacionaria mientras el contenido se desplaza sobre ella.
.parallax-bg {
background-image: url('image.jpg');
min-height: 400px;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
¿Por Qué Usarlo?
-
Compromiso:
Hace que los sitios sean más atractivos (los usuarios se desplazan más tiempo)
-
Narración:
Ayuda a contar una historia visualmente a través de capas
-
Profundidad:
Crea una sensación de espacio 3D en una pantalla 2D
⚠️ Precauciones:
- Puede causar mareos en algunos usuarios
- Puede afectar el rendimiento en dispositivos antiguos
- No funciona bien en móviles (iOS Safari no lo soporta)
- Úsalo con moderación para obtener el mejor efecto
Reflexión Atelier:
¿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 el interés visual y la accesibilidad.
Comparación: Scroll Normal
La sección anterior usa
background-attachment: scroll
(el valor por defecto). Nota cómo se desplaza con el contenido en lugar de permanecer fijo. Este es el enfoque tradicional.
Diferencias Clave:
-
Parallax (fijo):
El fondo permanece en su lugar, el contenido se mueve sobre él
-
Normal (scroll):
El fondo y el contenido se mueven juntos a la misma velocidad
Consejo:
¡Desplázate hacia arriba y hacia abajo en esta página varias veces para realmente sentir la diferencia entre las secciones púrpura (parallax) y verde
(normal)!
Consideraciones para Móviles
En dispositivos móviles,
background-attachment: fixed
a menudo no funciona debido a limitaciones del navegador. El CSS en este demo cambia automáticamente a scroll regular en
pantallas más pequeñas para asegurar una buena experiencia para todos los usuarios.
Pregunta Crítica de Diseño:
¿El efecto parallax realmente mejora la experiencia del usuario, o podría ser una barrera? Considera a los usuarios con trastornos
vestibulares que pueden experimentar incomodidad con los efectos de movimiento. ¿Cómo podríamos ofrecer alternativas o respetar la
media query
prefers-reduced-motion
?
Técnica 2: Parallax con JavaScript y Múltiples Capas
La sección anterior usa
JavaScript con
transform: translateY()
para mover tres capas separadas a diferentes velocidades. Esto crea un efecto de profundidad más sofisticado que el CSS puro.
Entendiendo el Sistema de 3 Capas
Cada capa tiene un atributo data-speed:
- Capa trasera (🌌):
data-speed="0.2" - Se mueve muy lentamente (fondo distante)
- Capa media (☁️):
data-speed="0.5" - Se mueve a velocidad media
- Capa frontal (texto):
data-speed="0.8" - Se mueve más rápido (más cerca del espectador)
Paso 1: Estructura HTML con data-speed
<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>
Paso 2: JavaScript lee data-speed y aplica transform
// 1. Seleccionar todas las capas
const parallaxLayers = document.querySelectorAll('.parallax-layer');
// 2. En el scroll, actualizar la 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 la transformación
layer.style.transform = `translateY(${yPos}px)`;
});
}
// 3. Escuchar eventos de scroll eficientemente
window.addEventListener('scroll', () => {
requestAnimationFrame(updateParallax);
}, { passive: true });
Ventajas de JavaScript Parallax:
-
Control Preciso:
Puedes controlar exactamente qué tan rápido se mueve cada capa
-
Múltiples Elementos:
Mueve cualquier elemento HTML, no solo fondos
-
Funciona en Móvil:
A diferencia de
background-attachment: fixed
-
Animaciones Complejas:
Combina con opacidad, escala, rotación, etc.
⚠️ Consideraciones:
- Requiere JavaScript (fallback si JS está deshabilitado)
-
Usa
requestAnimationFrame
para mejor rendimiento
-
Respeta
prefers-reduced-motion
♿ Accesibilidad: Respetando las Preferencias del Usuario
⚠️ Importante: Sensibilidad al Movimiento
Los efectos parallax pueden causar mareos, náuseas o trastornos vestibulares en algunos usuarios.
Es esencial respetar la media query prefers-reduced-motion.
¿Qué es prefers-reduced-motion?
prefers-reduced-motion es una media query de CSS que detecta si un usuario ha solicitado movimiento reducido
en la configuración de su sistema operativo. Los usuarios pueden habilitar esto en:
- macOS: Preferencias del Sistema → Accesibilidad → Pantalla → Reducir movimiento
- Windows: Configuración → Accesibilidad → Pantalla → Mostrar animaciones
- iOS: Ajustes → Accesibilidad → Movimiento → Reducir movimiento
- Android: Configuración → Accesibilidad → Eliminar animaciones
Cómo este Demo lo Respeta
Este demo desactiva automáticamente los efectos parallax cuando los usuarios tienen habilitada la reducción de movimiento:
// 1. Detectar la preferencia de movimiento del usuario
const prefersReducedMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
);
let isReducedMotion = prefersReducedMotion.matches;
// 2. Desactivar parallax CSS si es necesario
function handleMotionPreference() {
if (isReducedMotion) {
// Cambiar fondos fijos a scroll normal
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 desactivado: 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 según corresponda
});
Pruébalo Tú Mismo
- Abre las DevTools del navegador (F12)
- Ve a la pestaña Console y escribe:
window.matchMedia('(prefers-reduced-motion: reduce)').matches
- Devuelve
true si la reducción de movimiento está habilitada, false en caso contrario
- Habilita "Reducir movimiento" en la configuración de tu sistema operativo y recarga esta página
- ¡Nota cómo todos los efectos parallax están desactivados!
💡 Mejores Prácticas para Accesibilidad
- Siempre respeta prefers-reduced-motion - Es una solicitud del usuario, no una sugerencia
- Proporciona alternativas: Asegura que el contenido sea accesible sin movimiento
- No solo reduzcas: Desactiva el movimiento por completo cuando se solicite
- Prueba exhaustivamente: Verifica con la reducción de movimiento habilitada
- HTML Semántico: Usa una estructura adecuada que funcione independientemente de los efectos
Técnica 3: Capas de Imágenes (Multi-layer)
La sección anterior combina múltiples imágenes de fondo moviéndose a diferentes velocidades para crear un efecto de
profundidad 3D.
📊 Comparación de las 3 Técnicas:
| Técnica |
Implementación |
Soporte Móvil |
Complejidad |
| CSS Fixed |
background-attachment: fixed |
❌ Limitado |
⭐ Muy simple |
| JS Transform |
transform: translateY() |
✅ Funciona |
⭐⭐ Medio |
| Multi-layer |
Múltiples elementos + JS |
✅ Funciona |
⭐⭐⭐ Avanzado |
Reflexión Final:
¿Cuál técnica prefieres? La técnica CSS es perfecta para sitios simples. JavaScript ofrece control total pero
requiere más código. Multi-layer crea los efectos más impresionantes pero puede afectar el rendimiento.
La mejor elección depende de tu proyecto específico.