Crea efectos de ondulación con Pixijs

Sep 11, 2025

Cómo

[dieciséis]

Hay muchos efectos interesantes que se pueden agregar a una página para aumentar el compromiso, pero es importante elegir los efectos que combinan bien con la estética general de un sitio (clavo la estética de su sitio con un brillante Creador de sitios web herramienta). Aquí demostramos cómo introducir ondas de desplazamiento con JavaScript. Revisa Mustafacelik Para un gran ejemplo del efecto en la acción.

¿Quieres análisis de compromiso en el grifo? Alojamiento web Los servicios pueden ayudar con esto. Y asegúrese de mantener sus datos seguros en la parte superior almacenamiento en la nube .

1. Crea ondulaciones

Para crear efectos de ondulación, se utilizarán PIXIJS, ya que esto proporciona efectos de desplazamiento simples. Aquí, el código JavaScript establece las variables necesarias y carga las imágenes para crear el efecto. Una vez que las imágenes se cargan, la función 'Configuración' se llama.

 Var App = New Pixi.Application (Window.Innerwidth, Window.InnerHeight);
documento.body.appendchild (App.View);
app.stage.interactive = verdadero;
var Posx, desplazamientos de desplazamiento, desplazamiento, bg, vx;
var contenedor = nuevo pixi.container ();
app.stage.addchild (contenedor);
Pixi.loader.add ("img / rippple.png"). Agregue ("img / bg.jpg"). Carga (configuración);

2. Crea el desplazamiento.

En la función "Configuración", se crea el Sprite de desplazamiento que creará el efecto de la ondulación y esto se agregará a un filtro de desplazamiento. Luego se configura para mover su punto de anclaje al centro de la imagen y colocarse en la pantalla.

 Configuración de la función () {
  posx = app.renderer.width / 2;
  desplazamientosprites = nuevo pixi.sprite (pixi.loader.resources ["img / rippple.png"]. Textura);
  desplazamientofiltro = nuevo pixi.filters.displacementfilter (desplazamientos);
  desplazamientosprite.anchor.set (0.5);
  desplazamientoprite.x = app.renderer.width
/ 2;
  desplazamientoprite.y = app.renderer.hight
/ 2;
  vx = desplazamientosprite.x;

3. Termina la configuración.

Para finalizar la función 'Configuración', la escala del filtro de desplazamiento se establece y el fondo colocado. Observe que la escala es '0' para el desplazamiento, eso es porque se establecerá en una altura tan pronto como el mouse se mueva.

 app.stage.addchild (desplazamientos);
  contenedor.filters = [DesplazamientoFilter];
  desplazamientofilter.scale.x = 0;
  desplazamientofilter.scale.y = 0;
  bg = new pixi.sprite (pixi.loader.resources ["img / bg.jpg"]. Textura);
  bg.width = app.renderer.width;
  bg.height = app.renderer.height;
  contenedor.addchild (bg);
  app.stage.on ('mousemove', onpointermove) .on ('touchmove', onpointermove);
  lazo();
}

4. Consigue el mouse

El siguiente código solo agarra la posición del mouse en el eje X cada vez que se mueve el mouse. Esto se utilizará para activar la cantidad de efecto de desplazamiento de ondulación cuando el usuario mueve el mouse. Más movimiento hará que la ondulación sea más grande.

 Función OnpointerMove (EventData) {
  posx = eventdata.data.global.x;
 }

5. Hazlo moverlo

La función 'Loop' actualiza continuamente la pantalla. Se elabora una velocidad para el eje X usando la posición del mouse y la ondulación. Luego se mapa en el filtro para dar un valor entre 0 y 120.

 Bucle de función () {
  solicitud de solicitud (bucle);
  vx + = (posx - desplazamientoprite.x) * 0.045;
  desplazamientosprite.x = vx;
  var disp = math.floor (posx - desplazamientoprite.x);
  if (DISP & LT; 0) DISP = -DISP;
  var fs = mapa (DISP, 0, 500, 0, 120);
  DISP = MAP (DISP, 0, 500, 0.1, 0.6);

6. Termina el código

Al final de la función 'Loop', el sprite se escala a la cantidad de desplazamiento y filtro escalado a la cantidad de profundidad que debería tener. Finalmente, la función del mapa se declara que el valor de los mapas varía a los nuevos valores.

 DesplazamientosPRite.scale.x = DISP;
  desplazamientofilter.scale.x = fs;
}
 MAP = Función (n, start1, stop1, start2, stop2) {
  var newval = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
  devolver a newval;
};

Encuentra el código completo para este tutorial en Filesilo .

Este artículo apareció originalmente en la revista Web Designer. Suscríbete aquí .

Aprende más en Generar Londres 2018

An image displaying the speakers appearing at Generate London and providing a link to buy tickets.

Efectos especiales y más allá es donde la web se dirige y genera el trabajo creativo del altavoz Marpi Marcinowski gira en torno a la construcción de mundos 3D, creando experiencias inmersivas AR, VR y cuentas de cuentos con una diferencia.

Su charla lo llevará en un viaje a través de todos los medios y tecnologías interactivas y lo verá desde la perspectiva del usuario.

No te lo pierdas, ahora consigue tu boleto.

Artículos relacionados:

¿Está bien construir sitios que confíen en JavaScript?
JavaScript perfecto en 1,000 proyectos.
Cómo administrar las clases CSS con JavaScript

Crea efectos de ondulación con Pixijs

1. Crea ondulaciones

2. Crea el desplazamiento.

3. Termina la configuración.

4. Consigue el mouse

5. Hazlo moverlo

6. Termina el código

Aprende más en Generar Londres 2018

Cómo - Artículos más populares

Comienza con WebVR

Las reglas de la tipografía web sensible

Construye una aplicación de diseño de material con 2

Comienza con WebGL usando tres.js

Tutorial de texto 3D para diseñadores gráficos

Cómo usar herramientas digitales para crear una mirada dibujada a mano

Cómo hacer una plataforma de cinta flexible

La anatomía de la caricatura: 15 puntas superiores

Categorías