สร้างหน้า Landing WebGL 3D

การสร้างหน้า Landing 3D WebGL เป็นวิธีหนึ่งในการสร้างความประทับใจครั้งแรกที่ดีกับผู้ชมของคุณ ด้วย WebGL คุณสามารถส่งมอบเนื้อหาภาพที่มีคุณภาพสูงในเบราว์เซอร์ คุณสามารถทำได้โดยไม่มีปลั๊กอินหรือข้อกำหนดพิเศษใด ๆ เบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับ WebGL พร้อมกับอุปกรณ์พกพาและแท็บเล็ต WebGL ช่วยให้คุณสร้างฉาก 3 มิติที่เหลือเชื่อ มันสามารถเปิดประสบการณ์ WebVR, จัดการวิดีโอ, render shaders กราฟิกและอีกมากมาย

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

คุณจะใช้เฉพาะคุณสมบัติที่รวมไว้ของ Three.JS ซึ่งเป็นห้องสมุดการเรนเดอร์ 3D ที่ทรงพลังสำหรับเว็บ คุณสามารถใช้ภาพของคุณเองเป็นพื้นผิวเพื่อให้เป็นเอกลักษณ์ นอกจากนี้คุณยังสามารถเรียนรู้เกี่ยวกับการใช้ตาข่ายแสงและพื้นผิวเพื่อเพิ่มรายละเอียดพื้นผิววิธีการใช้แผนที่สิ่งแวดล้อมและวิธีการเพิ่มเลเยอร์สำหรับความลึกและความสนใจ

ควรมีมากเกินพอที่จะเริ่มต้นและมีมากมายเพื่อเติมเต็มโครงการต่อไปของคุณ

ก่อนคุณเริ่ม, ดาวน์โหลดไฟล์สำหรับบทช่วยสอนนี้ .

01. การตั้งค่า HTML พื้นฐาน

ในการเริ่มต้นคุณต้องการที่จะเห็นฉาก 3 มิติของคุณ ตั้งค่าไฟล์ HTML พื้นฐานและรวมลิงค์ไปยัง Three.js สิ่งนี้สามารถโฮสต์ภายนอกหรือเพิ่มจาก ที่เก็บสาม.jsที่นี่: . เพิ่ม CSS อย่างง่าย ๆ เพื่อให้หน้าจอเต็มหน้าและลบแถบเลื่อนใด ๆ บันทึกไฟล์ของคุณไปยังเว็บเซิร์ฟเวอร์ในเครื่องของคุณเพื่อให้คุณสามารถให้บริการ HTML เมื่อพร้อมทดสอบ เพิ่มรหัสต่อไปนี้เพื่อเริ่มต้น

 ​​& lt;! Doctype HTML & GT;
& lt; html & gt;
& lt; หัว & gt;
& lt; ชื่อ & gt; สตูดิโอญาติ & lt; / ชื่อ & gt;
& lt; สคริปต์ SRC = "libs / three.min.js" & gt; & lt; / script & gt;
& lt; สไตล์ & gt;
HTML, ร่างกาย {margin: 0; padding: 0; ล้น: ซ่อน; }
& lt; / style & gt;
& lt; / head & gt;
& lt; ร่างกาย & gt;
& lt; สคริปต์ & gt;
// รหัส 3D ไปที่นี่
& lt; / สคริปต์ & gt;
& lt; / body & gt;
& lt; / html & gt; 

02. เพิ่มตัวแปรทั่วโลก

คุณจะต้องมีตัวแปรบางอย่างสำหรับการอ้างอิงตลอดรหัสที่เหลือ ตั้งค่าไว้ตอนนี้ สิ่งนี้จะรวมถึงอาร์เรย์เพื่อเก็บอนุภาคตัวแปร 't' สำหรับ tetrahedron, เมาส์, เรย์แคสเตอร์และไฟ

ภายในแท็กสคริปต์ของคุณเริ่มต้นด้วยการเพิ่มรหัสต่อไปนี้

 // vars
