Créer des effets d'ondulation avec Pixijs

Feb 6, 2026

Comment

[dix] [dix] [dix]

[dix]

Il y a beaucoup d'effets intéressants qui peuvent être ajoutés à une page pour accroître l'engagement, mais il est important de choisir des effets qui se combinent bien avec l'esthétique globale d'un site (clouez l'esthétique de votre site avec un brillant Générateur de site Web outil). Ici, nous démontrons comment introduire des ondulations de déplacement avec JavaScript. Vérifier Mustafacelik pour un excellent exemple de l'effet en action.

[dix]

Vous voulez des analyses d'engagement sur le robinet? hébergement Web Les services peuvent aider avec cela. Et assurez-vous de garder vos données en sécurité en haut stockage en ligne .

1. Créer des ondulations

Pour créer des effets d'ondulation, Pixijs sera utilisé car cela fournit des effets de déplacement simples. Ici, le code JavaScript définit les variables nécessaires et charge les images pour créer l'effet. Une fois que les images sont chargées, la fonction 'SETUP' est appelée.

 var app = nouvelle pixi.application (fenêtre.innerWidth, fenêtre.innerheight);
document.body.AppendChild (app.view);
app.stage.interactive = vrai;
var posx, déplacementsprite, déplacementfilter, BG, VX;
varecteur var = nouveau pixi.container ();
app.stage.addchild (conteneur);
Pixi.loader.add ("img / ripple.png"). Ajouter ("img / bg.jpg"). Charge (configuration);

2. Créer le déplacement

Dans la fonction "Configuration", la sprite de déplacement est créée qui créera l'effet d'ondulation et cela est ajouté à un filtre de déplacement. Il est ensuite réglé pour déplacer son point d'ancrage au centre de l'image et positionné à l'écran.

 Configuration de la fonction () {
  POSX = App.Renderer.Width / 2;
  déplacementsprite = nouveau pixi.sprite (Pixi.Loader.Resources ["img / ripple.png"]. Texture);
  déplacementfilter = nouveau pixi.filters.displacementfilter (déplacementsprite);
  déplacementsprite.Shanchor.set (0.5);
  Déplacementsprit.x = app.Renderer.Widthwidth
/ 2;
  Déplacementsprit.y = app.Renderer.Height
/ 2;
  vx = déplacementsprit.x;

3. Terminez la configuration

Pour terminer la fonction 'Configuration', l'échelle de filtrage de déplacement est définie et l'arrière-plan positionné. Remarquez que l'échelle est «0» pour le déplacement, c'est que cela sera défini sur une hauteur dès que la souris se déplace.

[dix]

 app.stage.addchild (déplacementsprite);
  conteneur.filters = [déplacementfilter];
  déplacementfilter.cale.x = 0;
  déplacementfilter.cale.y = 0;
  bg = nouveau pixi.sprite (pixi.loader.Resources ["img / bg.jpg"]. Texture);
  bg.width = app.Renderer.Width;
  bg.height = app.Renderer.Height;
  conteneur.adddchild (BG);
  app.stage.on ('Mousemove', OnpointeMove) .on ('TouchMove', Onpointmove);
  boucle();
}

4. Obtenez la souris

[dix]

Le code suivant attrape simplement la position de la souris sur l'axe des x lorsque la souris se déplace. Ceci sera utilisé pour déclencher la quantité d'effet de déplacement d'ondulations lorsque l'utilisateur déplace sa souris. Plus de mouvement fera l'ondulation plus gros.

 Fonction sur CompoutMove (EventData) {
  POSX = EventData.Data.global.x;
 }

5. Faites-le bouger

La fonction «boucle» met à jour continuellement l'écran. Une vitesse pour l'axe X est élaborée à l'aide de la position de la souris et de l'ondulation. Ceci est ensuite mappé sur le filtre pour donner une valeur comprise entre 0 et 120.

 boucle de fonction () {
  demandaimationframe (boucle);
  VX + = (POSX - Déplacementprit.x) * 0,045;
  déplacementspriter.x = VX;
  var app = math.floor (POSX - Déplacementsprit.x);
  Si (DISP & LT; 0) DISP = -DISP;
  var fs = carte (DISP, 0, 500, 0, 120);
  DISP = carte (DISP, 0, 500, 0,1, 0,6);

6. Terminez le code

À la fin de la fonction «boucle», le sprite est mis à l'échelle à la quantité de déplacement et de filtre à l'échelle à la quantité de profondeur qu'elle devrait avoir. Enfin, la fonction de carte est déclarée que la valeur des cartes varie vers de nouvelles valeurs.

 déplacementsprit.scale.x = disp;
  déplacementfilter.cale.x = fs;
}
 map = fonction (n, start1, stop1, start2, stop2) {
  var newval = (n - start1) / (stop1 - start1) * (Stop2 - Start2) + Start2;
  retourneval;
};

Trouvez le code complet de ce tutoriel sur Fichiers .

Cet article est apparu à l'origine dans le magazine Web Designer. S'abonner ici .

En savoir plus à Generate London 2018

An image displaying the speakers appearing at Generate London and providing a link to buy tickets. — Pour voir Sarah Parmmenter, Bruce Lawson, Richard Rutter et plus de conversation à Generate London 2018

Effets spéciaux et au-delà est l'endroit où le Web est en dirigeant et génère le travail de création de Marcinowski par le haut-parleur autour du monde des mondes 3D, créant des arts immersives, des expériences VR et de la narration avec une différence.

Son conversation vous mènera dans un voyage à travers tous les médias et technologies interactifs et la regarder du point de vue de l'utilisateur.

Ne manquez pas, obtenez votre billet maintenant

Articles Liés:

Est-ce que ça va de construire des sites qui s'appuient sur JavaScript?
Parfait JavaScript dans 1 000 projets
Comment gérer les cours CSS avec JavaScript

[dix] [dix]

[dix]

Créer des effets d'ondulation avec Pixijs

1. Créer des ondulations

2. Créer le déplacement

3. Terminez la configuration

4. Obtenez la souris

5. Faites-le bouger

6. Terminez le code

En savoir plus à Generate London 2018

Comment - Most Popular Articles

Comment dessiner un chien

Comment retourner une couche dans Photoshop: un guide complet

Comment accélérer et optimiser les sites WordPress

Créer des textures avec l'outil Tampon Motif

Créer un intérieur accueillant à l'aide de la ligne d'art

Comment créer des caractères de bande dessinée à fourrure

Comment ajouter du drame à vos œuvres d'art pastel

Comment rendre un ciel photoréaliste

Catégories