Crea un efecto de cambio de página

Este artículo apareció por primera vez en número 223 de la revista .net, la revista más vendida del mundo para diseñadores y desarrolladores web.

Las transiciones y transformaciones CSS todavía son relativamente nuevas y la sintaxis puede cambiar antes de convertirse en estándar. Sin embargo, todavía podemos comenzar a usar estas propiedades: solo necesitamos asegurarnos de usar las versiones prefijadas por el proveedor. Para brindar soporte a los usuarios de todos los navegadores, es importante incluir todas las versiones prefijadas por el proveedor. Sin embargo, esto no lo convierte en un código especialmente conciso, por lo que, en aras de la claridad, solo usaré el prefijo -webkit a lo largo de este tutorial.

Introducción a las transiciones CSS

Las transiciones CSS son una nueva característica de CSS3 que le brinda la capacidad de animar elementos simplemente cambiando las propiedades de CSS. Al usar las transiciones, le indica al navegador qué propiedades deben animarse, cuánto tiempo deben tomar y qué función de aceleración debe usarse. A continuación, se muestra un ejemplo de cómo un elemento podría desaparecer automáticamente con solo agregar una clase:



|_+_|

Introducción a las transformaciones CSS

Las transformaciones CSS también son nuevas en CSS3 y le permiten realizar manipulaciones 2D y 3D en elementos como escalar, traducir y rotar. A continuación, se muestra un ejemplo de cómo puede usar una transformación para rotar texto:

|_+_|

Usar transiciones y transformaciones CSS juntas es una manera fácil de crear animaciones realmente atractivas para su sitio web o aplicación web. Las transiciones también se pueden acelerar por hardware para que funcionen mucho mejor en dispositivos móviles que las animaciones JavaScript tradicionales basadas en temporizador.

Aquí hay uno que hice antes: el efecto de cambio de página en acción

Aquí hay uno que hice antes: el efecto de cambio de página en acción

Para demostrar el poder de combinar las transformaciones CSS3 con las transiciones, creemos un widget de galería para jQuery que imita un efecto de cambio de página. La mayoría de los navegadores modernos ahora admiten transiciones CSS, pero no todos admiten transformaciones 3D por el momento. Mientras creamos un efecto 3D, solo nos enfocaremos en navegadores WebKit como Safari, Chrome e iOS.

Photoshop como rotar una capa

Marcado HTML

Para empezar, necesitamos establecer nuestro marcado para que el widget tenga algo con lo que trabajar:

|_+_|

Para hacer esto, creamos una estructura simple con una serie de elementos de imagen dentro de un div contenedor. También le daremos una clase a este elemento para que el acceso a través de jQuery sea más fácil. Es importante establecer la propiedad de visualización en none para todas las imágenes excepto para la primera: de esta manera, la representación se degradará mejor si, por alguna razón, el navegador del cliente no es compatible con JavaScript.

Crea el widget

Ahora que tenemos nuestro marcado, necesitamos crear el widget jQuery (los widgets jQuery son parte de la biblioteca jQuery UI). En un archivo separado, cree la siguiente plantilla básica de widget:

|_+_|

Usaremos el constructor de widgets (_create ()) para configurar el DOM de modo que esté listo para los efectos de cambio. También necesitamos agregar algo de código al documento HTML principal para crear la galería al cargar. Para hacer esto, agregue lo siguiente a su página HTML:

|_+_|

Entonces, lo primero que debemos hacer es una configuración general. Agregue lo siguiente a la función _create () de sus widgets:

|_+_|

El código anterior obtiene una lista de todas las imágenes que especificamos en el marcado y asegura que el elemento contenedor tenga el tamaño correcto. También crea una variable de instancia para realizar un seguimiento del número de índice de la imagen que se muestra. Usaremos esto un poco más adelante para avanzar en la secuencia de imágenes.

La parte final de este código establece la perspectiva del elemento de la galería. Mientras creamos un efecto 3D, necesitamos decirle al elemento que tenga perspectiva, de lo contrario, la página no parecerá salir de la pantalla cuando ejecutemos la transición. Cuanto menor sea el número utilizado para la perspectiva -webkit, más pronunciada será la perspectiva. Para este efecto, encontré que los valores alrededor de 1.100 se ven mejor.

Las capas que necesitamos crear con elementos DOM para que podamos imitar la apariencia de una página volteada, revelando la imagen siguiente.

Las capas que necesitamos crear con elementos DOM para que podamos imitar la apariencia de una página volteada, revelando la imagen siguiente.

Agregar marcado dinámico

Ahora estamos listos para hacer que el widget haga algo. Primero, debemos determinar qué elementos vamos a necesitar para obtener el efecto deseado. Mientras creamos un cambio de página, debemos pensar en lo que sucede cuando pasas la página de un libro.

  1. Queremos empezar viendo la primera imagen en su totalidad.
  2. Luego, queremos ver el lado derecho de esta primera imagen rotar alrededor del centro, revelando el lado derecho de la segunda imagen.
  3. Después de que el elemento girado esté perpendicular a la pantalla, queremos seguir girando, pero mostrar el lado izquierdo de la segunda imagen.