var num = 30;
Var Objects = [];
Var Raycaster = New Three.raycaster ();
Var Mouse = New Three.Vector2 ();
var light, t; 

03. เพิ่มฉากกล้องและแสดงผล

เราต้องเพิ่มฉากก่อนที่จะมีวัตถุทั้งหมดของเรา จากนั้นเราเพิ่มกล้องที่สามารถเคลื่อนที่ไปรอบ ๆ ภายในมันปรากฎการเอียงและเคลื่อนที่ตามที่เราต้องการ คุณลักษณะแรกคือมุมมอง ประการที่สองคืออัตราส่วนภาพ นอกจากนี้คุณยังสามารถกำหนดเครื่องบินที่อยู่ใกล้และไกลในแอตทริบิวต์ที่สามและสี่ สุดท้ายเพิ่ม Renderer ซึ่งจัดการกับการวาดฉากกับผืนผ้าใบ

ในแท็กสคริปต์เพิ่มรหัสต่อไปนี้

 // สร้างกล้อง
Var Camera = New Three.PerspectiveCamera
(65, window.innerwidth / window.innerheight,
0.1, 1,000);
camera.position.set (0.0,0.0,5);
// สร้างฉาก
Var Scene = New Three.Scene ();

// สร้าง renderer
Var Renderer = New Three.WebGlrenderer (
{antialias: true});
renderer.setsize (window.innerwidth, หน้าต่าง
innerHeight);
document.body.ephendchild (renderer.domelement
);

04. เพิ่มสปอตไลท์

ต่อไปคุณต้องเพิ่มแสงไปยังฉาก Three.js มาพร้อมกับความหลากหลายของแสงรวมถึงจุดทิศทางทิศทางแวดล้อมและสปอตไลท์ ใช้สปอตไลท์สำหรับสิ่งนี้ มันจะให้ตำแหน่งและคุณสมบัติทิศทางและอนุญาตให้คุณจับเงาถ้าคุณต้องการในภายหลัง

เพิ่มรหัสต่อไปนี้ถัดไปเพื่อเพิ่มสปอตไลท์

 // สร้างจุดไฟ
Light = New Three.Spotlight (0xccddff, .8);
light.position.set (0,0,5);
Scene.add (แสง); 

05. เพิ่มลูปภาพเคลื่อนไหว

การวนดูอนิเมชั่นบางครั้งเรียกว่า 'การเรนเดอร์ลูป' เรียกว่าดีกว่า 60 ครั้งต่อวินาที ฟิล์มทำงานที่ 24 เฟรมต่อวินาที (FPS) และนี่ก็เร็วพอที่จะหลอกตาเพื่อดูการเคลื่อนไหวอย่างต่อเนื่องโดยไม่หยุดชะงัก ในภาพเคลื่อนไหวคอมพิวเตอร์เรามุ่งมั่นอย่างน้อย 30 FPS แต่เป็น 60fps อย่างดีเยี่ยม สิ่งนี้ทำให้มั่นใจได้ว่าการแสดงภาพที่ราบรื่นมากแม้ว่าเฟรมจะลดลงเป็นระยะ

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

เพิ่มรหัสนี้เพื่อแสดงฉากในวงอนิเมชั่น:

 var animate = ฟังก์ชั่น () {
SecureSimationFrame (Animate);
renderer.render (ฉากกล้อง);
};

// เริ่มต้นแอนิเมชั่นลูป
Animate (); 

06. โหลดเนื้อดิน

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

คุณสามารถเลือกสิ่งที่จะกระเบื้อง ซึ่งหมายความว่าขอบจะผสมผสานกันอย่างราบรื่นหากคุณวางเคียงข้างกัน คุณสามารถเลือกบางอย่างเช่นกระเบื้องหรือหินสำหรับสิ่งนี้ ขอให้สังเกตว่าคุณใช้ตัวเลือกการห่อพื้นผิวเพื่อทำซ้ำห่อสำหรับสิ่งนี้ ตัวอย่างนี้ใช้การทำซ้ำ 12x12 ปรับสิ่งนี้ให้เหมาะกับภาพของคุณเมื่อคุณทดสอบฉาก

 // โหลดพื้นผิวพื้นดิน
