Doble scan single element puro Css. Animación del background para que aparezca estático 25.11.15
Sencilla animación para revelar secuencialmente una imagen superpuesta a otra y que parezca que no hay tal animación.
Doble scan single element puro Css. Animación del background para que aparezca estático
El efecto que ves en el gif de la derecha lo vi realizado en este pen, obra de un usuario con el nick Circunspecter.
Me llamó la atención el doble efecto de la animación: en la pasada descendente la imagen del tejido muscular se va sustituyendo por la del aparato óseo en la parte correspondiente al "visor". En la ascendente se muestran superpuestas: músculos y huesos.
Un vistazo a sus códigos para ver que su realizador utiliza 7 elementos en el Html, algo de Css y javascript para logar la demo que puedes ver a continuación.
Demo que me pregunté si se podría replicar prescindiendo del js y a la vez prescindir de algún elemento html.
See the Pen CSS Animation & Iteration listener by circunspecter (@circunspecter) on CodePen
Recuerda, esta demo usa js y es el reto para duplicarla con sólo Css.
Doble escaneo en puro Css: revelando imágenes al pasar
Una de las condiciones, prescindir de elementos en el Html es fácil si pensamos que de entrada ya disponemos de dos: el html y body. Y que cada uno de ellos dispone de dos pseudoelementos ::before | ::after. Así que podando, podando me quedé sólo con uno:
<div class='cabina'></div>
Y además vacío. Aunque bien pudiera meterse en él, como contenido, la imagen vía src del sistema muscular. Pero al ser sólo un juego Css y demo...
El Css principal
No entraré en pormenores y en todos los detalles del css utilizado. Como verás la imagen que se ve completa todo el tiempo, la del sistema muscular, está colocada como fondo del div, posicionada arriba y al centro, y para evitarnos sorpresas con un tamaño igual al de la propia imagen background-size.
Los dos rieles verticales no es más que los bordes de este div con una pizca de sombras, box-shadow, con múltiples valores.
El visor de rayos X, el que va mostrando el sistema óseo, es el pseudoelemento del div anterior. Posicionado y colocado, dado el tamaño oportuno y como fondo de él la segunda imagen del esqueleto también con tamaño declarado y colocada 'arriba y al centro' como la anterior (quedan superpuestas una sobre la otra.
Para terminar la composición sólo resta por crear los dos anclajes laterales sobre los rieles. Para ello utilizamos los dos pseudoelementos de 'body'. Con tamaño y posicionados conveniencia.
Las animaciones
Este es realmente el único punto que tiene interés. Cómo hacer para que el "visor" se desplace arriba y abajo dejando ver la parte de su fondo que nos interesa. De no hacerlo bien se corre el peligro de mover el "visor" a la vez que su fondo, y en vez de ver los huesos que corresponden ver siempre el mismo pedazo del background.
Para lograrlo sólo es necesaria esta regla '@keyframes' y su correspondiente declaración 'animation':
/*para el 'revelado' de los huesos*/
@keyframes scaner-X {
to {
top: 450px;
background-position: bottom center;
}
}
/*para superponer los huesos a los músculos
sólo en la pasada ascendente y de forma suave*/
@keyframes scaner-Y {
0% {opacity: .6;}
5% {opacity: 1;}
50% {opacity: 1;}
55% {opacity: .6;}
100% {opacity: .6;}
}
Fíjate que hay una diferencia entre la altura del div y las imágenes (500px) y lo que desplazamos el visor (top: 450px). La diferencia es el tamaño (altura) del propio visor. Sólo necesitamos que llegue hasta la parte inferior del div la parte inferior del visor.
La otra propiedad sobre la que actuamos es la posición del fondo. Pasamos de un 'top center' inicial a 'bottom center' final para evitar lo que reseñaba antes: que se muestre todo el tiempo sólo el cráneo. O lo que es lo mismo, se necesita animar el desplazamiento del background para que aparente no moverse.
La aplicación de estas dos '@keyframes' necesitan de códigos de tiempos diferentes ya que mientras que los huesos se muestran en los dos pases, tanto al bajar como al subir el "visor", la opacidad de esta imagen sólo tenemos que aplicarla en uno de los pases. El ascendente
.cabina:before {
animation: scaner-X 5s linear alternate infinite,
scaner-Y 10s linear infinite;
}
Y eso básicamente es todo lo que se necesita. Sólo para terminar de pulir la demo añadimos una '@keyframes' diferente para los dos "anclajes" laterales del "visor". Si utilizamos la misma ocurrirá lo que se muestra en el gif inicial: el movimiento del visor y de los anclajes no es uniforme e igual. Hay un pequeño desfase debido al desplazamiento inicial de los anclajes ('top: -10px;')
@keyframes soportes {
to {top: 440px;}
}
body:before, body:after {
animation: soportes 5s linear alternate infinite;
}
Y después de tanto rollo y tocho, es hora de ver la demo ya realizada en puro Css:
See the Pen Double scan-pure Css-1 element by Kseso (@Kseso) on CodePen
Kseso
the obCSServer ᛯ 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 Kseso
Acá hay una versión con "parallax". Aunque en vez de un ken, usaron una barbie.
ResponderEliminarHuman Anatomy Parallax. Using :before/:after pseudo elements.
Excelente post, gracias por la lección ;)
ResponderEliminarY definitivamente el problema era de mi conexión, pero por si acaso...