Troceado de imagen y manejo independiente de cada parte puro Css. Dos sliders

Cómo dividir una imagen en trozos y su manejo independiente del resto de partes. Aplicado a dos demos de sliders o galerías. Todo en puro Css

Troceado de imagen y manejo independiente de cada parte puro Css. Dos sliders

Por Kseso ✎ 4

Un efecto vistoso es dividir una imagen en varios trozos al realizar alguna acción, como un :hover. O al revés, presentarla inicialmente troceada para terminar mostrándola de una sola pieza.

Efectos que normalmente se encomiendan a javascript pero que también es posible lograrlo con puro CSS. Sin necesidad de declarar varias veces la imagen.

Y si a esa división de la imagen en varias partes añadimos algún movimiento vía animation o transition tenemos asegurada la vistosidad del efecto.

Y eso vamos a ver cómo hacerlo y aplicarlo a dos sliders distintos. Disfrútalos.

Sin demo es un dragón

Hoy toca mostrar primero la idea ya lograda para que las explicaciones posteriores te resulten más sencillas. Pasa el cursor por el patito.

See the Pen YPyPWE by Kseso (@Kseso) on CodePen.

Ver Demo a Full

El Html

En el Html no busqes, que ahí no está esl secreto. Tan sólo un contenedor con la información:

<div> <h1>Brujería Css</h1> <p>Lorem fistrum commodo nostrud pupita...</p> </div>

La Brujería Css

En primer lugar componemos el contenedor padre, en la demo es un div, con medidas apropiadas (en valores relativos al viewport en la demo) le asignamos una imagen de fondo. La que ves del patito.

div { background: url(http://i.imgur.com/ayzHvSe.jpg) no-repeat center; background-size: 0 0; /*Apunta esta declaración ;-)*/ width: 80vw; height: 80vh; margin: auto; position: absolute; top:0;right:0;bottom:0;left:0; }

De este código lo único reseñable es el tamaño del background. Fíjate que lo declaro a cero para que no se muestre.

A continuación y para mostrar la imagen nos apoyamos en los dos pseudoelementos del div:

div::before, div::after { content: ''; background: inherit; background-size: cover; position: absolute; width: 80vw; height: 80vh; z-index: 2; cursor: pointer; transition: 1s linear; transform-origin: center; }

Ambos pseudoelementos cubren por completo a su caja padre. Uno sobre el otro y sobre el contenido del div al declararles la propiedad z-index.

Al declarales background: inherit ambos comparten el fondo de su padre, en todas sus características (o valores de todas las propiedades del grupo background. Pero como ahora sí interesa mostrar la imagen hemos de cambiar su tamaño de cero heredado: background-size: cover.

Con esto sólo hemos preparado el terreno. Ahora es cuando hemos de dividir la imagen en dos. Para ello recuperamos una vieja propiedad Css clip. Podría haber optado por su "hermana" clip-path y lograr otros efectos más elaborados.

Aquí es donde te remito al post Recortes Css: las propiedades clip y clip-path y el elemento clipPath por si quieres repasar estas propiedades.

Volviendo a la demo. Estábamos a punto de trocear en dos al pobre pato, digo, a su imagen. Lo hemos de hacer dejando la cada mitad en su pseudoelemento correspondiente.

div::before { top:0; left:0; /*para la transición*/ clip: rect(0px, 40vw, 80vh, 0px); } div::after { top:0; right: 0; clip: rect(0px, 80vw, 80vh, 40vw); }

Como ves en los valores de la declaración de la propiedad clip es necesario usar números mágicos por las limitaciones de la propiedad. No admite ni % ni mucho menos la función Css calc().

Y eso es prácticamente todo lo que se necesita. Sólo resta añadir una pizca de movimiento al separar las dos mitades al hacer :hover con su transición correspondiente.

Hasta el infinito y más Css

En base a este uso de la propiedad clip y con ayuda de otras técnicas ya vistas y explicadas con anterioridad en el blog se puede ir bastante más allá y construir demos que en teoría necesitan de javascript obligatoriamente.

En las dos siguientes galerías de imágenes o sliders hago un cambio respecto a lo anterior: cambio el background-size: 0 0 en el padre por visibility: hidden compensado en los hijos con el valor visible ya que esta propiedad sí se puede anular en los hijos, a diferencias de otras como cisplay: none u opacity: 0.

Desplazamiento en diferentes sentidos y lightbox

Con dos grupos de inputs con dos label por cada uno y separándolas para usar una de ellas para mostrar cada imagen partida en dos y la otra para pasar las diapositivas podemos ir un paso más allá.

Añade unos cuantos selectores construidos en base a la pseudoclase :checked (viejo recurso muy usado en un sin número de demos anteriores del blog) tienes la siguiente demo.

Pincha en las imágenes y en los ◉ para ver los distintos efectos.

See the Pen slicing images pure Css II and more by Kseso (@Kseso) on CodePen.

Ver Demo a Full

Si no te pierdes en el Css verás que los movimientos de las imágenes se logran con dos reglas @keyframes para manejar por separado la mitad izquierda y la derecha de cada imagen.

Mitades separadas que se unen

Y para terminar una variación en la que inicialmente se muestran las dos mitades de cada imagen separadas para juntarlas al píxel al hacer click en ellas:

See the Pen slicing images pure Css and more by Kseso (@Kseso) on CodePen.

Ver Demo a Full

Esta fue la primera de las demos que realicé tras ver este pen y plantearme si sería posible "duplicarlo" prescindiendo del javascript.

Reto conseguido y además con algo menos de código ;-)

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 4

  1. Como siempre, sorprendente.

    Una duda: ¿Qué quieres decir con "números mágicos"?

    ResponderEliminar
    Respuestas
    1. Hola Manuel

      Los números mágicos en Css son valores absolutos cuya cantidad sólo funciona correctamente en la situación en la que se usan. Si se cambia algo en ella es necesario cambiarlos para mantener todo OK.
      Normalmente se deben calcular exprofeso para cada situación.

      Más info:
      Magic numbers Css

      Un saludo

      Eliminar
    2. Ya que ando conectado de nuevo, aprovecho a trollear un poco el artículo con un comentario que seguramente está aclarado en el link sobre "magic numbers". El término es más que nada una ironía, porque es muy común en blogs o foros que novatos o improvisados en desrrollo web "encuentren" una solución a algún problema crónico poniendo como valor (por ejemplo) "25px". Y lo comparten aunque nadie sepa de dónde lo sacó, hasta que todos se dan cuenta de que ése valor mágico salva una dificultad en su documento y en su navegador con su resolución de pantalla y nivel de zoom. Para otros que no usen las mismas configuraciones, no sirve. No es en realidad el valor mágico que resuelve el problema.

      Como bien dice Kseso, cuando esos números dependen de nuestras imágenes o nuestra fuente ... los podemos poner a mano y existen altas probabilidades de que también funcionen en otras plataformas. Cuando dependen del navegador cliente, la única forma de quitarles la nigromancia es hacer esa medición con un lenguaje local como javascript y pasarle ese valor al CSS para que entonces haga su trabajo.

      Saludos.

      Eliminar
  2. ¡Muchas gracias a ambos!

    Me ha quedado claro.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap