Accentsconagua

El efecto de la luciérnaga

Código
Share

Las imágenes cósmicas se utilizan en muchos sitios web como imagen de fondo. Esas imágenes son sin duda hermosas, pero después de todo son imágenes que brindan poca vivacidad. Con jQuery, podemos traer una imagen aún cósmica treinta vidas agregando algo de polvo espacial (partículas) volando como luciérnagas. En este tutorial, veremos cómo implementar este efecto en 30 minutos. También aprenderemos un poco de técnicas de Javascript orientadas a objetos..

Caracteristicas

  1. Las partículas se mueven a velocidades y direcciones aleatorias (movimiento browniano).
  2. En este tutorial se proporcionan cuatro modelos de partículas. Cada uno tiene un aspecto ligeramente diferente..
  3. El número total de partículas es configurable..

Estaremos contemplando este fondo cósmico durante bastante tiempo. Para hacer que nuestros ojos estén más cómodos, en este tutorial se utiliza una imagen oscura y simple como fondo. Siéntete libre de usar imágenes más coloridas en tus propios proyectos..

Las particulas

Para hacer que este efecto parezca más realista, tenemos cuatro modelos de partículas en este tutorial. Son pequeñas imágenes con diferente tamaño y apariencia. Mira la figura de abajo para más detalles:

  • La partícula 1 es más pequeña pero más brillante. Parece que está bien enfocado para que podamos verlo claramente.
  • La partícula 4 es más grande pero más oscura (tan oscura que apenas puedes verla), que imita un objeto fuera de foco.

El HTML

A diferencia de la mayoría de los tutoriales, es el fondo de una página web en la que nos centraremos hoy, lo que hace que el HTML sea bastante simple:

  • No hay elementos dentro de la cuerpo etiqueta. Así que nada nos distraerá del fondo y de la animación..
  • Con la definición de CSS, se establece un fondo cósmico para el cuerpo de esta página. Esto debería ser muy sencillo..
  • jQuery se incluye como de costumbre.
    El efecto de la luciérnaga

JavaScript orientado a objetos

Ahora echemos un vistazo más de cerca a la vida de una partícula. Cada partícula puede diferir en apariencia. Y se mueven a diferentes velocidades y direcciones. Pero todas siguen el mismo conjunto de reglas que se pueden describir como una secuencia de acciones:

  1. Escoge aleatoriamente un modelo de partículas.
  2. Crear un DOM para esta partícula.
  3. Generar una velocidad aleatoria para esta partícula..
  4. Generar la posición inicial (Punto X y Punto Y) para esta partícula.
  5. Mostrar la partícula en la posición generada en 4..
  6. Genera otra posición (Punto X y Punto Y) a la que se mueve la partícula.
  7. Animar el movimiento de partículas a la posición generada en 6..
  8. Repite 6 y 7 una vez finalizada la animación mencionada en 7..

Cada partícula sigue exactamente estos ocho pasos a lo largo de su vida. Y los factores aleatorios, como la posición y la velocidad, hacen que cada partícula se comporte de una manera única. Este es un caso perfecto para implementar algunas técnicas de programación orientada a objetos. Envolvamos estos ocho pasos en una 'clase' que se instanciará muchas veces para crear múltiples instancias de la misma lógica. Cada instancia (partícula) se ejecuta en un carril separado y mantiene su propia velocidad y dirección.

Es importante tener en cuenta que no hay clases en JavaScript. Las funciones se pueden usar para simular clases, pero en general JavaScript está basado en prototipos en lugar de en clases. Todo es un objeto. Para obtener más información sobre cómo definir y crear una instancia de una "clase" de JavaScript, consulte estos artículos.

En este mismo efecto, se define una 'clase' y luego se crea una instancia 50 veces con el siguiente código.

 function Particle () // 1. Escoge aleatoriamente un modelo de partículas. // 2. Crea un DOM para esta partícula. // 3. Genera una velocidad aleatoria para esta partícula. // 4. Genere la posición inicial (Punto X y Punto Y) para esta partícula. // 5. Visualice la partícula en la posición generada en 4. // 6. Genere otra posición (Punto X y Punto Y) a la que se mueve la partícula. // 7. Anime el movimiento de partículas a la posición generada en 6. // 8. Repita 6 y 7 una vez que la animación mencionada en 7 termine. ; function randomInt (max) // Genera un entero aleatorio (0) <= randomInt < max) return Math.floor(Math.random() * max);  $(function() var total = 50; var particles = []; for (i = 0; i < total; i++) particles[i] = new Particle();  );
  1. La lógica de ocho pasos está envuelta en una función llamada Partícula. Definir una función es la forma de definir una 'clase' en Javascript.
  2. Tendremos que generar muchos enteros aleatorios en este efecto, desde la velocidad hasta las posiciones X-Y. Así que vamos a escribir una función para este único propósito y nombrarla randomInt. Genera un entero aleatorio menor que un número dado. Usaremos esta función de vez en cuando, así que no te olvides de ella..
  3. Al final, instanciamos el Partícula funciona en un bucle, creando 50 instancias de partículas, cada una de las cuales se almacena en una matriz llamada partículas. Presta atención a 'nuevo'palabra clave que usamos para instanciar un objeto.

