Hay una tendencia recurrente de utilizar elementos animados de la página en el diseño web en este momento: a medida que se desplaza hacia abajo en la página, los elementos se animan naturalmente a la vista. Estas animaciones solo ocurren una vez, y solo comienzan una vez que el elemento está dentro de la ventana del navegador.
He explorado este concepto un poco utilizando jQuery, junto con las transiciones de CSS3. En pocas palabras, esta secuencia de comandos busca clases especiales en la página y usa jQuery para agregar una nueva clase para efectos de transición. Los elementos que ya se han animado se eliminan del controlador de eventos. Y una vez que no haya más elementos para animar, el controlador de eventos se eliminará por completo hasta que actualice la página. ¡Eche un vistazo a mi ejemplo de demostración para ver exactamente lo que estamos creando y siga adelante!
Demo en vivo - Descargar código fuente
Estructura básica de la página
Para empezar, creé un diseño HTML5 simple que incluye una hoja de estilo externa y una copia de la última biblioteca jQuery. Todo mi JavaScript personalizado se escribirá en otro archivo externo llamado scrollview.js.
La información de la animación se puede almacenar directamente en HTML usando clases y atributos de datos. Echemos un vistazo al primer elemento animado en mi página.
Este contiene dos divs animados separados que flotan uno al lado del otro dentro de un contenedor. El atributo posición de datos nos dice de qué lado vendrá el elemento. También utilizan algunas clases para varias propiedades CSS.
los flote y .floatl Las clases representan elementos flotantes a la derecha e izquierda, respectivamente. .animBlock los elementos se ocultan de forma predeterminada con opacidad cero, junto con las propiedades de transición para la animación.
Encontrarás este fragmento de código en mi hoja de estilo. Gira en torno a la .notViewed y .visto Clases que nos dicen cuando un elemento ha sido (o no) ha sido animado. Cada bloque se procesa inicialmente utilizando .notViewed y jQuery comprueba estos elementos animados para ver cuáles se han visto y cuáles no.
Al agregar el .visto Clase, estos elementos se mueven en un 20% desde el lado derecho / izquierdo, y también pasan de una opacidad de 0% a un 100%. Las técnicas en CSS son bastante básicas y se ejecutan correctamente en todos los navegadores modernos. Manejar el cambio entre clases usando jQuery es cuando las cosas se complican un poco.
Encuadernación del evento de desplazamiento
Quiero moverme hacia scrollview.js que es independiente del archivo de índice principal. Hay dos bloques de código, uno es el controlador de eventos y el otro es una función preconstruida.
Las dos primeras variables representan copias en caché de objetos jQuery. $ bloques es un objeto jQuery que representa todos los bloques animados con .notViewed clases Básicamente, debe contener todos los elementos animados posibles que nos permiten simplemente recorrer todo. $ ventana se llama cada vez que el usuario se desplaza en la página, por lo que usar una copia en caché es más eficiente en lo que respecta al procesamiento y la memoria.
El método jQuery .each () puede iterar sobre objetos y matrices. En este caso, tenemos un objeto que contiene muchos otros objetos en la página. En cada evento de desplazamiento, esta función procesará cada elemento en el $ bloques objetos uno por uno.
El primero Si{} La declaración ahorra tiempo una vez que un elemento ha completado la animación. Dado que la variable $ blocks es un objeto almacenado en caché, no se actualizará automáticamente una vez que se hayan cambiado algunas clases. Entonces, en cambio, necesitamos verificar si cada elemento ya se ha actualizado para usar la clase .visto, y si es así, detenga la operación actual para pasar a la siguiente.
De lo contrario, sabemos que el elemento aún no ha sido animado a la vista. Aquí es donde la función más detallada isScrolledIntoView () Se ejecutará comprobando una serie de propiedades específicas. Mi código se modificó realmente desde esta publicación en Desbordamiento de pila, que proporciona una excelente plantilla de inicio.
Elementos animados
Voy a dividir esta función en segmentos para facilitar la comprensión. Al principio es bastante básico, configurar variables que son únicas para el evento de desplazamiento y cada elemento que pasa a través de $ block.
Las dos primeras variables docViewTop y docViewBottom Cambiará en cada pergamino. También pensé que a veces podríamos animar elementos antes de que estén completamente dentro de la ventana gráfica. Por eso he creado un compensar variable que se puede aplicar directamente en HTML. Notarás que estoy buscando una sola desplazamiento de datos propiedad, que es opcional, y anulará el valor predeterminado de 0. Verá que esto se aplica en mi segundo elemento animado en la página:
El siguiente fragmento de código JS comprueba dónde se encuentra el elemento actual en la página. Recuerde que esto recorrerá todo, por lo que estos valores cambian según la ventana gráfica actual y qué elemento se está pasando actualmente a través de la función. Dos variables elemTop y elemBottom nos dan valores numéricos que hacen referencia a la altura completa del objeto actual.
Usando el desplazamiento 0 no es necesario cambiar ninguno de los códigos, solo animamos cuando el elemento está a la vista completa. Pero cuando hay un desplazamiento, debemos comprobar si el usuario está desplazándose hacia abajo desde la parte superior de la página o hacia arriba desde la parte inferior. Lo he hecho restando el valor de la vista superior actual de la posición superior del elemento real.
Si el elemento está ubicado más arriba en la página que en la ventana gráfica del usuario, será un número más pequeño (más cercano a 0). Restar el valor superior del elemento (más pequeño) del valor superior de la ventana gráfica (más grande) siempre será un número positivo o muy cercano a cero. Por lo tanto, el usuario debe estar más abajo en la página y, por lo tanto, desplazarse hacia arriba. Agregar el desplazamiento al valor superior del elemento hace que sea un número más alto y, por lo tanto, más bajo. en la página, aunque en realidad no se mueve a ningún lado. Esta es toda la lógica figurativa para determinar cuándo debe comenzar la animación de desplazamiento.
De lo contrario, el usuario debería bajar de la parte superior y restamos este valor de compensación de la parte inferior del elemento (ahora acercando la parte inferior). Este concepto es un poco confuso al principio. Intente pensar en estos valores superiores / inferiores como números de píxeles. La parte superior de la ventana representa 0 y la parte inferior de la ventana es el valor más alto posible que podemos obtener.
Cambio de clases CSS
La pieza final de esta función crea el efecto de animación una vez que el elemento está dentro de la vista. Normalmente, la declaración lógica solo se ejecuta cuando el elemento está dentro de la vista completa. Sin embargo, el valor de compensación puede permitir que los elementos inicien el proceso de animación antes.
En términos más simples, la lógica lee algo así: cuando la posición inferior del elemento está dentro de la vista o justo debajo de la vista y la posición superior está perfectamente alineada o solo dentro de la vista, animar el elemento. Ambas condiciones debe ser verdadero antes de que JavaScript ejecute cualquier código.
Debería ser algo obvio que el único requisito es eliminar .notViewed y luego añadir nuestra clase de animación. .visto. Esto sucede una vez por carga de página, por lo que una vez que se ha colocado un elemento en la vista, ahora se activa el comando de retorno desde mi primer bloque de código. Todavía permanece dentro de la $ bloque objeto, pero estamos ahorrando tiempo al no ejecutarlo a través de esta función de nuevo.
Entonces, ¿qué sucede una vez que todos los elementos son visibles? No queremos mantener este evento de desplazamiento adjunto más allá de la necesidad. $ ('. animBlock.notViewed'). length devolverá un número de elementos totales que coinciden con el selector jQuery. Una vez que cada elemento ha cambiado a .animBlock.viewed este valor devolverá 0.
Una vez que llega a 0, acabamos de animar el último elemento de la página. Entonces, cuando esto sucede finalmente, iniciamos .off () adjunto al evento de desplazamiento de la ventana. Ahora el controlador de eventos de desplazamiento no se activará a menos que el usuario actualice la página nuevamente. Tiene sentido mantener este método dentro de la comprobación lógica final, ya que solo se ejecuta tantas veces como haya elementos para animar (en mi demo es 5 en total).
Demo en vivo - Descargar código fuente
Clausura
Esta técnica está orientada a sitios web avanzados que no necesariamente se adaptan a los navegadores antiguos. La mayoría de los usuarios de Internet han pasado a las últimas versiones de IE, Firefox, Chrome, Opera, etc. Pero siempre puede verificar las versiones del navegador en JavaScript para ver estos elementos cuando las transiciones de CSS3 no son posibles. Siéntase libre de descargar una copia de mi código fuente y ver qué más puede construir usando este efecto.