สร้างเอฟเฟกต์ระลอกคลื่นกับ Pixijs

Feb 8, 2026

วิธีการ

มีเอฟเฟกต์ที่น่าสนใจมากมายที่สามารถเพิ่มลงในหน้าเพื่อเพิ่มการมีส่วนร่วม แต่เป็นสิ่งสำคัญที่จะเลือกเอฟเฟกต์ที่รวมเข้ากับความงามโดยรวมของไซต์ (ตอกตะปูความสวยงามของเว็บไซต์ของคุณด้วยความสวยงาม สร้างเว็บไซต์ เครื่องมือ). ที่นี่เราแสดงให้เห็นถึงวิธีการแนะนำระลอกการเคลื่อนที่ด้วย JavaScript เช็คเอาท์ mustafacelik สำหรับตัวอย่างที่ดีของผลกระทบในการดำเนินการ

ต้องการการวิเคราะห์การมีส่วนร่วมในการแตะหรือไม่ เว็บโฮสติ้ง บริการสามารถช่วยได้ และให้แน่ใจว่าได้เก็บข้อมูลของคุณให้ปลอดภัยในด้านบน การจัดเก็บเมฆ .

1. สร้างระลอกคลื่น

ในการสร้างเอฟเฟกต์ระลอก Pixijs จะถูกนำมาใช้ตั้งแต่นี้ให้เอฟเฟกต์การกระจัดง่าย ที่นี่รหัส JavaScript ตั้งค่าตัวแปรที่ต้องการและโหลดภาพเพื่อสร้างเอฟเฟกต์ เมื่อรูปภาพโหลดฟังก์ชั่น 'ตั้งค่า' เรียกว่า

 var app = ใหม่ pixi.application (window.innerwidth, window.innerheight);
document.body.ephendchild (app.view);
app.stage.interactive = true;
Var Posx, DisplacementSprite, DisplacementFilter, BG, VX;
var container = ใหม่ pixi.container ();
app.stage.addchild (คอนเทนเนอร์);
pixi.loader.add ("img / rippple.png") เพิ่ม ("img / bg.jpg") โหลด (ตั้งค่า);

2. สร้างการกระจัด

ในฟังก์ชั่น 'การตั้งค่า' The Displacement Sprite ถูกสร้างขึ้นแล้วว่าจะสร้างเอฟเฟกต์ระลอกคลื่นและสิ่งนี้จะถูกเพิ่มเข้าไปในตัวกรองการกระจัด จากนั้นตั้งค่าให้ย้ายจุดยึดไปที่กึ่งกลางของภาพและวางตำแหน่งบนหน้าจอ

 การตั้งค่าฟังก์ชั่น () {
  POSX = app.renderer.width / 2;
  DisplacementSprite = New Pixi.Sprite (Pixi.loader.Resources ["img / ripple.png"] พื้นผิว);
  displacementfilter = ใหม่ pixi.filters.displacementfilter (displacementsprite);
  DisplacementSprite.Set (0.5);
  displacementsprite.x = app.renderer.width
/ 2;
  displacementsprite.y = app.renderer.height
/ 2;
  VX = DisplacementSprite.x;

3. เสร็จสิ้นการตั้งค่า

หากต้องการปิดฟังก์ชั่น 'ตั้งค่า' ให้เสร็จสเกลของตัวกรองการกระจัดถูกตั้งค่าและตำแหน่งพื้นหลัง สังเกตเห็นสเกลคือ '0' สำหรับการกระจัดนั่นเป็นเพราะมันจะถูกตั้งค่าเป็นความสูงทันทีที่เมาส์เคลื่อนที่

 app.stage.addchild (displacementsprite);
  container.filters = [displacementfilter];
  displacementfilter.scale.x = 0;
  displacementfilter.scale.y = 0;
  BG = ใหม่ Pixi.Sprite (Pixi.loader.Resources ["img / bg.jpg"] พื้นผิว);
  bg.width = app.renderer.width;
  bg.Height = app.renderer.height;
  container.addchild (bg);
  app.Stage.on ('MouseMove', OnpoTerMove) .on ('TouchMove', OnpoTermove);
  ลูป ();
}

4. รับเมาส์

รหัสต่อไปเพียงคว้าตำแหน่งของเมาส์บนแกน x เมื่อใดก็ตามที่เมาส์เคลื่อนที่ สิ่งนี้จะถูกใช้เพื่อกระตุ้นปริมาณของผลกระทบการเคลื่อนที่ระลอกเมื่อผู้ใช้ย้ายเมาส์ของพวกเขา การเคลื่อนไหวมากขึ้นจะทำให้ระลอกคลื่นใหญ่ขึ้น

