La animación, si se hace correctamente, da vida al sitio web y aumenta la participación.
Cuando haces lo malo, te enfermas.
Un sitio web cautivador lo ayuda a lograr sus objetivos comerciales. Con tantos compitiendo por la atención del consumidor promedio, debe encontrar formas de sobresalir.
La aplicación de efectos de animación de transición sutiles es una forma de impresionar a los visitantes de su sitio.
Un tipo popular de animación que casi cualquier marca puede usar de manera efectiva es la transición de desvanecimiento. Este efecto estilístico permite que las imágenes o el texto aparezcan o desaparezcan gradualmente en su sitio.
Puede usar este estilo para texto, imágenes, desplazamiento o desplazamiento. Estas son las opciones que cubriremos a continuación:
El impacto de la aparición de animaciones puede ser poderoso. Afortunadamente, es bastante fácil de implementar con hojas de estilo en cascada (CSS), el lenguaje de codificación utilizado para mejorar el aspecto de su sitio web.
Transición de desvanecimiento CSS
El desvanecimiento de CSS es un efecto estilístico en el que un elemento, como una imagen, texto o fondo, aparece o desaparece gradualmente en la página.
Para crear estos efectos, utilizará las propiedades de transición o animación de CSS. Al usar las propiedades de transición, solo podrá especificar el estado de inicio y el estado final, no los puntos intermedios. Por ejemplo, puede configurar el div de rojo a púrpura para la transición. Pero para especificar que el div debe ir de rojo a azul y de púrpura a rosa, debe usar las propiedades de animación.
Las transiciones de CSS también requieren un activador (pasar el cursor sobre un elemento, por ejemplo) y las animaciones no. De forma predeterminada, la animación iniciará automáticamente la secuencia cuando se cargue la página. Aunque puede retrasar su hora de inicio con la propiedad animation-delay.
En los ejemplos a continuación, puede ver cómo se usan las propiedades de transición y animación.
También puedes comprobar La principal diferencia entre animaciones y transiciones CSS aprende más.
Como transiciones de desvanecimiento en las películas, las transiciones y animaciones CSS funcionan mejor en algunos sitios web que en otros. Veamos algunas razones por las que le gustaría usar este efecto estilístico.
¿Por qué agregar una animación emergente en su sitio web?
Agregar animaciones CSS a su sitio web no debería ser una ocurrencia tardía. No querrás que sea algo que agregues a la mezcla solo para agregar algo de flash a tu sitio web.
En cambio, cada elección de diseño debe justificarse en términos de lo que contribuye (o distrae) de la experiencia del usuario (UX).
Considere esto: dado que la animación involucra movimiento, es casi imposible ignorar este tipo de diseño. Debido a su exposición visual, debe pensar en cómo implementarlo cuando se encuentra en las primeras etapas del diseño del sitio web.
El propósito de la animación del sitio web va más allá de la estética. La animación se puede utilizar para mejorar el flujo del sitio y crear una interfaz de usuario (UI) más atractiva.
La animación de aparición gradual es solo uno de los muchos tipos de animación que puede implementar en su sitio web. Hay animaciones de desplazamiento, animaciones de carga y docenas de otros ejemplos de animación. Pero la animación emergente en particular ofrece mucha flexibilidad: puede crear un fundido de imagen, un fundido de texto, un fundido de rollover, un fundido de desplazamiento y un fundido de fondo.
Un ejemplo de cada uno se discute a continuación.
Opacidad de la transición CSS
La propiedad de opacidad de CSS se utiliza para determinar qué tan opaco o transparente es un elemento. Los valores de esta propiedad van de 0 a 1, siendo 0 completamente transparente y 1 completamente opaco.
Junto con una propiedad de animación o transición, puede usar la propiedad de opacidad para cambiar un elemento de completamente transparente a completamente opaco (o viceversa) con el tiempo.
Cuando cambie de completamente transparente a completamente opaco, el elemento aparecerá gradualmente en la página. Esto se llama animación de desvanecimiento y también puede usarla en imágenes, texto y otros elementos de la página.
Transición de imagen desvanecida usando CSS
Para demostrar las transiciones de opacidad, veamos la transición de desvanecimiento de la imagen. En este caso, la imagen cambia de transparente a completamente opaca en segundos:
He aquí cómo conseguir este efecto:
1. En su código HTML, cree una clase div desvanecimiento de la imagen.
2. Pon tu foto dentro de ese div. Su código HTML se verá así:
<div class="fade-in-image">
<img src="https://blog.hubspot.com/website/source">
</div>
3. Introduce el tuyo en tu CSS desvanecimiento de la imagen clase de declaración animación: fundido 5s. Puedes personalizar 5s en cualquier momento.
.fade-in-image { animation: fadeIn 5s; }
Esto asigna una animación llamada desaparecer a nuestro div. Eso no hace nada todavía, ya que todavía necesitamos crear el efecto usando fotogramas clave.
4. En uso de CSS @fotogramas clave regla emparejada con desaparecer. En 0%establecer la transparencia en 0. En 100%establecer la transparencia en 1. Esto crea un efecto de desvanecimiento.
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
5. También se recomienda repetir el código anterior utilizando prefijos de proveedores: «-Webkit», «-moz», «-o» y «-ms» – para garantizar la compatibilidad con diferentes navegadores. Por ejemplo, «-Webkit» está diseñado para Chrome, Safari y casi todos los navegadores iOS. Esto se muestra en el código final a continuación:
ver la pluma Transición de imagen desvanecida usando CSS por HubSpot (@hubspot) en CódigoPen.
Todavía puede usar este código CSS con otras imágenes usando desvanecimiento de la imagen La clase CSS en el elemento que contiene la imagen.
Desvanecimiento de transiciones de texto usando CSS
Puede usar las mismas propiedades CSS proporcionadas anteriormente con un pequeño cambio para que el texto se desvanezca.
He aquí cómo crear este efecto:
1. En su código HTML, cree una clase div el texto se desvanece.
2. Pon tu texto en este div. En este ejemplo, crearemos este texto como un párrafo:
<div class="fade-in-text">
<p>Fade-in Text</p>
</div>
3. Ingrese en su CSS el texto se desvanece clase de declaración animación: fundido 5s. Nuevamente, puede ajustar este valor de segundos a cualquier duración. También puede especificar declaraciones de fuentes aquí, por ejemplo Familia tipográfica y tamaño de fuente:
.fade-in-text {
font-family: Arial;
font-size: 150px;
animation: fadeIn 5s;
}
4. Usar @fotogramas clave regla emparejada con desaparecer. En 0%establecer la transparencia en 0. En 100%establecer la transparencia en 1.
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
5. Agregue prefijos de proveedores para la compatibilidad entre navegadores.
Aquí está el código final:
ver la pluma Desvanecimiento de transiciones de texto usando CSS por HubSpot (@hubspot) en CódigoPen.
Puedes usar el texto se desvanece clases en cualquier elemento de texto al que desee aplicar este efecto.
Transición de CSS Fade-in al pasar el mouse
Una forma más interactiva de activar el efecto de desvanecimiento de la animación es activarlo cuando pasa el mouse sobre él. Esto se puede aplicar a texto o imágenes.
Por ejemplo, puede configurar una imagen para que comience con una opacidad del 50 % y aumente a una opacidad del 100 % en un segundo cuando el usuario pasa el cursor sobre ella.
Estos son los pasos para este efecto:
1. En su código HTML, cree una clase div desvanecimiento de la imagen.
2. Pon tu foto dentro de ese div.
<div class="fade-in-image">
<img src="https://blog.hubspot.com/website/source">
</div>
3. Establece la transparencia en tu CSS desvanecimiento de la imagen clase a 50%.
4. DE flotar pseudo-clase, agregar declaraciones cobertura: 100% y transición: apareamiento 1s.
.fade-in-image:hover {
opacity: 100%;
transition: opacity 1s;
}
Aquí está el código final:
ver la pluma Transición de CSS Fade-in al pasar el mouse por HubSpot (@hubspot) en CódigoPen.
Transición de aparición gradual de CSS al desplazarse
Usar una animación de desplazamiento de apariencia es un poco más complicado que nuestros ejemplos anteriores. Su página necesita detectar cuándo un usuario se desplaza, y necesita usar JavaScript para hacer esto. JavaScript registrará el desplazamiento ejecutando CSS para personalizar la animación.
Para obtener el efecto que se muestra arriba, su código debe ser similar al compartido por Staffan Adolfson en CodePen:
ver la pluma desaparecerán en el pergamino de Staffan Adolfson (@ anuncio-empleado) en CódigoPen.
He aquí cómo escribirlo paso a paso:
1. En HTML, cree cuatro (o tantos como desee) elementos de sección. Asigne a cada sección una clase única basada en su color. También agrega una clase etiqueta a todos los elementos de la sección excepto al primero.
<section class="yellow"><h1>foobar</h1></section>
<section class="tag red"><h1>foobar</h1></section>
<section class="tag blue"><h1>foobar</h1></section>
<section class="tag green"><h1>foobar</h1></section>
2. En CSS, establezca el margen y el relleno del cuerpo en 0.
3. Establecer la altura de cada Sección elemento a 100vh «Vh» representa la altura del área visible y configura cada sección para que ocupe la altura completa de la ventana del navegador.
section { height: 100vh; }
4. Para todos los elementos de la clase etiquetadarles declaraciones opacidad: 0 y transición: todo 1s. Si desea que los elementos de la sección se deslicen en la vista, también puede agregar una declaración transformación: traducir (0, 10vh).
.tag {
opacity: 0;
transform: translate(0, 10vh);
transition: all 1s;
}
5. Crea un selector llamado .marca.visible y hacer una declaración cubierta: 1 (y declaración opcional transformar: traducir (0, 0) si usó la declaración de transformación en el paso anterior)
.tag.visible {
opacity: 1;
transform: translate(0, 0);
}
6. Dale a cada elemento de la sección un color de fondo.
.yellow { background-color: lightyellow; }
.red { background-color: lightcoral; }
.blue { background-color: lightblue; }
.green { background-color: lightgreen; }
7. Finalmente, agregue el siguiente código JavaScript (tenga en cuenta que este ejemplo de código también usa jQuery). Este código primero detecta cuando el usuario se está desplazando. A medida que el usuario comienza a desplazarse, el código detecta las partes superior e inferior de la vista y luego verifica cada etiqueta un elemento de sección que determina si el marcador está dentro de la ventana gráfica (es decir, es visible en la pantalla).
Si un elemento de sección es visible, le asigna una clase visible (que, si recuerdas, tiene una opacidad de 1). Si la entidad de la sección no está visible, la elimina. visible clases de este elemento de sección.
$(document).on("scroll", function() {
var pageTop = $(document).scrollTop();
var pageBottom = pageTop + $(window).height();
var tags = $(".tag"); for (var i = 0; i < tags.length; i++) {
var tag = tags[i];
if ($(tag).position().top < pageBottom) {
$(tag).addClass("visible");
} else {
$(tag).removeClass("visible");
}
}
});
Con un conocimiento básico de JavaScript, la creación de este tipo de impresionantes efectos de animación es factible y común en muchos sitios web.
Desvanecimiento de CSS de fondo
También puede crear un efecto de desvanecimiento del color de fondo que no requiera que el usuario se desplace hacia abajo en la página. En su lugar, utilice las propiedades de animación CSS para diseñar el elemento del cuerpo.
Por ejemplo, puede configurar el fondo para que cambie de amarillo a verde en seis segundos.
Aquí está cómo hacerlo.
1. En CSS, asigne tres declaraciones al contenido del documento: el color de fondo inicial, la animación y el modo de relleno de la animación, que evita que el color se restablezca a amarillo cuando finaliza la animación.
body {
background: #FCE97F;
animation: fadeBackground 6s;
animation-fill-mode: forwards;
}
2. Usar @fotogramas clave una regla para establecer el color de fondo inicial y el color de fondo final.
@keyframes fadeBackground {
from { background-color: #FCE97F; }
to { background-color: #2EB07B; }
}
Así es como se ve el código final:
ver la pluma Desvanecimiento de CSS de fondo por HubSpot (@hubspot) en CódigoPen.
Si tiene problemas aquí, consulte nuestra publicación sobre soluciones cuando las animaciones CSS no funcionan.
Cree animaciones de fundido para su sitio web.
La animación de fundido puede ser una herramienta poderosa para contar una historia significativa y aumentar el compromiso. Pero no agregue animaciones innecesarias a su sitio web solo por el uso de animaciones.
Concéntrese en usar animaciones emergentes para enfatizar ciertos elementos y crear transiciones más suaves, así como mejorar la experiencia general del usuario de su sitio web.
Nota del editor: esta publicación se publicó originalmente en febrero de 2020 y se actualizó para que sea más completa.
