Creando “Marquesina” avanzada con la animación CSS3
Hoy vamos a echar un vistazo a “marquesina” Una vez más. De hecho, lo hemos cubierto en nuestro post anterior, que hablaba sobre el uso de -webkit-marquesina propiedad, pero esta vez vamos a tomar este tema un poco más lejos.
En este post, vamos a crear una como una carpa Efecto utilizando la animación CSS3. De esa manera podremos agregar más funcionalidades que no se podrían alcanzar con solo el -webkit-marquesina.
A menos que ya esté familiarizado con el módulo de animación CSS3, le recomendamos que consulte las siguientes referencias antes de continuar con esta documentación:
- Animaciones CSS3 - W3School
- Animaciones CSS - Mozilla Dev. Red
También tenga en cuenta que, por el momento, la animación CSS3 solo puede funcionar en Firefox 8+, Chrome 12+ y Safari 5.0+ con la versión prefijada (-moz- y -webkit-). Sin embargo, solo usaremos la versión oficial de W3C sin el prefijo para evitar un exceso de relleno de este artículo con códigos superfluos.
Abordar el tema de la marquesina
Uno de los problemas con la marquesina es que el texto se mueve continuamente. Este comportamiento es perjudicial para la lectura, y el texto también es difícil de leer. Esta vez, intentaremos crear nuestra propia versión de marquesina y hacerla más fácil de usar. Por ejemplo; En lugar de mover el texto continuamente, Lo detendremos cuando esté completamente visible, para que el usuario pueda leer el texto por un momento..
El Storyboard (tipo de)
Cada creación creativa y de diseño, como un logotipo, una ilustración o un sitio web, generalmente comienza con un boceto. En el campo de la producción de animación, esto se hace con un guión gráfico. Antes de comenzar con cualquier codificación, primero crearemos un tipo de guión gráfico, Para ayudarnos a visualizar nuestra animación..
Como puede ver en el guión gráfico anterior, planeamos mostrar solo dos líneas de texto, las cuales se moverán secuencialmente de derecha a izquierda.
Nuestro guión gráfico no es tan complicado como un guión gráfico para una película de animación real, pero el punto es: ahora podemos visualizar cómo se verá nuestra marquesina..
El marcado HTML
Dado que nuestra animación será simple, el formato HTML también será tan simple como:
Cómo agregar publicaciones relacionadas de WordPress sin complementos
Automatiza tus archivos de Dropbox con acciones
Los estilos basicos
Antes de trabajar en torno a la animación, agreguemos algunos estilos básicos. Empecemos agregando una textura de fondo para el html elemento.
html background: url ('… /images/skewed_print.png'); A continuación, colocaremos la marquesina en el centro de la ventana del navegador y agregaremos algunos detalles como la sombra interior, el color de fondo y los bordes..
.carpa ancho: 500px; altura: 50px; margen: 25px auto; desbordamiento: oculto; posición: relativa; borde: 1px sólido # 000; margen: 25px auto; color de fondo: # 222; -webkit-border-radius: 5px; radio del borde: 5px; -webkit-box-shadow: inserción 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); cuadro-sombra: recuadro 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Luego, colocaremos el texto, que en este caso se incluye dentro de una etiqueta de párrafo, absolutamente, y desde la absoluto la posición hará que el elemento se colapse, tendremos que definir el elemento del ancho para 100% para cubrir el ancho de su padre.
.marquesina p posición: absoluta; Familia tipográfica: Tahoma, Arial, sans-serif; ancho: 100%; altura: 100%; margen: 0; altura de línea: 50px; text-align: center; color: #fff; text-shadow: 1px 1px 0px # 000000; filtro: dropshadow (color = # 000000, offx = 1, offy = 1);
Echemos un vistazo al resultado por un tiempo..
En este punto, hemos terminado con todos los estilos básicos que necesitamos; Eres libre de añadir más o personalizar los estilos. Sin embargo, le sugerimos que siga con nuestra dimensión de marquee especificada (la altura y el ancho) hasta el final del tutorial..
La animación
En resumen, la animación es una presentación de objetos en movimiento. Cada movimiento se define en un marco de tiempo. Entonces, cuando estamos trabajando en animación, estamos tratando principalmente con el Hora. Tomamos en cuenta asuntos como:
- ¿Cuándo empieza a moverse el objeto??
- ¿Cuánto tiempo tarda el objeto en moverse de un punto a otro??
- ¿Cuándo y cuánto tiempo debe permanecer el objeto en un punto dado??
En la animación CSS3, la hora se puede definir con el @keyframe sintaxis. Pero, antes de saltar a esta sección, primero especifiquemos la posición inicial del texto de marquesina.
Hemos planeado que el texto comience desde la derecha y luego se mueva hacia la derecha. Entonces, aquí lo posicionaremos primero a la derecha usando la propiedad de transformación CSS3.
.marquee p transform: translateX (100%);
Recuerda el 100% que hemos definido para nuestro elemento de párrafo era igual a su padre anchura. Así, lo mismo se aplicará aquí; el elemento del párrafo será traducido a la derecha por 100% que en este ejemplo es igual a 500px.
Fotogramas clave
los @keyframe la sintaxis puede ser un poco desconcertante para algunas personas, por lo que aquí hemos creado una guía visual simple para ayudarlo a comprender fácilmente lo que está sucediendo en el @keyframe sintaxis.
Haga clic aquí para ver la versión más grande..
Toda la animación durará aproximadamente 20 segundos y se divide en dos secuencias de duración 10 segundos cada.
En la primera secuencia, el primer texto se deslizará instantáneamente desde la derecha y permanecerá visible momentáneamente para permitir que el usuario lea el texto, mientras que el segundo texto permanecerá oculto. En la segunda secuencia, el primer texto de marquesina se deslizará hacia la izquierda, y el segundo texto se deslizará inmediatamente desde la derecha.
Y aquí están todos los códigos de fotogramas clave que necesitamos aplicar para ejecutar la animación.
@keyframes left-one 0% transform: translateX (100%); 10% transform: translateX (0); 40% transformar: traducirX (0); 50% transformar: traducirX (-100%); 100% transformar: traducirX (-100%); @keyframes left-two 0% transform: translateX (100%); 50% transformar: traducirX (100%); 60% transformar: traducirX (0); 90% transformar: traducirX (0); 100% transformar: traducirX (-100%);
los El izquierdo Los fotogramas clave definirán la primera secuencia de la animación, mientras que izquierda dos fotogramas clave definirán la segunda secuencia.
Aplicando animación a los elementos
Para que la animación funcione, no olvide aplicar la animación al elemento. La primera secuencia se aplica para el primer texto o, en este caso, el primer párrafo, y la segunda secuencia se aplica también para el segundo párrafo..
.marquee p: nth-child (1) animación: left-one 20s easite infinite; .marquee p: nth-child (2) animación: left-two 20s infinite;
Todos hemos terminado con nuestra animación; Veamos los resultados en el navegador..
- Manifestación
- Descargar fuente
Prima
También podemos definir el texto de marquesina para moverlo de arriba a abajo o viceversa, tal como lo hicimos en nuestro post anterior. Aquí está cómo hacerlo; Reemplace nuestros códigos de animación anteriores con este abajo para mover el texto hacia abajo:
.marquee p transform: translateY (-100%); @keyframes down-one 0% transform: translateY (-100%); 10% transformar: traducirY (0); 40% transformar: traducirY (0); 50% transformar: traducirY (100%); 100% transformar: traducirY (100%); @keyframes down-two 0% transform: translateY (-100%); 50% transformar: traducirY (-100%); 60% transformar: traducir Y (0); 90% transformar: traducir Y (0); 100% transformar: traducirY (100%);
Tenga en cuenta que hemos cambiado el Eje x a Eje Y y voltear todo el traducción Valor negativo a positivo y viceversa..
También tenemos renombrado la animación a abajo uno y abajo dos, por lo que tenemos que volver a aplicar el nombre de animación en el elemento de párrafo, así.
.marquee p: nth-child (1) animación: down-one 20s easinity infinito; .marquee p: nth-child (2) animación: down-two 20sisa infinita;
O bien, si quieres moverlo al revés; de abajo hacia arriba. Aquí están todos los códigos que necesitas aplicar:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animación: up-one 20s easinity infinito; .marquee.up p: nth-child (2) animación: hasta dos años 20 infinito; @keyframes up-one 0% transform: translateY (100%); 10% transformar: traducirY (0); 40% transformar: traducirY (0); 50% transformar: traducirY (-100%); 100% transformar: traducirY (-100%); @keyframes up-two 0% transform: translateY (100%); 50% transformar: traducirY (100%); 60% transformar: traducir Y (0); 90% transformar: traducir Y (0); 100% transformar: traducirY (-100%);
- Manifestación
- Descargar fuente
Conclusión
A pesar de la falta de compatibilidad con el navegador actual, la animación CSS3, si se realiza correctamente, sin duda resolverá muchos problemas de usabilidad en el futuro, como lo hemos hecho en este ejemplo. Si solo necesitamos una animación corta para navegadores modernos, usar la animación CSS3 es probablemente mejor que tener que cargar un script jQuery.
Por último, somos conscientes de que este artículo puede ser un poco abrumador para algunas personas, por lo que si tiene alguna pregunta con respecto a este artículo, no dude en publicarlo en la sección de comentarios a continuación..
