Hozzon létre ripple hatásokat a Pixijs

Feb 2, 2026

kézikönyv

Sok érdekes effektus van, amely hozzáadható egy oldalhoz, hogy növelje az elkötelezettséget, de fontos, hogy olyan hatásokat válasszon, amelyek jól illeszkednek a helyszín általános esztétikájával (a webhelyének esztétikáját ragyogóan weboldal építője eszköz). Itt bemutatjuk, hogyan kell bevezetni az elmozdulást a JavaScript-szel. Kijelentkezik Mustafacelik Nagyszerű példa a hatás hatására.

Szeretné az elemzési elemzést érinteni? Web hosting A szolgáltatások segíthetnek ezzel. És győződjön meg róla, hogy az adatokat biztonságban tartja a tetején felhő tároló .

1. Halmok létrehozása

A ripple hatások létrehozása érdekében a Pixijs-t használják, mivel ez egyszerű elmozdulási hatásokat biztosít. Itt a JavaScript kód beállítja a szükséges változókat, és betölti a képeket a hatás létrehozásához. A képek betöltése után a "Setup" funkciót hívják.

 VAR APP = új pixi.Application (window.innerwidth, window.innerheight);
document.body.appendchild (app.view);
app.spage.interactive = true;
var posx, elmozdulásokPrite, elmozdulásFilter, BG, VX;
VAR CONTAINER = új pixi.container ();
app.Stage.addchild (tartály);
Pixi.loader.add ("img / ripple.png"). Add ("img / bg.jpg"). Terhelés (beállítás);

2. Hozzon létre az elmozdulást

A „beállítás” funkció az elmozdulás Sprite jön létre, amely megteremti a tovagyűrűző hatása, és ezt hozzáadjuk a helyettesítési szűrőt. Ezután beállítja, hogy mozgassa a horgonypontot a kép középpontjába, és a képernyőn helyezze el.

 Funkcióbeállítás () {
  posx = app.renderer.width / 2;
  elmozdulásokPrite = új pixi.sprite (pixi.loader.resources ["img / ripple.png]]. Textúra);
  elmozdulásFilter = új pixi.filters.displimementFilter (elmozdulásokPrite);
  elmozdulásokPrite.anchor.set (0,5);
  elmozdulásokPrite.x = app.render.width
/ 2;
  elmozdulásokPrite.y = app.renderer.height
/ 2;
  vx = elmozdulásokPrite.x;

3. Végezze el a beállítást

A "Setup" funkció befejezéséhez az elmozdulási szűrő skála be van állítva, és a háttér elhelyezve. FIGYELMEZTETÉS A skála "0" az elmozduláshoz, ez azért van, mert az egér mozog, amint az egér mozog.

 app.Stage.addchild (elmozdulásokPrite);
  konténer.filters = [elmozdulásFilter];
  kiszorításFilter.scale.x = 0;
  kiszorításFilter.scale.y = 0;
  bg = új pixi.sprite (pixi.loader.resources ["img / bg.jpg"]. Textúra);
  BG.WIDTH = APP.Renderer.Hét;
  bg.height = app.renderer.height;
  konténer.addchild (BG);
  app.spage.on ("Mousemove", újoncol).
  hurok();
}

4. Szerezd meg az egeret

A következő kód csak megragadja az egér helyzetét az X-tengelyen, amikor az egér mozog. Ez arra szolgál, hogy kiváltja a ripple elmozdulási hatás mennyisége, ha a felhasználó az egeret mozgatja. A mozgalom nagyobb lesz a ripple nagyobb.

 Funkció az Onpointermove (EventData) {
  posx = enddata.data.global.x;
 }

5. mozogjon

A "hurok" funkció folyamatosan frissíti a képernyőt. Az X-tengely sebességét az egér és a ripple helyzetével dolgozzák ki. Ezután a szűrőre leképezhető, hogy értéket kapjon 0 és 120 között.

 Funkcionális hurok () {
  kérdőkölcsönzés (hurok);
  vx + = (posx - elmozdulásokPrite.x) * 0,045;
  elmozdulásokPrite.x = VX;
  VAR DISP = MATH.FLOOR (POSX - DISPLACHACHICHSPRITE.X);
  Ha (DISP & LT; 0) DISP = -DISP;
  var fs = térkép (DISP, 0, 500, 0, 120);
  DISP = térkép (DISP, 0, 500, 0,1, 0,6);

6. Végezze el a kódot

A "hurok" funkció végén a sprite az elmozdulás és a szűrő mennyiségét skálázza a mélység mennyiségére. Végül a térképfunkciót kijelentik, hogy a MAPS értéke az új értékekre vonatkozik.

 elmozdulásokPrite.scale.x = DISP;
  elmozdulásfilter.scale.x = FS;
}
 Térkép = funkció (N, START1, stop1, start2, stop2) {
  VAR NewVal = (N - START1) / (stop1 - start1) * (Stop2 - START2) + START2;
  Visszatérés NewVal;
};

Keresse meg a teljes kódot a bemutatóhoz Filesilo .

Ez a cikk eredetileg megjelent a Web Designer magazinban. Iratkozzon fel itt .

További információ a Generate London 2018

An image displaying the speakers appearing at Generate London and providing a link to buy tickets. — Látni Sarah Parmenter, Bruce Lawson, Richard Rutter és több beszélgetés London 2018

Különleges hatások és azon túl vannak, ahol a web vezet, és hangszórót generál, Marpi Marcinowski kreatív munkája körül forog a 3D világok építésénél, amely az AR, VR-élményeket és a mesemondást stílusosan megteremti.

Beszélgése az összes interaktív médiában és technológiákon keresztül utazik, és a felhasználó szemszögéből néz.

Ne hagyja ki, most kapd meg jegyét

Kapcsolódó cikkek:

Rendben van, hogy olyan webhelyeket építsen, amelyek a JavaScript-re támaszkodnak?
Tökéletes JavaScript 1000 projektben
A CSS-osztályok kezelése a JavaScript segítségével

Hozzon létre ripple hatásokat a Pixijs

1. Halmok létrehozása

2. Hozzon létre az elmozdulást

3. Végezze el a beállítást

4. Szerezd meg az egeret

5. mozogjon

6. Végezze el a kódot

További információ a Generate London 2018

kézikönyv - Most Popular Articles

Hogyan lehet gyorsan vázolni a kezét

Affinitás tervező: Hogyan kell használni a rácsokat

a zbrush reális anatómiája

Divat rugalmas elrendezések a CSS-rácskal

Hogyan lehet létrehozni egy retro logó affinitás tervezővel

Hogyan építsünk gyorsabb weboldalakat

Hozzon létre egy Cinemagrothot a Photoshop 60 másodperc alatt

Hogyan készítsünk egy reális sportkocsi-renderet

Kategóriák