ฟังก์ชั่น

 OnpoTerMove (EventData) {
  posx = eventdata.data.global.x;
 }

5. ทำให้เคลื่อนที่

ฟังก์ชั่น 'ลูป' ปรับปรุงหน้าจออย่างต่อเนื่อง ความเร็วสำหรับแกน X ทำงานออกมาโดยใช้ตำแหน่งของเมาส์และระลอกคลื่น สิ่งนี้ถูกแมปลงบนตัวกรองเพื่อให้ค่าระหว่าง 0 ถึง 120

 ฟังก์ชั่นลูป () {
  SecureSimationFrame (วนซ้ำ);
  VX + = (POSX - DisplacementSprite.x) * 0.045;
  displacementsprite.x = vx;
  var disp = math.floor (posx - displacementsprite.x);
  ถ้า (disp & lt; 0) disp = -disp;
  Var FS = แผนที่ (DISP, 0, 500, 0, 120);
  DISP = แผนที่ (DISP, 0, 500, 0.1, 0.6);

6. เสร็จรหัส

ในตอนท้ายของฟังก์ชั่น 'ลูป' สไปรต์ถูกปรับสัดส่วนกับปริมาณของการกระจัดและตัวกรองที่ปรับขนาดตามจำนวนความลึกที่ควรมี ในที่สุดฟังก์ชั่นแผนที่จะประกาศว่าค่าแผนที่มีค่าไปยังค่าใหม่

 DisplacementSprite.Scale.x =
  displacementfilter.scale.x = fs;
}
 map = function (n, start1, stop1, start2, stop2) {
  var newval = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
  กลับ newval;
};

ค้นหารหัสเต็มสำหรับการกวดวิชานี้เกี่ยวกับ filesilo .

บทความนี้ปรากฏในนิตยสารออกแบบเว็บ สมัครสมาชิกที่นี่ .

เรียนรู้เพิ่มเติมที่ Generate London 2018

An image displaying the speakers appearing at Generate London and providing a link to buy tickets. — ไปดู Sarah Parmenter, Bruce Lawson, Richard Ritter และคุยกันมากขึ้นที่ Generate London 2018

เอฟเฟกต์พิเศษและอื่น ๆ คือที่ที่เว็บกำลังมุ่งหน้าและสร้างงานสร้างสรรค์ของลำโพง Marpi Marcinowski หมุนรอบสร้างโลก 3 มิติสร้างประสบการณ์ที่สมจริงและการเล่าเรื่องอย่างมีสไตล์ด้วยความแตกต่าง

การพูดคุยของเขาจะพาคุณไปเที่ยวผ่านสื่อและเทคโนโลยีแบบโต้ตอบทั้งหมดและดูจากมุมมองของผู้ใช้

อย่าพลาดจองตั๋วของคุณตอนนี้

บทความที่เกี่ยวข้อง:

มันโอเคที่จะสร้างเว็บไซต์ที่พึ่งพาจาวาสคริปต์หรือไม่?
JavaScript ที่สมบูรณ์แบบในโครงการ 1,000 โครงการ
วิธีจัดการคลาส CSS ด้วย JavaScript

สร้างเอฟเฟกต์ระลอกคลื่นกับ Pixijs

1. สร้างระลอกคลื่น

2. สร้างการกระจัด

3. เสร็จสิ้นการตั้งค่า

4. รับเมาส์

5. ทำให้เคลื่อนที่

6. เสร็จรหัส

เรียนรู้เพิ่มเติมที่ Generate London 2018

วิธีการ - บทความยอดนิยม

วิธีการโพสต์ใหม่บน Instagram

คู่มือที่จำเป็นต่อการย่อท้อในศิลปะ

ดำเนินการทดสอบผู้ใช้ฟรีและรวดเร็วด้วย userlook

พัฒนาทักษะศิลปะแนวคิดของคุณใน Photoshop

ทำให้ผลการพิมพ์ 3 มิติแบบโต้ตอบ

อัพเกรดพื้นผิวของคุณในนักออกแบบสาร

สร้างโปสเตอร์การพิมพ์โดยใช้ Adobe InDesign

วิธีการออกแบบฮีโร่เคลื่อนไหว

หมวดหมู่