Algunos ajustes básicos

En esta sección, definiremos propiedades y métodos para la clase Particle. Y veremos cómo elegir aleatoriamente un modelo de partículas..

Podemos usar elesta'palabra clave para definir propiedades para una' clase '. Cuando se trata de definir métodos, el 'prototipo'La propiedad es el camino a seguir. Mire el código de abajo y le daremos algunas explicaciones..

 function Particle () this.path = 'images /'; this.images = ['particle1.png', 'particle2.png', 'particle3.png', 'particle4.png']; // Escoge aleatoriamente un modelo de partícula this.image = this.images [randomInt (this.images.length)]; this.file = this.path + this.image; // Crear un DOM de partículas this.element = document.createElement ('img'); // Una secuencia de acciones para tomar this.speed (). NewPoint (). Display (). NewPoint (). Fly (); ; // Generar una velocidad aleatoria Particle.prototype.speed = function () ; // Generar una posición aleatoria Particle.prototype.newPoint = function () ; // Mostrar la Partícula Particle.prototype.display = function () ; // Animar movimientos de partículas Particle.prototype.fly = function () ;
  1. En las líneas 2 y 3, definimos la ruta y los nombres de archivo de nuestras imágenes de partículas. Hay más de una imagen de partículas, así que las almacenamos en una matriz (una propiedad de Partícula).
  2. En la línea 6, se selecciona una imagen de partículas aleatorias de la matriz mencionada anteriormente. los randomInt La función que definimos anteriormente se usa aquí. Muy manejable, ja?
  3. En la línea 7, concatenamos la ruta y el nombre del archivo..
  4. En la línea 10, se crea un img DOM. Este es el contenedor de una partícula..
  5. La línea 13 es el núcleo de este efecto. Una secuencia de métodos se llama en una cadena. Esta única línea de código cubre los pasos del 3 al 8 mencionados en la sección anterior. Revisaremos cada uno de estos métodos muy pronto..
  6. Desde la línea 17 hasta el final, se definen cuatro métodos para la Partícula clase. Cada uno de ellos cuida una cosa particular para una partícula.. Velocidad() genera la velocidad aleatoria. NewPoint () genera un conjunto aleatorio de posición X-Y. Monitor() se asegura de que la partícula se muestra correctamente. Y volar() se encarga de la animación..
  7. Preste atención a la forma en que definimos los métodos para una 'clase' en las líneas 17, 20, 23 y 26. Los nuevos métodos se definen en la prototipo propiedad de una clase. Puede parecer un poco complicado para los chicos de un fondo en C, Java o PHP (como yo). Si se siente incómodo con esto, no dude en dedicar un minuto a leer este artículo..

De hecho, hay muchas formas diferentes de definir propiedades y métodos para una clase de Javascript. Aquí hay un gran artículo sobre este tema.

Velocidad aleatoria

Por ahora, tenemos una idea de cómo funciona este efecto. A partir de esta sección, comenzaremos a escribir las funciones que usamos para manipular el movimiento de una partícula..

Primero, generemos una velocidad aleatoria para una partícula. La velocidad determina qué tan rápido viaja una partícula. Si está familiarizado con jQuery, comprenderá que no podemos simplemente pasar a velocidad real, digamos 100 píxeles por segundo. De hecho, el parámetro usado para describir la velocidad en jQuery es la duración medida en milisegundos. Entonces, la pregunta es cómo generar una duración razonable en la cual una partícula viaja de un lugar a otro. ¿Qué pasa con el siguiente código??

 // Generar velocidad aleatoria Particle.prototype.speed = function () this.duration = (randomInt (10) + 5) * 1000; devuelve esto ;
  1. En la Línea 3, simplemente generamos un número entero aleatorio entre 5000 y 14000. Es decir, una partícula mantendrá su velocidad y dirección sin cambios durante 5 a 14 segundos antes de dar un giro y avanzar hacia otra parte.
  2. Mira la línea 5. ¿Por qué nosotros? devuelve esto? ¿Recuerdas que estas funciones serán llamadas en una cadena? Devolver el objeto original garantiza que la función de seguimiento funcione correctamente. También necesitaremos esto en otros métodos..
  3. Una vez que se ejecuta esta función, un duración propiedad en accesible en una Partícula ejemplo.

Posición aleatoria

Un conjunto aleatorio de posición X-Y es muy útil en este efecto. Se puede utilizar para determinar:

  • En qué punto aparece inicialmente una partícula,
  • A qué punto una partícula se mueve una vez que nace o termina un viaje..

