El proyecto de hoy es divertido. Vamos a construir un control deslizante de imagen CSS estándar con un giro: el área de imagen visible se dividirá en cuatro secciones distintas, cada una con un mensaje oculto que se revela cuando el usuario se desplaza sobre él.
El efecto final es bastante impresionante y creo que te va a gustar mucho. En el camino jugaremos con algunas animaciones, transiciones, contextos de posicionamiento y mucho más. ¡Vamos a bucear y empezar!
Vistazo
Si desea echar un vistazo al producto terminado antes de que lo construyamos, consulte el siguiente enlace.
Manifestación: Haga clic aquí para lanzar la demostración en vivo.
¿Props a? ¿Cómo rodar?
Mi inspiración para el tutorial de hoy proviene del lugar de sushi donde planeo cenar esta noche. Pasé por su sitio web para obtener instrucciones y al instante quería ver si podía replicar el efecto en la página de inicio. El restaurante se llama How Do You Roll, siéntase libre de visitar su impresionante sitio.
HTML
¡Empecemos este proyecto! Como siempre, lo primero que queremos hacer es delinear nuestra estructura básica de HTML. Este control deslizante se compone de un área de imagen grande que se divide en cuatro columnas verticales. En consecuencia, requerimos un div envoltorio con un? Control deslizante? clase y cuatro divs interiores, cada uno con un panel? clase.
Esta es nuestra estructura básica, pero necesitamos desarrollarla un poco con algo de contenido. Quiero que cada panel sirva como una fuente de información y un enlace. Por lo tanto, el usuario debería poder desplazarse, ver de qué se trata el panel y hacer clic para pasar a una página diferente. Para lograr esto, lanzaremos un h2 y un párrafo y envolveremos toda la cosa de dang en un ancla. Parece una forma extraña de usar un ancla, pero es perfectamente válida en HTML5.
Ahora que tenemos una estructura general y la formación del panel individual resuelta, lo juntamos todo y tenemos todo el HTML que necesitaremos para este proyecto.
Estilos de arranque
Para lanzar nuestro CSS, vamos a sacar algunas de las cosas genéricas del camino. Primero, hice un pequeño reinicio universal para que todos estuviéramos en la misma página. Reemplace esto con una mejor técnica de restablecimiento o normalización si está usando esto en un proyecto real.
También agregué una textura de fondo y restablecí los estilos de enlace para el control deslizante, solo por si acaso.
CSS deslizante
Ahora es el momento de diseñar el control deslizante div. Básicamente, queremos establecer un tamaño específico para él, luego darle una imagen de fondo que sea del mismo tamaño. Luego agregaremos algunos márgenes para centrarlo, un radio de borde para redondear las esquinas y una sombra de cuadro para diferenciarlo un poco del fondo.
Lo más importante que podría perderse en este fragmento es el desbordamiento: la línea automática. Esto es importante porque queremos que nuestros paneles tomen el efecto de esquina redondeada que estamos aplicando al div deslizador principal.
Control del progreso
En este punto, debe tener una imagen grande con esquinas redondeadas y una sombra paralela junto con un montón de texto feo y desordenado, que corregiremos en el siguiente paso.
Panel CSS
Nuestro contenedor deslizante se ve nítido, ahora es el momento de poner los paneles en orden. Dado que nuestro contenedor es de 800px por 400px, cada panel debe configurarse en 200px por 400px, lo que significa que cada panel ocupará la altura total y un cuarto del ancho. Desde allí, solo tenemos que flotarlos hacia la izquierda y se alinearán como deseamos.
Lo interesante aquí es que he configurado el color y el fondo como transparentes, lo que hace que los paneles sean invisibles. Esto se debe a que solo queremos que aparezcan en vuelo estacionario. El estado predeterminado debería estar oculto.
El paso final aquí es agregar el CSS para una transición para que los paneles se desvanezcan cuando el usuario se desplaza. Observe que en realidad declaré dos transiciones separadas separadas por una coma (una para el color y otra para el color de fondo).
Tipografía de panel
A continuación, es hora de poner la tipografía en orden. Es cierto que no hice esto con los paneles configurados como invisibles, sino que les di un color a los elementos, los diseñé y luego los volví a ocultar.
Asegúrate de estilizar tanto el párrafo como el h2. Hice el encabezado grande, audaz y bajé un poco de la parte superior. Tanto el encabezado como el párrafo también tienen un ancho establecido de 150px, lo que facilita centrarlos en el espacio a pesar de la alineación a la izquierda.
Panel Hover
Cuando el usuario se desplace sobre uno de nuestros paneles, quiero que vuelva a ser visible. Hago esto dando un color de fondo y texto. Configuré el fondo a negro, con un poco de transparencia para dejar que la imagen subyacente se muestre, y el párrafo a blanco.
Control del progreso
¡Ahora deberías tener paneles completamente funcionales! Si esto es todo lo que buscaba lograr, puede detenerse aquí, no es necesario realizar ningún trabajo adicional. Incluso sin el siguiente paso, sigue siendo un gran efecto.
Animar el fondo
Este último paso es completamente opcional, y tenga en cuenta que no funcionará en absoluto en los navegadores más antiguos, pero la inspiración original para esta pieza tenía un control deslizante de imagen en el fondo. Tenemos una imagen estática allí y ahora vamos a volver y animarla.
Para hacer esto, necesitamos volver al bloque de declaración del control deslizante y agregar algunas cosas. Para empezar, convierta su fondo único en cuatro imágenes de fondo, siendo la última la misma que la primera, así que todo encaja muy bien.
A continuación, asegúrese de configurar las imágenes de fondo para que no se repitan y copie los valores de posición que se muestran a continuación, que alinearán las imágenes en una fila horizontal larga.
Como puedes ver, también tiré en la animación CSS. Primero nombramos nuestra animación (control deslizante), luego configuramos la duración y el número de iteraciones. Para finalizar todo el proyecto, debemos definir cómo funcionará esa animación con los fotogramas clave. El código para esto es confuso, así que describamos cada paso.
- Paso uno: primera imagen de fondo visible
- Paso Dos: Mueve todo a la izquierda 800px, la segunda imagen de fondo visible
- Paso tres: Mueve todo a la izquierda 800px, tercera imagen de fondo visible
- Paso cuatro: Mueve todo a la izquierda 800 px, la cuarta imagen de fondo visible (que es lo mismo que la primera imagen)
Para dividir esto, necesitamos comenzar con 0% y terminar con 100%, lo que deja dos pasos intermedios. La solución fácil es hacer los pasos dos y tres al 33% y 66%. Las matemáticas no son perfectas, pero están lo suficientemente cerca. Observe cómo se mueven las imágenes cada vez, lo que permite ver el siguiente fondo.
- 0%: posición de fondo: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
- 33% de posición de fondo: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
- 66%: posición de fondo: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
- 100%: posición de fondo: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;
Ahora, solo esto hará que la presentación de diapositivas se mueva constantemente, lo que no queremos. Lo que queremos en cambio es que cada diapositiva permanezca inmóvil durante unos segundos antes de avanzar. Esto se logra agregando algunos pasos redundantes para que las diapositivas no avancen hasta un 10% antes del siguiente paso.
- 0%: posición de fondo: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
- 23%: posición de fondo: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
- 33% de posición de fondo: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
- 56% de posición de fondo: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
- 66%: posición de fondo: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
- 90%: posición de fondo: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
- 100%: posición de fondo: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;
Ahora que hemos procesado el proceso, podemos hacer que suceda con CSS. Esto requiere un montón de código para los distintos navegadores, pero es la única forma en que podemos lograrlo, así que tendremos que vivir con él.
¡Véalo en acción!
¡Todos hemos terminado! Ahora es el momento de echar un último vistazo a la demostración.
Manifestación: Haga clic aquí para lanzar la demostración en vivo.
Conclusión
Espero que hayas disfrutado construyendo este divertido y pequeño deslizador tanto como yo. Me encanta cómo representa un ligero cambio en una vieja idea. Es bastante práctico y realmente te permite llevar tus controles deslizantes un paso más allá.
Deja un comentario abajo y déjanos saber lo que piensas. ¿Has visto un control deslizante dividido así antes? ¿Cómo lo harías mejor?