Para lograr esto, vamos a querer crear una estructura de elementos DOM que refleje el diagrama anterior.

Ahora creemos algunos elementos DOM para que coincidan con las capas deseadas. Debido a que necesitamos poder mostrar solo ciertas partes de las imágenes, en lugar de renderizar elementos, vamos a aplicar las imágenes al fondo de los elementos. Básicamente, esto nos permitirá recortar (o recortar) dinámicamente las imágenes a voluntad. Para crear las capas uno y dos necesitamos agregar el siguiente código:

|_+_|

A continuación, agregaremos los elementos que representarán la página que pasará. Esto contendrá las capas tres y cuatro:

|_+_|

Lo importante a tener en cuenta en el código anterior es que el lado izquierdo del elemento que representa la imagen B se gira 180 ° para que cuando comience, esté orientado hacia afuera de la pantalla. También es importante que le digamos a las dos capas dentro del elemento de la página que solo muestren su cara frontal. Esto se logra utilizando la propiedad CSS3 '-webkit-backface-visible':
'oculto' y significa que el usuario no puede ver ninguna parte del elemento que no esté frente a la pantalla. Al evitar que se muestre la cara posterior de los elementos, creamos la impresión de que los dos subelementos están a ambos lados de la página.

También usamos otra nueva propiedad de CSS3 '-webkit-transform-style': 'preserve-3d' en el elemento de página que contiene las dos capas. Esta propiedad obliga a que las transformaciones de los subelementos se calculen en relación con este elemento. Esto es un poco confuso, pero para este ejemplo significa que cuando se gira el elemento de página, los dos elementos secundarios girarán con él. Sin él, obtendrá un comportamiento inesperado.

cómo dibujar pluma y tinta

Cuando se da la vuelta a la primera imagen, la que está detrás se expone y se estira de manera similar.

Cuando se da la vuelta a la primera imagen, la que está detrás se expone y se estira de manera similar.

Animado

En este punto, hemos configurado todos nuestros elementos DOM, por lo que debemos eliminar las imágenes originales del contenedor y pintar las imágenes correctas en nuestras diversas capas. Para finalizar la función _create () agregue las siguientes dos líneas de código:

|_+_|

Como ahora llamamos a una nueva función, necesitaremos definir qué hace la función _setupImages (). Agrega el siguiente código a tu widget:

|_+_|

Ahora tenemos todo en su lugar para poder inicializar la galería, pero en este punto todo lo que veremos en el navegador es la primera imagen. Ahora agreguemos una función para realizar el cambio de página.
Primero necesitamos una forma de activar el efecto. Puede hacer esto agregando un botón a su archivo HTML:

|_+_|

También necesitamos modificar nuestro código jQuery.ready para adjuntar un oyente al botón. Cambie la función para que se vea así:

|_+_|

Cuando se presiona el botón, ahora activará la función de giro en nuestro widget. Ahora implementemos esta función para que cree el efecto de cambio de página. Agrega el siguiente código:

|_+_|

Entonces, ¿qué hace el código anterior? Primero, le damos a nuestro elemento de página algo de CSS para decirle qué propiedad animar y cómo nos gustaría que aparezca la animación. En este caso, queremos que cualquier cambio en la propiedad -webkit-transform sea animado durante una duración de 1,000 ms, y nos gustaría usar la función de tiempo fácil. También especificamos que nos gustaría realizar transformaciones alrededor del lado izquierdo del elemento. Esto asegurará que cuando rotamos el elemento de la página (que representa el lado derecho de la imagen) girará alrededor del centro de la imagen.

La segunda parte del código luego se aplica a la rotación, estableciendo la nueva posición en la que queremos que esté el elemento de la página. Porque hemos dicho que todos los cambios de propiedad de -webkit-transform deben estar animados, en lugar de cambiar inmediatamente a la nueva posición de rotación , el elemento de la página se animará suavemente, dando el efecto de cambio de página deseado.

Puede parecer que hemos terminado, pero ¿cómo nos preparamos para la siguiente imagen para que podamos recorrer cualquier número arbitrario de imágenes? Afortunadamente, cuando se completa una transición, el navegador activará un evento, que podemos escuchar de la misma manera que podríamos hacer un clic o presionar una tecla. Modifiquemos nuestra función turn () agregando un detector de eventos para reiniciar para la próxima transición. Reemplace la primera línea de la función turn () con el siguiente código nuevo:

|_+_|

Ahora, cuando se completa una transición, estamos realizando los siguientes pasos para restablecer el siguiente paso de página:

  1. Incrementa el índice de imagen actual.
  2. Configure el fondo de los elementos de la galería para que sea la nueva imagen.
  3. Ocultar nuestras capas personalizadas.
  4. Desactive las transiciones y restablezca la rotación en nuestro elemento de página.
  5. Llame a _setupImages () para pintar las imágenes actuales en nuestras capas para las imágenes actual y siguiente en la secuencia.

Y después de todo ese arduo trabajo, tenemos nuestro producto terminado: un widget jQuery reutilizable que puede producir impresionantes efectos de volteo de página que se verán geniales en una galería de portafolios.