La mayoría de los sitios web modernos utilizan hojas de estilo en cascada (CSS). Algunos sitios usan funciones básicas de CSS, mientras que otros usan funciones avanzadas para hacer que sus aplicaciones web sean más atractivas.
Agregar efectos llamativos puede mejorar la tasa de clics en su sitio web, provocar que los usuarios tomen medidas o incluso aumentar la cantidad de tiempo que los usuarios pasan en su sitio web.
En este artículo, discutiremos qué son los efectos de desplazamiento CSS, cómo pueden hacer que su sitio web sea llamativo, cómo puede implementar estos efectos y daremos ejemplos de sitios web que implementan efectos de desplazamiento CSS con clase.
¿Qué es el efecto de desplazamiento de CSS?
El efecto de desplazamiento de CSS se produce cuando el usuario de un sitio web se desplaza sobre un elemento con el cursor (puntero del mouse). El resultado puede ser un cambio de color, texto u otros efectos animados. Dichos efectos se agregan a un sitio web para mejorar la interactividad y hacerlo más navegable.
Los efectos de desplazamiento de CSS pueden aparecer como transiciones o animaciones.
Transiciones
Dichos efectos le permiten cambiar la apariencia o el comportamiento de un elemento en una página web. Sin embargo, debe haber un disparador, como un usuario que se desplaza sobre un elemento específico. Las transiciones se mueven del estado inicial al estado final después del disparador. Una transición solo se ejecuta una vez y no le permite especificar puntos intermedios.
Animaciones
Estos efectos tienen fotogramas clave, que les permiten repetir hacia atrás, hacer un bucle y pasar del estado inicial al estado final. Estos efectos también tienen un estado intermedio. Un fotograma clave indica cómo se representan los elementos animados en un momento determinado de la secuencia de animación.
Tipos de efectos de desplazamiento CSS
Los efectos de desplazamiento de CSS se pueden aplicar a texto, imágenes, videos, enlaces o botones. Las siguientes son algunas de las principales aplicaciones:
#1. Efectos de desplazamiento de texto
Dichos efectos son adecuados cuando desea crear un sitio web minimalista. El diseño debe ser simple pero transmitir el mensaje. Puede venir en las siguientes formas:
- Efecto de texto terminal: este efecto imita la escritura en un procesador de texto. Las palabras parpadearán, pero la velocidad debe ser lo suficientemente adecuada para permitir que los usuarios las lean.
- Animación de texto: El texto en este efecto puede fluir hacia arriba, hacia abajo o hacia los lados.
#2. Efectos de desplazamiento del enlace
Un sitio web típico tendrá varios hipervínculos que redirigirán a los usuarios a diferentes páginas. Dichos enlaces siguen aumentando a medida que crece el sitio web. Los efectos de desplazamiento de enlace pueden venir en estas formas;
- Cambiando el color del enlace: El color del enlace de algo como azul a rojo.
- Cambiando el color de fondo: Este efecto cambia el color de fondo del enlace.
- Intercambio de texto: Este efecto cambia el contenido del icono del enlace.
#3. Efectos de desplazamiento de botón
Los botones son importantes en los sitios web, ya que nos permiten enviar formularios y obtener acceso a varias secciones de una página web. Los efectos de desplazamiento sobre los botones se pueden implementar en forma de:
- Cambio de color del texto: El color del texto en un botón que dice "Haz clic en mí" puede cambiar de rojo a verde al pasar el mouse por encima.
- Cambiando el color de fondo: Los botones HTML son transparentes por defecto. Los desarrolladores pueden agregar un color de fondo a dichos botones. Al pasar el mouse, el color de fondo puede cambiar de marrón a verde.
- Efecto rebote: Puede agregar un atractivo visual para el usuario diseñando el botón para que rebote al pasar el mouse.
#4. Efectos de desplazamiento de imagen
- Intercambiar imágenes: Puede crear un carrusel de imágenes que se intercambian al pasar el mouse.
- Fundido de entrada/salida de imágenes: Tal efecto hace que las imágenes sean más claras a medida que pasa el mouse sobre ellas.
- Cambio de prueba: Es muy común encontrar sitios web que ocultan varias descripciones en sus imágenes. Por ejemplo, un sitio web de viajes puede hacer que los detalles del hotel sean visibles después de que un usuario se desplace.
Ahora podemos explicar algunos efectos de desplazamiento de CSS con clase para su sitio web.
Change Background Color on Hover
Este efecto se puede aplicar a botones, enlaces o texto que se muestra en una página web. Una vez que el cursor de su mouse toca el objetivo, el color de fondo cambia.
Puede cambiar el fondo de su texto en estos pasos;
- Utilice la herramienta
:hoverpseudo-clase para lograr tus objetivos - Cree un elemento como un div, botón o enlace donde implementará el efecto de desplazamiento.
Este es un código de muestra para implementar estos efectos.
Archivo HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
Hover and see me change!!!!!
</div
</body>
</html>Archivo CSS
div:hover {
background-color: rgb(255, 0, 0);
width: 18rem;
align-items: center;
text-align: center;
}Antes del vuelo estacionario, la salida será;
Después de pasar el mouse, la salida será;
Change Link Color on hover
Los enlaces son elementos importantes en una página web, ya que nos ayudan a pasar de una página a otra. Usamos etiquetas HTML para crear hipervínculos. Cambiar el color del enlace al pasar el mouse aumenta la visibilidad de los enlaces.
Necesitamos lo siguiente para demostrar este efecto:
- Cree una etiqueta de selector en su
:heador:bodyetiqueta - Definición
:hoverpseudoclase
Puede usar este código de muestra para mostrar un enlace que cambia de verde a naranja al pasar el mouse por encima.
Archivo HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<a href="#">Hover over me and see the magic</a>
</div
</body>
</html>Archivo CSS:
a:link {
color: rgb(0, 255, 34);
}
a:hover {
color: #ff8400;
}Salida antes del desplazamiento;
Salida después del efecto de desplazamiento;
Sliding Highlight on Hover
Cuando un usuario se desplaza, este efecto agregará una sombra de cuadro al enlace en línea. El color del enlace se modificará en el proceso. Para lograr esto, puede seguir estos pasos como su guía;
- Agregue relleno alrededor del enlace (algo como 0rem puede funcionar)
- Agregue un margen de un valor similar. Esto evita que el relleno interrumpa el flujo de texto.
Puede tener esto como su archivo html simple:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<a href="#">Geekflare</a>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>Este puede ser su archivo CSS;
a {
box-shadow: inset 0 0 0 0 rgb(255, 21, 0);
color: #ff4000;
padding: 0 .25rem;
margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
color: #fff;
box-shadow: inset 200px 0 0 0 #ff4000;;
}
a {
color: #ff4000;
font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
}
body {
display: grid;
}Antes del efecto de desplazamiento;
Después del efecto de desplazamiento;
Rainbow Underline on hover
Este efecto agrega un subrayado de múltiples colores al texto al pasar el mouse.
- Utilice la herramienta
:linear-gradientpseudo-clase para crear una transición suave entre diferentes colores. - Utilice la herramienta
:hoverpseudo-clase para lograr sus objetivos. - Cree un elemento de enlace donde implementará el efecto de desplazamiento.
Este es un código de muestra para implementar el subrayado del arco iris al pasar el mouse:
Archivo HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>This is <a href="#">Rainbow</a> hover effect. </p>
</div
</body>
</html>Archivo CSS:
p {
max-width: 800px;
margin: auto 15%;
line-height: 1.1;
font-size: 78px;
font-weight: 700;
letter-spacing: .0125em;
color: black;
}
a {
display: inline-block;
position: relative;
text-decoration: none;
color: inherit;
z-index: 1;
}
a::after {
content: '';
position: absolute;
left: 0;
bottom: .07em;
height: .1em;
width: 100%;
background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
z-index: -1;
transition: height .25s cubic-bezier(.6,0,.4,1);
}
a:hover::after {
height: .2em;
}
p {
font-size: 58px;
}Antes de flotar;
Después de flotar;
Text Swapping on hover
El intercambio de prueba es cuando el texto se intercambia con otro contenido o texto cuando un usuario pasa el cursor sobre el objetivo. Un ejemplo perfecto es cuando un sitio web tiene un "comentarios" enlace. Después de pasar el mouse, el texto del enlace puede cambiar a "Comentario.
Para implementar el intercambio de texto al pasar el mouse, necesita lo siguiente:
::beforey::afterpseudo-elementos: estos crean un elemento separado para que el texto se intercambie después de pasar el mouse.:hoverPseudoelemento que cambia la posición o la visibilidad del contenido al pasar el mouse
Esta es una ilustración de cómo implementar este efecto:
Archivo HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button><span>99 comments</span></button>
</body>
</html>Archivo CSS:
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Add a Comment" }Antes de flotar;
Después de flotar;
Sitios web con excelentes efectos de desplazamiento
Si desea tomar prestadas ideas e inspirarse, estos son algunos sitios web que puede consultar.
#1. Canva
Canva es un gran nombre en el mundo del diseño, ya que ayuda a los no diseñadores a crear hermosos diseños. Este sitio web tiene impresionantes efectos de desplazamiento, desde su inicio hasta las páginas de productos. Todo comienza con un fondo oscuro y borroso en la página de inicio. Sin embargo, el fondo se borra al pasar el mouse por encima y las imágenes se vuelven visibles. Los efectos de desplazamiento también aparecen a medida que selecciona diferentes plantillas de diseño.
#2. Haus
Haus es un ejemplo perfecto de un sitio que implementa el subrayado al pasar el mouse, el intercambio de texto al pasar el mouse y el cambio del color de fondo al pasar el mouse.
#3. Obras principales
Obras principales implementa animaciones y transiciones para sus efectos de desplazamiento. Algunos efectos notables son intercambiar texto al pasar el mouse, cambiar el color del texto y hacer zoom en el texto y las imágenes al pasar el mouse.
Conclusión
La elección de los efectos de desplazamiento para agregar a su sitio web dependerá del tipo de sitio web, habilidades, gustos y preferencias. Algunos sitios, como las plataformas de arte y cupones, pueden aceptar efectos de desplazamiento superllamativos. Por otro lado, los sitios web legales y médicos pueden optar por efectos de desplazamiento mínimos.
Por lo tanto, debe averiguar qué funciona para su sitio web. Sin embargo, asegúrese de que estos efectos se alineen con los colores de su marca. Echa un vistazo a nuestro mejores recursos CSS para pulir tus habilidades de CSS.
