Testimonios de clientes son una característica popular del sitio web. Aportan credibilidad a una empresa e infunden un sentido de confianza. Si tus otros clientes te quieren tanto, ¡yo también podría hacerlo!
Como un experimento divertido, hoy vamos a preparar una pequeña sección de citas que rotará entre varias citas diferentes utilizando solo CSS. A lo largo del camino, aprenderemos todo sobre cómo planificar y crear secuencias de fotogramas clave de varios pasos. Empecemos.
El HTML
Para iniciar este proyecto, debemos decidir sobre la estructura de nuestra cotización. Por lo general, una cita del cliente tendrá tres partes del texto: el nombre del cliente, de dónde son y lo que dijeron.
Con esto en mente, podemos crear un contenedor de cotización que tiene tres piezas diferentes. El encabezado mantendrá el nombre del cliente, el elemento pequeño presumiblemente retendrá el nombre de la compañía de la que proviene el cliente o alguna otra información relacionada, y el párrafo con el texto de la cita.
Debido a que usamos tres elementos diferentes, no necesitaremos ningún gancho adicional y podremos apuntar fácilmente a cada parte de la cita en nuestro CSS. Como nota al margen, elegí arbitrariamente un h3 aquí simplemente porque h1 y h2 normalmente se usan para otros propósitos. Siéntete libre de cambiar esto a lo que quieras.
Ahora que hemos descubierto nuestra estructura, es hora de expandirla en tres citas diferentes. Para mostrar la versatilidad de este proyecto, decidí llenar mi texto con las últimas palabras de algunas personas famosas. Un poco morboso, pero como marcador de posición lo haré!
CSS de inicio
Una vez que haya resuelto su HTML, salte a su CSS e ingrese algo similar al código a continuación. Básicamente, establecí un patrón de fondo interesante y definí el contenedor que contendrá las comillas.
Cotizar estilos
A continuación es el momento de diseñar los divs de cotización. Usé el posicionamiento absoluto aquí para que las tres citas ocupen el mismo espacio. Por defecto, crearán una pila vertical pero no queremos eso en absoluto. En nuestro producto terminado, una cita se desvanecerá, luego otra se desvanecerá. En consecuencia, querremos que estén en el mismo lugar.
También puse la opacidad a cero para que todas las comillas queden ocultas por defecto. La opacidad es una propiedad peculiar que realmente es un dolor de cabeza para trabajar. Hablaremos de esto un poco más tarde. Lo que hay que tener en cuenta ahora es que no verá nada con la opacidad en cero, por lo que querrá comentar temporalmente esta parte mientras diseña la sección de citas.
Citar los estilos de texto
Ahora que tenemos el estilo del contenedor de cotización general, es hora de tomar cada pieza de texto y personalizarla individualmente. Para esta demostración, haremos que el texto sea bonito y grande, así que configure el h3 a 55px y el pequeño a 18px, luego use Helvetica para la familia de fuentes.
Nuestra tarea con el párrafo es mucho más compleja. No solo necesitamos un estilo en un cuadro, sino que también debemos eliminarlo de la pila y pegarlo a la derecha del otro contenido.
Para que esto suceda, necesitamos hacer varias cosas, por lo que he dividido mis estilos para esto en tres pasos diferentes (que se muestran a continuación).
Para el primer paso, me ocupé de la? Icing? o cosas visuales estándar. Puse el fondo en blanco, configuré la fuente y alineé el texto al centro. Luego manejé el posicionamiento y el tamaño de la caja real mediante el uso de un poco de relleno y posicionamiento absoluto. Terminé todo esto con un radio de borde opcional, que redondea muy bien nuestras esquinas.
Control del progreso
Si verificamos nuestro progreso asegurándonos de que una cita sea visible, ¡nos vemos muy bien! Sin embargo, nuestra cita está sentada en una vieja caja simple. Nos estamos perdiendo el pequeño triángulo que lo hace parecer un bocadillo.
Añadiendo el triángulo
Para agregar ese pequeño triángulo, tenemos que recurrir al: después del pseudo-elemento. Básicamente, creamos un elemento vacío, lo colocamos en el lado izquierdo y aplicamos un poco de vudú de borde complicado.
Como puede ver, eso nos da el efecto que buscamos, bastante limpio, ¿eh?
Animate That Sucka
Ahora que hemos resuelto nuestro estilo visual y nuestro posicionamiento, es hora de encontrar una manera de desvanecer una cita y hacer estallar en otra y repetir este proceso en un bucle infinito. Podríamos y deberíamos usar jQuery, pero hoy estamos tratando de resolverlo con CSS puro, así que recurriremos a las animaciones de fotogramas clave.
Voy a ser brutalmente honesto aquí, hago este tipo de cosas casi todos los días y aún así me tomó una eternidad encontrar la secuencia correcta que debo usar para hacer que los fotogramas clave aparezcan y desaparezcan en el momento adecuado. Jugueteaba y jugueteaba y seguía teniendo superposiciones y resultados incómodos que no eran en absoluto lo que quería.
Te digo esto para que sepas que no estás solo si aún te encuentras golpeando paredes que son difíciles de superar. Sin embargo, al final logré que mi cerebro lento envolviera el concepto.
Soy un pensador visual, así que hice una tabla burda para ver cómo funciona todo. Básicamente, queremos apilar estas animaciones para que solo una cita sea visible en un momento dado. Para lograr esto, crearemos una animación de treinta segundos y la dividiremos en tres partes. La primera y la última parte tendrán una opacidad de cero y la segunda parte tendrán una opacidad de uno.
Como puede ver, tendremos que retrasar la hora de inicio de la segunda animación en diez segundos y la hora de inicio de la tercera animación en veinte segundos. De esta manera, si dibuja una línea vertical en cualquier punto del gráfico, no se mostrará más de una cita al mismo tiempo.
Ahora, cuando implementé esto, no me gustó cuánto tardaron las citas en aparecer y desaparecer. Quiero un rápido desvanecimiento, un largo período de visibilidad y un rápido desvanecimiento. Para hacer esto, simplemente necesitamos agregar un par de fotogramas clave más. Aquí está la secuencia que se me ocurrió:
Solo necesitamos configurar una secuencia, pero la aplicamos a las tres citas separadas de tres formas diferentes. Básicamente, la única diferencia es el valor de retardo, que hace que la animación espere unos segundos antes de comenzar.
¡Eso es todo al respecto! Cuando se carga la página, la primera cita se desvanecerá, luego desaparecerá a medida que la segunda cita aparezca (y así sucesivamente).
Compatibilidad del navegador
En este punto, probablemente esté gritando a la pantalla de su computadora que soy un idiota que solo usa prefijos de Webkit. En verdad, solo hice esto para mantener las cosas comprensibles. Ahora que lo tenemos todo resuelto, podemos usar a nuestro viejo amigo Prefixr para expandirlo. Cuando hacemos esto, aquí está el trozo de código gigante que se escupe:
Como mencioné anteriormente, nuestro uso de la propiedad de opacidad es un poco sospechoso porque el soporte de opacidad es un desastre. Afortunadamente, Prefixr toma la iniciativa y trata de garantizar que nuestro código esté preparado para funcionar en tantos navegadores como sea posible. Desafortunadamente, se exagera un poco al insertar todas esas propiedades de filtro donde no necesariamente se necesitan, por lo que un poco de limpieza podría ser una buena idea.
Selectivizr
Usamos algunos selectores avanzados en el tutorial, así que mientras estamos en el tema de la compatibilidad con navegadores, debo señalar que deberá agregar Selectivizr y jQuery a su proyecto para asegurarse de que los navegadores más antiguos los entiendan.
Soporte de fotogramas clave
Aquí está el truco, hemos pasado por todo esto para asegurarnos de que hemos maximizado la compatibilidad de nuestro navegador con los selectores y la opacidad, pero al final, IE seguirá negándose a seguir adelante porque no hay soporte de fotogramas clave hasta IE 10. .
Obviamente, JavaScript será la respuesta aquí si vas a utilizar esto en el mundo real. Puede hacerlo todo en JS o simplemente usarlo como respaldo para los navegadores que no admiten fotogramas clave.
Manifestación
Aquí está la demostración en vivo. Asegúrese de esperar un momento cuando lo inicie, ¡recuerde que la animación completa dura treinta segundos!
Manifestación: Haga clic aquí para lanzar
Conclusión
Los fotogramas clave han recorrido un largo camino desde los días en que solo eran compatibles con los navegadores Webkit. Sin embargo, tenga en cuenta que, debido a nuestro viejo amigo IE, todavía son más divertidos para jugar. que algo en lo que debes apostar para proyectos importantes.
¡Deja un comentario a continuación y haznos saber si disfrutaste este tutorial y cómo lo mejorarías!