Animaciones de desplazamiento CSS son una excelente manera de dar vida a sitios aburridos y estáticos y brindar al lector una experiencia más interesante, única y moderna.
En esta publicación aprenderás cómo activar animaciones CSS en desplazamiento. (Si está buscando ejemplos, consulte nuestra lista seleccionada de animaciones de texto CSS)
¿Y quien sabe? Tal vez termines haciendo sitios web increíbles como estos sitios web de animación de desplazamiento.
Las animaciones de desplazamiento son cualquier tipo de animación que tiene lugar mientras el visitante se desplaza hacia arriba o hacia abajo en un sitio web. Por lo general, la animación de desplazamiento se activa cuando el elemento aparece a la vista y se puede aplicar a prácticamente cualquier elemento, como texto, imágenes y videos.
Nuestros ojos se sienten naturalmente atraídos por el movimiento, por lo que esta característica atraerá y mantendrá al visitante interesado. Agregar animaciones llamativas a su sitio web hará que se destaque del resto.
Cualquier Animación de desplazamiento CSS por lo general implica el uso de un complemento o biblioteca, pero le mostraremos cómo lograrlo sin ellos. Vamos a por ello.
Vanilla JavaScript, a pesar de su nombre elegante, no es una biblioteca, es simplemente JavaScript antiguo. Así que no te confundas con el nombre “elegante”.
1. Configurar la página
Lo primero es lo primero, crea una página web. Solo un diseño simple con múltiples secciones.
<section class="container">
<h2>Caption</h2>
<div class="text-container">
<div class="text-box">
<h3>Section Text</h3>
<p>Random text</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>Random text</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>Random text</p>
</div>
</div>
</section>
2. Diseñar la página con CSS
Agregue atributos de estilo a su página y use CSS para definir el estilo de animación de desplazamiento. Ahora necesita la clase, revelar para las secciones que está animando y un nuevo nombre de clase, activo, para cuando esté activado.
.reveal{
position: relative;
transform: translateY(150px);
opacity: 0;
transition: 2s all ease;
}
.reveal.active{
transform: translateY(0);
opacity: 1;
}Con esto, los elementos de revelación se ocultarán hasta que se agregue la clase activa. Los atributos de transformación y transición definen el estilo de animación de desplazamiento, con esto, las secciones se desvanecerán desde la parte inferior y se moverán, a lo largo del eje y, hacia la parte superior. Puedes consultar esta guía de transición de CSS si tienes dudas.
3. Cree funciones de JavaScript para orientar los elementos
Necesitaremos estas funciones para asignar el nuevo nombre de clase cuando ingresen a la ventana gráfica y lo necesitamos para activar animaciones CSS en el desplazamiento.
Comience apuntando a todos los revelar elementos usando document.querySelectorAll().
function reveal() {
var reveals = document.querySelectorAll(".reveal")La animación de desplazamiento debe activarse cuando aparece a la vista, por lo que debemos determinar la posición del elemento en la página, es decir, la distancia del elemento desde la parte superior de la ventana gráfica.
getBoundingClientRect().top nos da esta distancia desde la parte superior de la ventana gráfica y window.innerHeight nos dará la altura de la ventana gráfica.
Con esto, podemos establecer las condiciones usando for;
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
}
La variable windowHeight es la altura de la ventana gráfica, elementTop es la distancia del elemento revelado desde la parte superior del punto de vista o la longitud que se ha desplazado, y elementVisible es la altura a la que el elemento debe mostrarse al usuario.
Puede determinar cuándo un elemento se ha desplazado una cierta cantidad de píxeles en la página. Ahora definir una función que muestre los elementos agregando y eliminando la clase activa. Para esto. usar sentencias if y else. Estos establecerán las condiciones para activar la animación.
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}La función completa se verá así;
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
Ahora solo lo pasamos a un detector de eventos para ejecutarlo cada vez que el visitante se desplaza por la página en cualquier dirección.
window.addEventListener("scroll", reveal);
reveal();
¡Eso es todo! has logrado Animación de desplazamiento CSS.
Pero, ¿y si quieres más? En este momento, cada sección tiene la misma animación uniforme. Démosle a cada sección un estilo de animación de desplazamiento diferente.
4. Animar con CSS
Primero, asignaremos clases en el HTML para que luego podamos hacer referencia a ellas en nuestro CSS para crear las animaciones que queramos.
Así es como lo haríamos en nuestra primera sección:
<section class="container">
<h2>Caption</h2>
<div class="text-container reveal fade-bottom">
<div class="text-box">
<h3>Section Text</h3>
<p>Random text</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>Random text</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>Random text</p>
</div>
</div>
</section>
Y lo mismo se aplica a cualquier otra sección que tengamos en nuestro HTML.
Luego, en nuestro CSS podemos asignarles diferentes animaciones así:
.reveal {
position: relative;
opacity: 0;
}
.reveal.active {
opacity: 1;
}
.active.fade-bottom {
animation: fade-bottom 1s ease-in;
}
.active.fade-left {
animation: fade-left 1s ease-in;
}
.active.fade-right {
animation: fade-right 1s ease-in;
}
Defina las animaciones utilizando Keyframes. El atributo de estilo de transformación puede aportar una sensación dinámica a su página y se puede agregar aquí. Otro atributo que puede agregar es la transición, que es el tiempo que tarda el elemento en cargarse por completo, pero los 1 en el atributo de animación logran el mismo resultado.
@keyframes fade-bottom {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-left {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fade-right {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}Puede cambiar los valores de transformación y los atributos de animación para lograr más variedad.
5. Resultado final
Puede animar bloques de texto individuales, dejar que cada párrafo se cargue uno tras otro. Solo asigna el nombre de la clase a lo que quieras, diseña y anima con CSS, espolvorea un poco de J de vainilla y observa la magia.
Para añadir otra práctica ejemplo de uso de animaciones en scrollanimaremos una barra de navegación basada en la posición de desplazamiento de la página.
Podemos usar nuestro ejemplo anterior y agregarle una barra de navegación. Veamos cómo hacerlo.
No dude en consultar cómo crear una barra de navegación fija o fija si desea obtener más detalles.
1. Configure la barra de navegación para animar
Primero, el HTML:
<nav>
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
2. Dale estilo a la barra de navegación con CSS
a {
text-decoration: none;
}
ul {
list-style: none;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: #42455a;
padding: 20px;
text-align: center;
border-bottom: 1px solid #00c2cb;
}
header nav a {
padding: 10px 20px;
font-size: 2rem;
color: #e0ffff;
border-radius: 5px;
letter-spacing: 0.5px;
}Luego agrega el estilo del enlace para cuando la animación se active, puede combinar esto con el estilo de desplazamiento, es su elección;
header nav a:hover,
header nav a.active {
background: #00c2cb;
color: #42455a;
transition: 0.5s ease-out;
letter-spacing: 2px;
}
3. Usar JavaScript para animar nuestra barra de navegación
Primero apunte a todas las secciones y enlaces;
let section = document.querySelectorAll('section');
let menu = document.querySelectorAll('header nav a');Al igual que en el primer ejemplo, desea que la barra de navegación esté animada cuando la sección se desplaza a la vista, para eso, cree un evento de desplazamiento y use forEach para llamar a la función. Para esto, necesitamos declarar los parámetros y establecer la condición.
window.onscroll = () => {
section.forEach(i => {
let top = window.scrollY;
let offset = i.offsetTop - 150;
let height = i.offsetHeight;
let id = i.getAttribute('id');top es la variable para scrollY, que es la longitud o el número de píxeles que se ha desplazado la ventana gráfica. offsetTop es la longitud del elemento desde la parte superior de la ventana gráfica. offsetHeight es la longitud de las secciones y getAttribute() devuelve el valor de los atributos de un elemento, en este caso, la identificación de las secciones.
A continuación, las condiciones de ejecución para que los enlaces se activen a medida que se desplaza hacia abajo en la página. La sección debe estar dentro de la ventana gráfica, por lo que el desplazamiento debe ser menor que la longitud que se desplaza y también, la longitud desde la parte superior de la ventana gráfica y la longitud de la sección o elemento debe ser mayor que la longitud que se ha desplazado;
if (top >= offset && top < offset + height) {
menu.forEach(link => {
link.classList.remove('active');
document.querySelector('header nav a[href*=' + id + ']').classList.add('active');
Ahora, cuando se desplaza a una nueva sección, se cumple la condición y los atributos activos se moverán al siguiente enlace.
Póngalo todo junto y se ve así;
let section = document.querySelectorAll('section');
let menu = document.querySelectorAll('header nav a');
window.onscroll = () => {
section.forEach(i => {
let top = window.scrollY;
let offset = i.offsetTop - 150;
let height = i.offsetHeight;
let id = i.getAttribute('id');
if (top >= offset && top < offset + height) {
menu.forEach(link => {
link.classList.remove('active');
document.querySelector('header nav a[href*=' + id + ']')
.classList.add('active');
});
}
});
};4. Resultado: ¡Animación de desplazamiento CSS + barra de navegación!
Puede agregar el atributo de comportamiento de desplazamiento suave para darle a su sitio web una sensación verdaderamente dinámica. Realice ajustes en la animación y transforme los atributos de estilo y vea qué sucede. Agregue un retraso de transición para hacerlo aún más dramático (consulte cómo configurar este atributo en esta guía de transición de CSS)
Conclusión
El efecto de animación de desplazamiento es una animación popular en los sitios web de hoy y les brinda un aspecto moderno y más dinámico.
Su navegador no soporta la etiqueta de vídeo.
Hay muchas otras formas de crear animaciones en el desplazamiento, como usar componentes como fullPage.js que combinarán animaciones y desplazamiento de una manera hermosa. Fullpage funciona mostrando secciones de pantalla completa cuando el visitante se desplaza, creando una experiencia de usuario bastante única e interesante.
Y hay muchas otras animaciones geniales que puedes usar en el desplazamiento. Simplemente elija el que se adapte a sus necesidades y cree la mejor experiencia de desplazamiento para sus visitantes y su página.
Artículos relacionados
