Page flip puro Css. Ayer y hoy

Un repaso al efecto "page flip" hecho con puro css. Estudio y explicación de la demo de Stu Nicholls en CSS Play

Page flip puro Css. Ayer y hoy

Por Kseso ✎ 3

El efecto page flip o emular el paso de hojas en un libro es un recurso que tiene un largo recorrido. Si no recuerdo mal, originalmente fue un efecto basado en el uso de flash.
Con el paso del tiempo javaescript tomó el relevo. Se popularizó con la llegada de librerías para "copiar y pegar" como jQuery.

Y como suele pasar con cualquier efecto más o menos conocido, una vez que algún navegador dio soporte a ciertas propiedades de Css(3) necesarias como las transform y transition, comenzaron los intentos de hacer el efecto page flip con puro Css

Page flip por Román Cortés

Si no el primer intento, sí uno de los mejor logrado y que más repercusión tuvo en su momento fue la realización de Román Cortés allá por Mayo de 2010: Pure CSS3 Page Flip Effect

Visto hoy en día no llama tanto la atención. Pero recuerda, estamos hablando del año 2010. De hecho sólo contiene el prefijo privativo -webkit- y no son más que dos páginas. La segunda se muestra al :hover

Esta realización fue la base e inspiración de múltiples realizaciones. Como ésta de un año después (2011) para Firefox 4, Safari, Chrome and Opera.
Además de extender el soporte a más navegadores, realiza una "depuración u optimización" del html y Css utilizado

Y así había sido, sin grandes novedades en el efecto page flip con puro Css hasta hace 4 días:

Page flip Css multipágina funcional por Stu Nicholls en CSS play

En la imagen superior tienes el enlace para ver la demo del page flip Css

A poco que te detengas a observarlo notarás los cambios y diferencias con el anterior de Román Cortés y sus clones:

  • Muchos más navegadores soportados: PC IE8+ Firefox, Safari, Chrome, Opera Mac, Chrome, Firefox, iPad, iPhone e iPod Touch. Android (en el Kindle Fire)
  • Indicación visual de que hay más "hojas": esquinas superiores que se doblan.
  • El paso se hace al click, no al hover.
  • La demo incluye 11 pasa páginas. Puedes aumentar o disminuir al gusto ese número.
  • Admite texto seleccionable, imágenes, enlaces o cualquier elemento que necesites incluir.

Códigos y funcionamiento

Estamos hablando de una demo de Stu Nicholls, así que asume que el marcado html y los selectores Css utilizados no serán "simples y sencillos". Ingeniosos y efectivos sí, pero simples, no.

Fíjate en la imagen de la derecha, fruto de deshabilitar el Css. Lo primero que se muestra es una serie de checkboxes. Tantos como dobles-hojas tiene el "libro". Así que eso ya da una pista sobre cuál es la base del efecto page flip: la pseudoclase :checked y el selector de hermano ~ .

El el blog ya hemos hablado alguna que otra vez sobre ellos (la pseudoclse y el selector). Muy utilizados de un tiempo a esta parte.

La estructura html básica es la siguiente para cada "doble página":

<div class="p2 lp"><!--Página 2 a la izquierda--> <div class="p2p lpi"> <b></b><!--El gradiente Css central--> <div class="text"> <label for="p1"><img src="previous.png" alt="" /></label> <p>TEXTO</p> <span>- 2 -</span> </div> </div> </div> <div class="p3 rp"><!--Página 3 a la derecha--> <div class="p3p rpi"> <div class="text"> <label for="p2"><img src="next.png" alt="" /></label> <p>TEXTO</p> <span>- 3 -</span> </div> </div> </div>

Y esa era la parte dífícil. El marcado html. A continuación sólo es cuestión de posicionar en el eje z cada checkbox y definir el comportamiento de cada página al marcar uno u otro en función de si el check es de "una página a derecha" o "a izquierda": ocultar y mostrar la siguiente/anterior cambiando alturas : transition: transform 1s, height 0s 1s; o el valor de right

Todo ello acompañado de las oportunas propiedades transform y transition y los valores convenientes para lograr el efecto page flip en puro Css.

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: 3

  1. Viendo tu post recordé un plugin que me gustaría compartir, se puede ver en http://www.turnjs.com/ aunque no es sólo CSS está basado en él, espero que os guste

    ResponderEliminar
  2. Hola Dani
    Gracias por el aporte al artículo y tu visita al blog.

    Un saludo

    ResponderEliminar

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