Cómo construir un sitio web como el de Mac Pro donde el elemento se anima cuando te desplazas

Escribí un ejemplo rápido explicando los conceptos básicos. Absolutamente no es el enfoque más completo y ciertamente requerirá JavaScript y CSS adicionales para lograr el resultado deseado. Sin embargo, le mostrará los conceptos básicos.

Apple tiene un equipo de diseño de clase mundial y esta página es el ejemplo perfecto de eso. No dude en enviarme un tweet con cualquier pregunta que pueda tener.

Descargo de responsabilidad: he escrito este código intencionalmente de la manera más simple, pero comprensible, y probablemente hay enfoques más limpios que podrían escribirse de manera más concisa.

Manifestación

Javascript

// Iniciar función anónima
(función () {

// Encuentra el elemento con la clase .cube
var el = document.querySelector (‘. cubo’);

// Adjunte un detector de eventos en el objeto de ventana que se dispara
// cada vez que se desplaza la página
window.addEventListener (‘scroll’, function () {

// Distancia desde la parte superior de la ventana
var scrollTop = window.scrollY;

// Cuando la ventana se ha desplazado 500 píxeles
// Hacer algo. En nuestro caso, aplique una clase CSS
if (scrollTop> 500) {

// Agrega la primera clase de transición
el.classList.add (‘transición-1’);
}

// Cuando la ventana se ha desplazado 1000 píxeles
// Hacer algo más. En nuestro caso, aplique otra clase CSS
// y elimina la primera transición
if (scrollTop> 1000) {

// Eliminar la primera transición que aplicamos
el.classList.remove (‘transición-1’);

// Aplica la segunda transición
el.classList.add (‘transición-2’);
}
});
}) (); // Fin de la función anónima

HABLAR CON DESCARO A

.envoltura
altura: 3000px
fondo: # f2f2f2

.cubo
-webkit-transition: todos lineales 300ms
transición: todos lineales 300ms
posición: fijo
ancho: 100px
altura: 100 px
Fondo: # 2A98FF
radio de borde: 0

// Estas clases se enfocan intencionalmente al .cube
// elemento. Esto es para reducir la superposición de clases y evitar
// las clases se nombran de manera similar, es decir, ‘hover’, ‘active’
// que puede crear confusión en proyectos grandes
& .transition-1
-webkit-transition: todos lineales 300ms
transición: todos lineales 300ms
ancho: 150px
altura: 150 px
radio de borde: 999 px
fondo: # e74c3c

& .transition-2
-webkit-transition: todos lineales 300ms
transición: todos lineales 300ms
ancho: 0 // Intencionalmente un valor sin unidades porque es más rápido para el navegador calcular
height: 0 // Intencionalmente un valor sin unidades porque es más rápido para el navegador calcular
borde izquierdo: 100 px sólido transparente
borde derecho: 100 px sólido transparente
borde inferior: 100 px sólido # 27ae60
fondo: transparente

HTML