Efectos CSS: Enlace autodeslizante
En este efecto el texto de los enlaces se desplaza hacia abajo para desaparecer empujado por otro texto que entra desde arriba.
La idea es como si los caracteres giraran sobre un eje horizontal para aparecer, como en los antiguos contadores mecánicos
Puedes verlo en la imagen de esta página, pasa el ratón por los enlaces Home About Servie y verás como funciona este curioso efecto, por supuesto solo con CSS y HTML, nada de Javascript.
El HTML.
El código HTML para el ejemplo es una sencilla barra de navegación, con varios enlaces dispuestos mediante flex en una linea horizontal.
Hay un contenedor (class: slide-links) para englobar a todos los enlaces del menú
Cada enlace lleva un atributo data-title que contiene el texto que empuja hacia abajo a la cabecera del menú. Puede ser cualquier texto pero procura que ocupe el mismo ancho que la cabecera del menú a la que desplaza.
Importante el texto del enlace debe ir en un bloque span
Y por supuesto este efecto realmente le he llamado enlace deslizante, pero con pequeñas modificaciones puede aplicarse a cualquier texto, básicamente se trata de cambiar la etiqueta a por div
<div class="slide-links">
<div class="itemSlide">
<a href="#" data-title="Home"><span>Home</span></a>
</div>
<div class="itemSlide">
<a href="#" data-title="About"><span>About</span></a>
</div>
<div class="itemSlide">
<a href="#" data-title="Service"><span>Service</span></a>
</div>
</div>
El CSS
En el archivo CSS defines los estilos. Los fundamentales son el pseudoselector ::after que contiene el texto entrante y span que va a ser el texto salietne. Ambos movimientos se producen mediante un transform animado, ambos deben tener la misma duración en la animación.
En esta solución se emplea el layout flex, aunque también puedes usar el grid o técnicas antigua con floats.
.slide-links{
display:flex;
font-size: 2rem;
justify-content: center;
margin-top: 14px;
overflow:hidden;
}
.itemSlide{
position: relative;
overflow:hidden;
padding: 0 0.5rem
}
.itemSlide a{
text-decoration: none;
}
.itemSlide a span, .itemSlide a::after{
transition: all 0.4s;
}
.itemSlide a span{
display:block;
width: fit-content;
transform: translateY(0px);
}
.itemSlide a::after {
content: attr(data-title);
position: absolute;
top: 0;
transform: translateY(-100%);
padding: 0;
width: 100%;
white-space: nowrap;
color: Red;
}
.itemSlide a:hover::after{
transform: translateY(0%);
}
.itemSlide a:hover span{
transform: translateY(100%);
}
}
Con muy pocas modificaciones podrás conseguir que el título del menú se desplaca lateralmente o de abajo arriba. Te lo dejo apra que practiques.