Contenido
- 01. Efecto de texto renovable
- 02. Crear CSS
- 03. Posicionar la palabra
- 04. Arriba y arriba
- 05. Flotando hacia abajo
- 06. Automático para el pueblo
- 07. Agregar clases alternas
Los enlaces de rollover son una excelente manera de captar la atención de un usuario, especialmente si hace algo inusual u original. Middle Child tiene un gran efecto, que rara vez se ve en otros lugares, que captura cada letra y las divide con animación, que se activa cuando el visitante se desplaza sobre la palabra. La animación ayuda a transmitir el carácter lúdico de la marca de sándwiches.
En este artículo, le mostramos cómo recrear el efecto en su sitio. Para obtener más inspiración, eche un vistazo a nuestra guía de los mejores ejemplos de animación CSS (con instrucciones sobre cómo codificarlos). Para algo un poco diferente, pruebe con uno de los mejores creadores de sitios web o nuestra selección del mejor almacenamiento en la nube. Y si está haciendo que su sitio sea más complejo, asegúrese de que su alojamiento web sea el adecuado.
01. Efecto de texto renovable
Uno de los mejores efectos de texto en el sitio web de Middle Child son los efectos de rollover en el menú, donde las letras se dividen en el texto y giran ligeramente. Comience esto con algunas etiquetas HTML simples.
div> div> Desayuno / div> / div>
02. Crear CSS
Use un archivo CSS separado o etiquetas de estilo para agregar las siguientes reglas CSS y hacer que la página llene el tamaño completo del navegador asegurándose de que el cuerpo y el contenedor tengan la altura completa disponible.
cuerpo {ancho: 100%; altura: 100%; margen: 0; acolchado: 0; } .wrapper {pantalla: cuadrícula; altura: 100%; }
03. Posicionar la palabra
La palabra clase centra la palabra en la cuadrícula. Cualquier texto que tenga la palabra la clase puede tener esto aplicado. La arriba la clase se aplicará a todas las demás letras y estas se moverán hacia arriba.
.word {tamaño de fuente: 3em; margen: auto auto; } .word .up {display: inline-block; transformar: translate3d (0px, 0px, 0px) rotar (0deg); transición: todos los 0,5 segundos de entrada y salida; }
04. Arriba y arriba
Ahora el abajo La clase comparte configuraciones muy similares a las arriba pero el hover muestra el movimiento hacia arriba para el arriba dese la vuelta. También se gira ligeramente hacia arriba para mejorar el aspecto.
.word .down {display: inline-block; transformar: translate3d (0px, 0px, 0px) rotar (0deg); transición: todos los 0,5 segundos de entrada y salida; } .word: hover .up {transform: translate3d (0px, -8px, 0px) rotate (12deg); color: # 058b05}
05. Flotando hacia abajo
Cuando el usuario se desplaza sobre el texto, la clase hacia abajo mueve el texto hacia abajo. Más adelante, en JavaScript, el texto se dividirá en intervalos separados y las clases se agregarán automáticamente a intervalos alternativos.
.word: hover .down {transform: translate3d (0px, 8px, 0px) rotar (-12deg); color: # 058b05; }
06. Automático para el pueblo
Es un poco complicado tener que poner cada letra en intervalos alternos con diferentes clases, por lo que automatizaremos el proceso haciendo que JavaScript consulte el selector y tome cada letra. Aquí el str La variable toma la letra actual mientras recorre el texto.
script> var elementos = document.querySelectorAll (’.word’); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elementos [i] .innerHTML = ’’;
07. Agregar clases alternas
Ahora otro bucle coloca cada letra en su propio elemento span y agrega el arriba o abajo clase a los tramos. Si observa esto en el navegador, verá el texto dividido por cada letra hacia arriba y hacia abajo, mientras gira ligeramente.
Puede ver el efecto en acción en el sitio web de Middle Child.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); elementos [i] .appendChild (spn); spn.textContent = str [j]; let pos = (j% 2)? 'arriba abajo'; spn.classList.add (pos); }} / script>
Este artículo se publicó originalmente en una revista de diseño web creativo. Diseñador web.Comprar número 286 o suscribir.
