Opret ripple effekter med Pixijs

Sep 12, 2025

hvordan

Der er mange interessante effekter, der kan tilføjes til en side for at øge engagementet, men det er vigtigt at vælge effekter, der kombinerer godt med det samlede æstetik på et websted (negle æstetikken på dit websted med en strålende Website Builder. værktøj). Her viser vi, hvordan vi introducerer forskydning krusninger med JavaScript. Tjek ud Mustafcelik. for et godt eksempel på virkningen i aktion.

Vil du have engagement analytics på tryk? Web Hosting. Tjenester kan hjælpe med dette. Og sørg for at holde dine data sikkert i toppen Sky lagring .

1. Opret krusninger.

For at skabe ripple effekter vil Pixijs blive brugt, da dette giver enkle forskydningseffekter. Her indstiller JavaScript-koden de nødvendige variabler og indlæser billederne for at skabe effekten. Når billederne er indlæst, kaldes 'Setup' -funktionen.

 var app = ny pixi.applikation (vindue.innerwidth, vindue.innerheight);
dokument.body.appendchild (app.view);
app.Stage.interactive = TRUE;
VAR POSX, DISPLACEMENTSPRITE, DISPLACEMENTFILTER, BG, VX;
var container = ny pixi.container ();
app.Stage.addchild (beholder);
Pixi.loader.add ("img / ripple.png"). Tilføj ("img / bg.jpg"). Belastning (setup);

2. Opret forskydningen

I funktionen 'Setup' oprettes forskydningsspriteten, der vil skabe rippeleffekten, og dette tilsættes til et forskydningsfilter. Det er så indstillet til at flytte sit ankerpunkt til midten af billedet og placeres på skærmen.

 Funktionsopsætning () {
  posx = app.renderer.width / 2;
  forskydningsprogram = ny pixi.Sprit (pixi.loader.resources ["img / ripple.png"]. tekstur);
  forskydningsfilter = nye pixi.filters.displacementfilter (forskydningsprogram);
  forskydningsprogram.anchor.set (0,5);
  forskydningsprogram.x = app.renderer.width.
/ 2;
  DisplacementsPrite.y = App.Renderer.Height.
/ 2;
  vx = forskydningerPrite.x;

3. Afslut opsætningen

For at afslutte 'Setup' -funktionen er forskydningsfilterskalaen indstillet, og baggrunden er placeret. Bemærk skalaen er '0' for forskydningen, det er fordi det vil blive indstillet til en højde, så snart musen bevæger sig.

 app.Stage.addchild (forskydningsprogram);
  container.filters = [forskydningsfilter];
  forskydningsfilter.scale.x = 0;
  forskydningsfilter.scale.y = 0;
  bg = ny pixi.Sprit (pixi.loader.resources ["img / bg.jpg"]. tekstur);
  bg.width = app.renderer.width;
  bg.height = app.renderer.height;
  container.addchild (bg);
  app.Stage.On ('mousemove', onpointermove) .on ('touchmove', onpointermove);
  loop ();
}

4. Få musen

Den næste kode tager kun musens position på x-aksen, når musen bevæger sig. Dette vil blive brugt til at udløse mængden af rippelforskydningseffekt, når brugeren bevæger deres mus. Mere bevægelse vil gøre ripplen større.

 Funktion Onpointermove (eventdata) {
  posx = eventdata.data.global.x;
 }

5. Gør det flytte

Funktionen 'Loop' opdaterer løbende skærmen. En hastighed for x-aksen er udarbejdet ved hjælp af musens position og rippelens position. Dette kortlægges derefter på filteret for at give en værdi mellem 0 og 120.

 Funktionsløjfe () {
  requestanimationframe (loop);
  vx + = (posx - forskydningerPrite.x) * 0,045;
  forskydningerPrite.x = vx;
  Var Disp = Math.floor (POSX - DisplacementsPrite.x);
  Hvis (DISP & LT; 0) DISP = -DISP;
  VAR FS = MAP (DISP, 0, 500, 0, 120);
  DISP = MAP (DISP, 0, 500, 0,1, 0,6);

6. Afslut koden

I slutningen af "loop" -funktionen skal spritten skaleres til mængden af forskydning og filter skaleret til mængden af dybde, den skal have. Endelig erklæres kortfunktionen, at kortværdi varierer til nye værdier.

 DistingPlacementsPrite.Scale.x = DISP;
  DisplacementFilter.Scale.x = FS;
}
 MAP = FUNCTION (N, START1, STOP1, START2, STOP2) {
  VAR NewVAL = (N - START1) / (STOP1 - START1) * (STOP2 - START2) + START2;
  returnere NewVal;
};

Find den fulde kode for denne vejledning på FileSilo. .

Denne artikel optrådte oprindeligt i Web Designer Magazine. Abonner her .

Lær mere på generere London 2018

An image displaying the speakers appearing at Generate London and providing a link to buy tickets. — Få til at se Sarah Parmener, Bruce Lawson, Richard Rutter og mere snak på generere London 2018

Special effekter og derover er, hvor nettet er på vej og genererer højttaler Marpi Marcinowskis kreative arbejde drejer sig om bygning 3D verdener, der skaber dårlige Ar, VR oplevelser og historiefortælling i stil med en forskel.

Hans tale vil tage dig på en rejse gennem alle interaktive medier og teknologier og se på det fra brugerens perspektiv.

Gå ikke glip af, få din billet nu

Relaterede artikler:

Er det okay at bygge websteder, der stole på JavaScript?
Perfekt JavaScript i 1.000 projekter
Sådan styrer du CSS klasser med JavaScript

Opret ripple effekter med Pixijs

1. Opret krusninger.

2. Opret forskydningen

3. Afslut opsætningen

4. Få musen

5. Gør det flytte

6. Afslut koden

Lær mere på generere London 2018

hvordan - Mest populære artikler

Sådan oprettes et lokalt udviklingsmiljø

5 Hot New CSS-funktioner og hvordan du bruger dem

Forstå Unity Asset import pipeline

Mal et udtryksfuldt stilleben i akryl

Download filer til 3D World 232

Lær at animere for børn

Sådan styrer du CSS-klasser med JavaScript

Skærpe dine skitseringsfærdigheder

Kategorier