Mientras jugaba con las animaciones de fotogramas clave de Webkit, descubrí una manera de crear un deslizador de imágenes pequeñas y asombrosas utilizando solo CSS. Definitivamente es un poco poco convencional, pero es una excelente manera de aprender a pensar fuera de la caja con lo que puedes hacer con CSS3.
Tenga en cuenta que ya que estamos usando Webkit Keyframes, esto es puramente un experimento educativo y solo funcionará en Safari o Chrome. A medida que más navegadores comiencen a admitir animaciones de fotogramas clave en el futuro, este método debería ser perfectamente utilizable en sus propios proyectos web.
Lo que estamos construyendo
Presentación en vivo de demostración: haga clic aquí
Demostración en vivo de portilla: haga clic aquí
¿Por qué Pure CSS?
Antes de que alguien se emocione demasiado, quiero reconocer que, en este momento, este es un trabajo para JavaScript. Aunque algunas almas raras y confusas navegan con JavaScript desactivado, eso dejará un porcentaje mucho más bajo de su audiencia que el método de hoy.
Dicho esto, creo que es importante e incluso divertido experimentar con las próximas tecnologías para ver cómo vamos a programar en un futuro próximo. Como vimos en nuestro artículo reciente sobre la creación de fondos coloridos y vibrantes, las animaciones de fotogramas clave de Webkit realmente amplían lo que es posible con CSS y son bastante fáciles de utilizar.
Primeros pasos: HTML básico
Para empezar, vamos a crear la página como si contuviera solo elementos estáticos. No vamos a preocuparnos demasiado por crear un diseño de página complejo en esta ocasión, solo un contenedor simple con la presentación y un título.
Con eso en mente, el marcado para este proyecto es super simple:
Después de esto, no deberías tener nada más que una página en blanco con texto:
CSS básico
Ahora que ya tenemos nuestro marcado, es hora de comenzar a diseñar la página para que se vea presentable. Lo primero que voy a hacer es introducir un restablecimiento de margen / relleno básico, aplicar un fondo al cuerpo y centrar el contenedor.
El restablecimiento simplemente ayuda a borrar todos los ajustes preestablecidos del navegador y centrar la división es tan fácil como aplicar un ancho y establecer los márgenes izquierdo y derecho en automático.
Estilo del texto
Ahora que nuestro fondo y nuestro contenedor están configurados, hagamos que el título se vea un poco mejor. Nuestro marcado creó tres secciones con las que trabajar: el encabezado div, el h1 y el párrafo.
Comencé aplicando algunos márgenes a toda la división junto con centrar cualquier texto dentro y establecer el color predeterminado en blanco. Después de esto, apliqué algunos estilos de fuente básicos (usando la abreviatura) a las etiquetas h1 y párrafo.
Tenga en cuenta que he usado 'Josefin Sans' para la fuente. Esto es de la Biblioteca de fuentes de Google, para que funcione, asegúrese de tener este fragmento en la sección principal de su HTML.
Y con eso, ¡nuestra página está empezando a verse mucho mejor!
Estilo de la imagen
Ahora tenemos que aplicar un fondo a la div diapositivas. En el siguiente paso, haremos mucho más con esto, pero por ahora, básicamente solo desea elegir una imagen de marcador de posición y aplicar un ancho y alto a la división.
Nuestra página se ve muy bien en este punto. Ahora que lo tenemos como queremos, ¡podemos proceder a darle vida!
Configuración de la imagen de presentación de diapositivas
La forma en que configuraremos esta presentación de diapositivas es básicamente mediante el uso de una versión modificada de los sprites CSS. La idea es crear una imagen grande que contenga todas nuestras diapositivas y luego usar animaciones de fotogramas clave para revelar partes específicas de la imagen en ciertos puntos de la animación.
Si eso todavía no tiene sentido, no te preocupes, ¡es mucho más fácil de lo que crees! Para empezar, tendremos que ir a Photoshop y construir nuestra imagen. Ahora, dado que el tamaño que configuramos arriba para la presentación de diapositivas es de 465px de ancho por 300px de altura, tendremos que hacer que nuestro documento de Photoshop sea de 930px por 600px (doble el ancho y el alto). Esto nos dará suficiente espacio para cuatro imágenes, si quieres más, simplemente hazlo más grande.
Desde aquí, querrá colocar cuatro imágenes, cada una de las cuales es de 465px por 300px. Configúrelos en una cuadrícula sin huecos y guarde un archivo JPG a tamaño completo. Su resultado debe ser similar a la imagen de abajo.
Slideshow CSS
Webkit Las animaciones de fotogramas clave son muy fáciles de utilizar. Todo lo que tiene que hacer es elegir algo para animar y luego establecer el estado de ese elemento en varios puntos de la animación, definidos por porcentajes. Entonces, si establece el ancho de un div en 100px en 0%, 50px en 50% y 10px en 100%, el div se reducirá en el transcurso de la animación.
Hoy vamos a animar la propiedad de posición de fondo. Nuestra presentación de diapositivas está configurada para mostrar solo el cuadrante superior izquierdo de nuestra imagen de forma predeterminada y podemos usar la posición de fondo para moverla y mostrar las demás.
Para visualizar esto, imagina nuestra página web como un fondo oscuro con un orificio rectangular cortado. La imagen que acabamos de crear se coloca debajo de ese agujero y la vamos a mover.
Primero, queremos pasar de la imagen superior izquierda a la imagen superior derecha, por lo que vamos a configurar el "derecho" Valor (el primer número) al ancho negativo de una imagen (465px). A continuación, configuramos el? Arriba? valor (el segundo valor) a la altura negativa de una imagen (300 px). Finalmente, nos mantenemos en -300 en la altura pero devolvemos el valor correcto a cero. El efecto de esto será mostrar la imagen superior izquierda, la imagen superior derecha, la imagen inferior derecha y luego la imagen inferior izquierda.
Note que lancé un poco de una bola curva aquí y puse todo a 0 al 10%. Esto se debe a que no me gustó que la presentación de diapositivas comenzara de inmediato sin darle la oportunidad de ver la primera imagen. Esto simplemente se basa en una breve pausa.
Además, uno de los elementos más importantes aquí es la sintaxis al principio: "@ - webkit-keyframes slider". El? @ - webkit-keyframes? parte le dice al navegador lo que está definiendo con el código de abajo, pero con el control deslizante? Parte es un título personalizable que le das a la animación. Puede ser lo que quiera, solo recuerde volver a utilizarlo en el siguiente paso cuando activemos esta animación.
Activando la presentación de diapositivas
Lanzar el CSS anterior define el comportamiento de la presentación de diapositivas, pero no lo activa. Para hacer eso, necesita agregar una nueva línea a su div diapositivas.
Aquí llamé al? Slider? animación que acabamos de definir, luego establezca la duración en 20 segundos, las iteraciones en infinitas y la dirección para alternar (una vez que la animación haya finalizado, irá hacia atrás hasta el principio).
Manifestación
Con eso, todos hemos terminado! Echa un vistazo a la demostración en vivo para verlo en acción. Nuevamente, asegúrate de estar usando Safari o Chrome.
Ejecución alternativa: Efecto de ojo de buey
Tenga en cuenta que esta técnica no utiliza realmente múltiples imágenes sino que, en cambio, solo se desplaza alrededor de una sola imagen. Debido a esto, puede lograr un efecto realmente genial simplemente utilizando una foto grande.
Para ver cómo funciona esto, tomé una imagen submarina y modifiqué la página anterior para tener una especie de ojo de buey oceánico. El código se muestra a continuación. Tenga en cuenta que esta vez, en lugar de hacer que la animación se inicie automáticamente, solo tiene lugar cuando el usuario se desplaza sobre la imagen.
Para el estilo, simplemente redondee las esquinas del div para que sea un círculo y aplique un juego de sombras en el recuadro para darle ese aspecto recortado.
Manifestación
Para ver la Demostración de Porthole, haga clic en la imagen de abajo.
Conclusión
En resumen, las animaciones de fotogramas clave de Webkit tienen un gran potencial para hacer que las páginas web sean increíblemente dinámicas sin un fragmento de JavaScript. Por lo general, este tipo de efecto tomaría una buena cantidad de código, pero con CSS es increíblemente fácil.
Deje un comentario a continuación y háganos saber qué piensa del efecto. ¿Está emocionado de que CSS se esté expandiendo para incluir este tipo de comportamientos o cree que este debería ser siempre el trabajo de JavaScript? ¡Haznos saber!