Aquí está el código que necesitamos para generar un conjunto aleatorio de posición X-Y.

 // Generar una posición aleatoria Particle.prototype.newPoint = function () this.pointX = randomInt (window.innerWidth - 100); this.pointY = randomInt (window.innerHeight - 100); devuelve esto ;

El tamaño de la ventana actual del navegador se puede recuperar desde window.innerWidth y window.innerHeight. Si una partícula vuela más allá del límite de la ventana, aparecerán barras de desplazamiento. Puede que no queramos que eso suceda. Así que confinemos el movimiento de partículas en un área que es 100 píxeles menos alta y ancha que la ventana del navegador. El código anterior debe ser bastante sencillo. Una vez ejecutada esta función., puntoX y punto Y Las propiedades se vuelven accesibles. Una vez que la función se ejecuta una segunda vez, puntoX y punto Y será renovado en el caso de Partícula.

Mostrar la partícula

En las secciones anteriores, ya se creó un img DOM para una nueva partícula. Ahora vamos a establecer algunos atributos y mostrar la partícula en algún lugar de la ventana del navegador. Esto se logra con el siguiente código.

 // Mostrar la Partícula Particle.prototype.display = function () $ (this.element) .attr ('src', this.file) .css ('position', 'absolute') .css ('top', this.pointY) .css ('left', this.pointX); $ (document.body) .append (this.element); devuelve esto ;
  1. En linea 3, este.elemento contiene el img DOM creado. Estableceremos atributos para ello en esta función..
  2. En linea 4, Este archivo contiene la imagen aleatoria que escogimos de los cuatro modelos de partículas. Estableciendo el src atributo, traemos la imagen de partículas al nuevo img DOM.
  3. Con las líneas 5 a 7, la partícula se coloca en algún lugar de la ventana del navegador.
  4. En la línea 8, el img DOM que se acaba de crear se anexa al cuerpo. La partícula nunca aparecerá a menos que escribamos esta línea de código simple.

Animar los movimientos de partículas

Finalmente, hemos llegado a la parte de animación que puede aparecer más simple de lo que pensabas..

La función animada en jQuery hará el truco por nosotros. Lleva cuatro parámetros: animar (parámetros, duración, suavizado, devolución de llamada). Revisa la documentación si no tienes idea de lo que hace.

 // Animar movimientos de partículas Particle.prototype.fly = function () var self = this; $ (this.element) .animate ("top": this.pointY, "left": this.pointX,, this.duration, 'linear', function () self.speed (). newPoint (). volar(); ); ;

Lo que hace el código anterior es bastante simple:

  1. Anima la partícula a una posición aleatoria..
  2. La animacion lleva este.duración milisegundos para completar.
  3. La partícula se mueve a velocidad constante. (El modo de aceleración es 'lineal'.)
  4. Una vez que se completa la animación, el código en la línea 8 se ejecutará como devoluciones de llamada.
  5. En la línea 8, se generará una nueva velocidad, se calculará una nueva posición y la volar() La función (la que estamos escribiendo en esta sección) se ejecutará de nuevo..
  6. Repita desde el paso 1.

Entonces el volar() La función se llama a sí misma repetidamente. Con esta función recursiva, la animación sigue y sigue para siempre. Por ahora, podemos escribir la historia completa de la vida de una partícula. Todavía recuerdo la siguiente cadena?

 this.speed (). newPoint (). display (). newPoint (). fly ();

Repasemos lo que hace:

  1. Se genera una nueva velocidad..
  2. Se calcula un nuevo conjunto de posiciones X-Y..
  3. La partícula aparece en la posición calculada en el Paso 3.
  4. Se calcula una nueva posición..
  5. La partícula se mueve a la posición calculada en el Paso 5.
  6. Se genera nueva velocidad..
  7. Se calcula un nuevo conjunto de posiciones X-Y..
  8. La partícula se mueve a la posición calculada en el Paso 7.
  9. Una vez que la animación está completa, repita desde el Paso 6.

Si estos pasos te suenan como un trabalenguas ... Bueno, mira esta figura de nuevo. Ahora deberías poder codificar cada paso. Y debes saber cómo organizar todo el material en una estructura orientada a objetos. Finalmente el efecto luciérnaga es completo..


Conclusión

Ahora todos deberían poder implementar este efecto en sus propios proyectos. Esperemos que tenga una mejor comprensión de Javascript orientado a objetos también.

Lo que más me gusta de este efecto es que al cambiar las imágenes de fondo y de partículas, puede producir una apariencia y sensación completamente diferentes. Puede tener aviones o incluso superhombres volando en su página web si lo desea. Tu imaginación es el limite.

Eso es todo para este tutorial. Espero que lo disfrutes. Gracias por leer!


Código
×