Var Texture = New Three.textureLoader ()
โหลด ("สินทรัพย์ / หิน JPG");
texture.wraps = texture.wrapt = สาม
การทำซ้ำ;
Texture.Repeat.Set (12,12);

07. สร้างวัสดุพื้นดิน

Three.js รวมถึงประเภทวัสดุที่หลากหลายสำหรับคุณที่จะใช้ วัสดุที่คิดว่าเป็นผิวที่ครอบคลุมวัตถุ 3 มิติ คุณสามารถใช้วัสดุพื้นฐานที่ไม่ตอบสนองต่อแสงหรือพงษ์หรือวัสดุ Lambert Shader ที่ทำ คุณสามารถใช้วัสดุ SHADER ที่กำหนดเองได้เช่นกัน สำหรับพื้นนี้ใช้วัสดุทางกายภาพ มันมีลักษณะที่สมจริงมากตอบสนองต่อแสงได้ดีมาก ใช้พื้นผิวที่คุณโหลดเป็นแผนที่กระจายและเป็น BumpMap หากคุณไม่มีพื้นผิวที่เฉพาะเจาะจงสำหรับสิ่งนั้น

 // สร้างวัสดุพื้นดิน
Material = New Three.meshymysicalmaterial ({แผนที่: พื้นผิว, BUMPMAP: พื้นผิว}); 

08. สร้างตาข่ายกราวด์

เมื่อเรารวมวัสดุ (ผิวหนัง) กับรูปทรงเรขาคณิตที่กำหนดรูปร่างของวัตถุ 3 มิติเราสร้างตาข่าย สำหรับพื้นดินคุณต้องมีแผนง่าย วัสดุและพื้นผิววัสดุจะสร้างภาพลวงตาของรายละเอียดพื้นผิวที่ซับซ้อน

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

 // สร้างตาข่ายพื้นดิน
var geometry = ใหม่สาม planeBuffergeometry
(100,100);
Var Ground = New Three.mesh (เรขาคณิต,
วัสดุ);
ground.rotation.z = math.pi / 180 * -45;
ground.rotation.x = math.pi / 180 * -90;
ground.position.y = -2.0;
Scene.add (พื้นดิน); 

09. โหลดวัตถุประสงค์

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

 // โหลดเนื้อวัตถุ
Var Texture = New Three.textureLoader ()
โหลด ("สินทรัพย์ / rock_01_diffusion.jpg"); 

10. สร้างแผนที่สภาพแวดล้อม

ถัดไปสร้างสภาพแวดล้อมรอบ ๆ วัตถุของคุณที่จะสะท้อนให้เห็นบนพื้นผิวของมัน นอกจากนี้คุณยังสามารถเพิ่มสิ่งนี้ลงในที่เกิดเหตุเป็นคุณสมบัติฉากแบ็คกราวด์หากคุณต้องการ ในการโหลดสภาพแวดล้อมคุณใช้ cubetextureloader ภาพที่คุณใช้ควรเป็นภาพหกภาพที่ผิวด้านในของลูกบาศก์ของคุณเพื่อสร้างภาพที่ไร้รอยต่อที่เรียกว่า Cube Maps

 var envmap = ใหม่สาม.cubetextureLoader ()
