Automanual-K galería puro Css, paso automático, pausa al hover y slider manual 4.9.13
Una galería en puro Css que pasa las imágenes de forma automática pero permita al usuario interactuar con ella para poder pausarla y/o seleccionar una u otra a voluntad.
Automanual-K galería puro Css, paso automático, pausa al hover y slider manual
Hace unas fechas publiqué una serie de variaciones de galerías de imágenes realizadas con puro Css. Una a pantalla completa y paso automático. Otra de paso manual o activado por el usuario y dos visores de imágenes panorámicas de una sola imagen excesivamente grande y de varias.
Estas galerías se sumaban a distintos sliders anteriores, entre ellos uno de bordes oblicuos.
Pero faltaba uno. Y ese fue el "reto" que Triny, en forma de comentario inocente xD me planteó.
Básicamente se trata de una galería que pasa las imágenes de forma automática pero permita al usuario interactuar con ella para poder pausarla y/o seleccionar una u otra a voluntad.
Esto que aquí llamo galerías realmente son sistemas de pestañas o tabs de las que también tienes varios posts en el blog.
Podrias poner un ejemplo de como realizar el slider automatico pero con posibilidad de que el usuario seleccione los input de manera responsiva simultaneamente?, es que aún no me queda claro como combinar los dos códigos de los dos tutoriales, que por cierto están excelentes!
Y a mi, todo un caballero que me autodefino en este blog como "enredique amanuense de Css", sólo me quedaba una respuesta: "challenge accepted"
Porque estas cosas siempre son un "win win". Resulte lo que resulte al final, yo siempre gano, aunque no lo logre aprenderé un par de cosas en la búsqueda de información.
Pero empecemos por el final. Por la galería de imágenes con paso automático, parada o pausa al hacer :hover sobre ella y dando la posibilidad al usuario de navegar entre los frames que la compnen:
See the Pen automanual-K gallery by Kseso (@Kseso) on CodePen
Si no carga el pen embutido en el artículo, puedes ir a la demo en pantalla completa:
Ver demo a full
Una pequeña explicación
No entraré en esta ocasión en los detalles de cómo realizarla al ser básicamente una mezcla de las dos galerías en puro Css publicadas con anterioridad: ésta y esta otra.
Creo que sólo es necesario señalar el motivo por el que Triny no acertaba con el punto: la manera de indicarle al navegador que pare la transición automática para que el usuario pueda usar la manual.
Propiedad Css animation-play-state
La propiedad Css 'animation-play-state' pertenece al grupo de las "animation". Define si la animación está en marcha o parada. Los valores admitidos por 'animation-play-state' son paused y running. En valor inicial o en ausencia de la declaración es 'running'.
Una vez descubierto el secreto sólo es cuestión de conmutar la animación entre estos dos valores. Así mismo también la utilizo para pausar el cambio entre imágenes cuando se hace :hover sobre la galería.
La segunda parte que tuve que descubrir mediante "prueba y error" fue a qué selector declararla y con qué valor. Tras unos intentos quedó como puedes ver en el código del pen y que aquí te entresaco.
Cada uno de los cinco frames que componen la galería son un 'article' y estos están contenidos en un section con class='visor'. Este 'visor' es el que tiene declarada la animación y la transición:
.visor {
transition: .5s linear;
animation: deslizante 20s ease-out 0s backwards infinite alternate-reverse;
}
Observa con detenimiento los efectos que produce utilizar el valor alternate-reverse en la animación. No sólo en el aspecto visual, también en el orden de aparición en la ventana de los frames respecto a su posición en el flujo del documento.
Para parar la animación por el usuario y volverla a poner en marcha sólo se necesitan estas dos reglas Css:
header .visor {
animation-play-state: running;
}
header:hover .visor {
animation-play-state: paused;
}
Donde 'header' es el contenedor padre de todos los elementos que componen la galería.
A continuación sólo queda lograr pasar el control del paso de cada frame al usuario al pulsar sobre uno u otro número de las opciones. O lo que es lo mismo, al hacer :checked sobre alguna de las etiquetas de los inputs.
En este punto me encontré con una pequeña complicación. La animación declarada anteriormente se empeñaba en mantenerse presente y su actuación deslucía la galería. Así que la solucción más sencilla, y creo que limpia, que encontré fue declarle otra animación inexistente (no declarada en el css) a la que llamé 'ninguna'. Y funcionó.
header:hover input[id='uno']:checked ~ .visor {left: 0;animation: ninguna;}
header:hover input[id='dos']:checked ~ .visor {left: -100%;animation: ninguna;}
header:hover input[id='tres']:checked ~ .visor {left: -200%;animation: ninguna;}
header:hover input[id='cuatro']:checked ~ .visor {left: -300%;animation: ninguna;}
header:hover input[id='cinco']:checked ~ .visor {left: -400%;animation: ninguna;}
Otras galerías en puro Css
- Splash: Slider manual
- Slider RWD automático pantalla completa
- Visor múltiples imágenes panorámicas
- Panoramic Fashion: Visor Css de imagen panorámica v.2
- Slider con bordes sesgados y transición animada
Terminando
Y para terminar, déjame que te deje con este vídeo. Para que escuches en la voz de Luz Casal el poema de Rosalía de Castro "Negra Sombra" de su obra "Follas novas" que incluyo en la galería en su versión original en gallego. Escúchalo mientras juegas con la galería.
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
(Je. Ves el avatar y se te cae la baba.
ResponderEliminarY bue, las mujeres tienen razón : somos todos iguales.)
Ah, sí!, muy bueno el ejemplo. Esas propiedades que monitorean el estado de una animación parecen muy prácticas. Las voy a empezar a estudiar.
Gracias por el artículo, como siempre.
Sensacional, un ejemplo de las posibilidades que ofrece CSS3 para animaciones sin preocuparse por JS.
ResponderEliminarGracias Kseso.