.SetPath ('สินทรัพย์ /')
. โหลด (['px.jpg', 'nx.jpg', 'py.jpg', 'ny
jpg ',' pz.jpg ',' nz.jpg ']); 

11. เพิ่ม Tetrahedon

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

เพิ่มหนึ่งไปยังฉากของคุณด้วยรหัสต่อไปนี้

 // สร้าง tetrahedron
Var Geometry = ใหม่สาม
tetrahedronronbuffergeometry (2,0);
วัสดุ var = ใหม่สาม meshymyicalmaterial
({แผนที่: พื้นผิว, undmap: envmap,
โลหะ: 1.0, ความหยาบ: 0.0});
T = ใหม่สามเครื่อง (เรขาคณิตวัสดุ);
t.rotation.x = math.pi / 180 * -10;
Scene.add (t);

12. เพิ่มการหมุนและเป้าหมายกล้อง

เพื่อให้แน่ใจว่ากล้องดูวัตถุหลักของคุณอยู่เสมอคุณใช้ฟังก์ชั่น Camera.Lookat นอกจากนี้คุณยังสามารถเพิ่มการหมุนรอบโดยรอบให้กับวัตถุของคุณเช่นกัน

อัปเดตรหัสฟังก์ชั่นเคลื่อนไหวของคุณให้มีลักษณะเช่นนี้

 SecureSimationsFrame (Animate);
t.rotation.y - = 0.005;
camera.lookat (t.position);
renderer.render (ฉาก, กล้อง); 

13. เพิ่มลูปอนุภาค

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

 สำหรับ (i = 0; i & lt; = num; i ++) {
// รหัสอนุภาคจะไปที่นี่
} 

14. สร้างตาข่ายอนุภาค

สิ่งแรกที่ต้องทำคือสร้างวัตถุอนุภาค คุณสามารถทำได้ด้วย Spheres, Sprites หรือวัตถุใด ๆ ที่คุณต้องการ สำหรับตอนนี้ลองทำทรงกลมเรียบง่าย

ภายในของคุณสำหรับลูปของคุณเพิ่มรหัสต่อไปนี้

 // สร้างตาข่ายใหม่
Var Geometry = New Three.SphereBuffergeometry (.1,6,6);
Var Material = New Three.meshymysicalmaterial ({envmap: envmap, โลหะ: 1.0});
Var Particle = ใหม่สามเครื่อง (รูปทรงเรขาคณิตวัสดุ);

15. ตั้งตำแหน่งและระยะทางแบบสุ่ม

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

 // ตั้งตำแหน่งสุ่ม
particle.position.set (math.random () * 100.0 -
50.0,0.0, Math.Random () * - 10.0);
// calc distnace เป็นค่าคงที่และกำหนด
เพื่อคัดค้าน
var a = new three.vector3 (0, 0, 0);
var b = particle.position;
var d = a.distanceto (b);
particle.distance = d;

16. ตั้งมุมสำหรับวงโคจร

ในการทำให้การเคลื่อนไหวของวงโคจรเร็วขึ้นให้เพิ่มค่าคงที่มุมสำหรับวงโคจรและเก็บไว้เป็นคุณสมบัติของอนุภาค เพิ่มรหัสต่อไปนี้เพื่อกำหนดมุมเนื้อหาแบบสุ่มเหล่านี้

 // กำหนด 2 แบบสุ่ม แต่คงที่
ในเรเดียน
particle.radians = math.random () * 360 * คณิตศาสตร์
PI / 180; // มุมเริ่มต้น
particle.radians2 = math.random () * 360 * คณิตศาสตร์
PI / 180; // มุมเริ่มต้น

17. เพิ่มอนุภาคให้ฉากและคอลเลกชัน

ท้ายที่สุดเพิ่มอนุภาคไปยังฉากและไปยังอาร์เรย์วัตถุที่คุณกำหนดไว้ก่อนหน้านี้ สิ่งนี้จะทำให้อนุภาคทั้งหมดเป็นเรื่องง่ายในภายหลัง

 // เพิ่มวัตถุไปยังฉาก
Scene.add (อนุภาค);
// เพิ่มการเก็บ
วัตถุ. PUSH (อนุภาค);

18. เพิ่มแอนิเมชั่นให้กับอนุภาค

ต่อไปคุณต้องอัปเดตตำแหน่งและการหมุนของวัตถุอนุภาคของคุณ วงโคจรเหล่านี้อยู่ในระยะทางคงที่จากศูนย์ฉาก เพิ่มรหัสต่อไปนี้ในฟังก์ชั่นภาพเคลื่อนไหวของคุณ

 สำหรับ (i = 0; i & lt; = num; i ++) {
var o = วัตถุ [i];
o.rotation.y + =. 01;
ถ้า (i% 2 == 0) {
o.radians + =. 005; o.radians2 + =. 005;
} อื่น {
o.radians - =. 005; o.radians2 - =. 005;
}
o.position.x = (math.cos (o.radians) *
o.Distance);
o.position.z = (math.sin (o.radians) *
o.Distance);
o.position.y = (math.sin (o.radians2) *
o.Distance * .5);
}

19. เพิ่มชื่อ

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

ก่อนอื่นเพิ่มองค์ประกอบ DOM สำหรับชื่อของคุณ เพิ่มนี้หลังจากแท็กสคริปต์ก่อนที่จะปิดแท็กร่างกาย

 & lt; h1 & gt; สตูดิโอญาติ & lt; / h1 & gt;

เพิ่มสไตล์ต่อไปนี้สำหรับชื่อของคุณในแท็กสไตล์ของคุณที่ด้านบนของไฟล์ของคุณ

H1 {สี: ขาว; ตำแหน่ง: แน่นอน; ด้านบน: 50%;
z-index: 100; ความกว้าง: 100%; จัดเรียงข้อความ: กึ่งกลาง;
แปลง: แปล (0, -100%); ตัวอักษรตระกูล:
'Raleway' Sans-Serif; ฟอนต์ - น้ำหนัก: 100;
การเว้นวรรคตัวอักษร: 40px; ข้อความเปลี่ยน:
ตัวพิมพ์ใหญ่; ขนาดตัวอักษร: 16px; }

20. เพิ่มวงจรวิดีโอ

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

 ​​& lt; id video = "videobacker" loop src = "สินทรัพย์ /
Snow.mp4 "Autoplay ปิดเสียง & GT; & lt; / video & gt;

ในการจัดรูปแบบวิดีโอเพิ่ม CSS ต่อไปนี้ให้กับสไตล์ของคุณที่หัวของหน้าเว็บของคุณ

 ​​#videobacker {ขนาดพื้นหลัง: ปก;
วัตถุพอดี: ปก; z-index: 9; ความทึบแสง: .3;
ตำแหน่ง: แน่นอน; ด้านบน: 0px; ซ้าย: 0px;
ความกว้าง: 100vw; ความสูง: 100vh; การเปลี่ยนแปลง: 1s
ความทึบแสงเข้าออก;

21. เพิ่มตัวอักษรมวย

เพื่อให้หน้าการลงจอดของคุณสไตล์ภาพยนตร์เพิ่มกล่องจดหมายในหน้า

เริ่มต้นด้วยการเพิ่มองค์ประกอบ DIV สำหรับสิ่งนี้

 ​​& lt; div class = 'bar-top' & gt; & lt; / div & gt;
& lt; div class = 'bar-bottom' & gt; & lt; / div & gt;

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

 ​​.Bar- ด้านบน {พื้นหลังสี: สีดำ;
ความสูง: 100px; ตำแหน่ง: แน่นอน; ด้านบน: 0;
ซ้าย: 0; z-index: 100; ความกว้าง: 100VW;}
.bar-bottom {พื้นหลังสี: สีดำ;
ความสูง: 100px; ตำแหน่ง: แน่นอน; ด้านล่าง: 0;
ซ้าย: 0; z-index: 100; ความกว้าง: 100VW;} 

บทความนี้ปรากฏในฉบับที่ 287 ของนักออกแบบเว็บไซต์ ซื้อปัญหา 287 หรือ สมัครสมาชิกที่นี่ .

อ่านเพิ่มเติม:

• คอมโพเนนต์เว็บ: คู่มือที่ดีที่สุด
• วิธีการสร้างเอฟเฟกต์ Parallax เลเยอร์
• วิธีการเพิ่มแอนิเมชั่นเพื่อ SVG ผ่าน CSS