10 ตัวอย่างที่น่าทึ่งของ CSS, SVG & Canvas Masks ในการใช้งานจริง

คุณสามารถทำบางสิ่งที่น่าทึ่งด้วยมาสก์ SVG เทคนิคนี้มีมาหลายปีแล้ว แต่เพิ่งจะเข้าสู่การพัฒนาเว็บกระแสหลัก

ฉันได้ค้นหาเว็บต่างๆ เพื่อค้นหาตัวอย่างด้านล่างของ clipping mask แบบกำหนดเอง & มาสก์ SVG/canvas ตัวอย่างเหล่านี้แสดงให้เห็นว่าคุณสามารถผลักดันมาสก์บนเว็บได้ไกลแค่ไหน และท้ายที่สุดสิ่งที่พวกเขาอาจเสนอให้นักพัฒนาในอนาคต

1. การปิดบังข้อความ

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

ความมหัศจรรย์ทั้งหมดเกิดขึ้นใน CSS ด้วยคุณสมบัติเช่น background-clip คุณสามารถใช้สิ่งเหล่านี้กับข้อความใดก็ได้ในหน้าใดก็ได้ แต่จะไม่แสดงเว้นแต่คุณจะมีพื้นหลังที่ชัดเจน

เอฟเฟกต์การซูมนั้นสร้างขึ้นใน CSS เท่านั้น ซึ่งทำให้ข้อมูลโค้ดนี้น่าประทับใจยิ่งขึ้น

2. รูปหลายเหลี่ยมมาสก์คัตเอาท์

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

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

การดำเนินการนี้จะเรียกใช้ภาพเคลื่อนไหวที่สอดคล้องกันและทำงานบนองค์ประกอบ Canvas ที่ขับเคลื่อนด้วย JS ซึ่งมีลักษณะเหมือนคอนเทนเนอร์สำหรับเนื้อหา SVG/XML บ้าๆบอๆ แต่ก็สนุกดีที่เห็นว่ามาสก์ทำอะไรได้บ้าง!

3. การกำบังภาพ

ตัวอย่างแบบ cut & dry นี้แสดงให้เห็นว่ามาสก์รูปภาพ CSS เป็นอย่างไร คุณจะได้เห็นก่อนและหลังของหน้ากากภาพด้านบนที่สร้างโดย Vincent De Oliveira

โปรดทราบว่ามาสก์พื้นผิวสีดำจริงเป็นเพียงไฟล์ PNG แต่มันถูกซ้อนทับรูปภาพแบบไดนามิกใน CSS เพื่อสร้างเอฟเฟกต์รูปภาพที่ปิดบัง

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

4. ปุ่มโฮเวอร์

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

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

นี่เป็นโค้ดทดลองอย่างแน่นอน แต่ดูเหมือนปรากฎการณ์ในเบราว์เซอร์ WebKit และหวังว่าเทคนิคนี้จะกลายเป็นส่วนสำคัญในอีกไม่กี่ปีข้างหน้า

5. หน้ากากข้อความ SVG

นี่เป็นตัวอย่างที่แตกต่างกันเล็กน้อยของเอฟเฟกต์มาสก์ข้อความที่สร้างโดยนักพัฒนา Marco Barria

แทนที่จะกำหนดอิมเมจ SVG ที่กำหนดเองนี้ โค้ดจะใช้องค์ประกอบ SVG จริงๆ ยังคงสร้างจากเนื้อหาข้อความ HTML ธรรมดา แต่ทำงานด้วยตัวกรอง SVG แบบไดนามิก

นี่เป็นเทคนิคเล็กน้อย แต่ยังให้การควบคุมแก่นักพัฒนามากขึ้น แทนที่จะยุ่งกับ Illustrator เพื่อสร้างไฟล์ SVG คุณสามารถเขียนโค้ด SVG แบบอินไลน์ได้จากเอกสาร HTML ของคุณ

6. หน้ากากข้อความผ้าใบ

ด้วยตัวอย่างผ้าใบนี้โดย Calvin Davis คุณจะสังเกตเห็นว่าใช้ HTML ดิบสำหรับเนื้อหา แต่ข้อความนั้นไม่สามารถเลือกได้

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

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

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

7. การไล่ระดับสีแบบเคลื่อนไหว

เอฟเฟกต์ข้อความที่ยอดเยี่ยมอีกอย่างหนึ่งคือการไล่ระดับสีแบบเคลื่อนไหวที่สร้างโดยนักพัฒนา Svante Richter

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

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

8. มาส์กการตัดต่อภาพเคลื่อนไหว

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

อาจดูเหมือนไม่มาก แต่นักพัฒนา Neil McCallion เขียนโค้ดที่ค่อนข้างน่ารัก และผลลัพธ์สุดท้ายก็แปลกอย่างแน่นอน

การปิดบังเกิดขึ้นส่วนใหญ่ในองค์ประกอบผ้าใบ แต่ควบคุมผ่าน JavaScript เป็นวิธีที่สนุกในการผสมผสานภาพสองภาพเข้ากับแอนิเมชั่น SVG ที่เป็นนามธรรม

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

9. หน้ากาก SVG BG

ในทางกลับกัน นี่คือเอฟเฟกต์การปิดบังที่คุณสามารถเรียกใช้ได้เกือบทุกเว็บไซต์

วิธีนี้ใช้การไล่ระดับสีพื้นหลังควบคู่ไปกับส่วนหัวของฮีโร่เพื่อสร้างเอฟเฟกต์การมาสก์ที่ซับซ้อนซึ่งยังคงผสมผสานอย่างลงตัว

นักพัฒนา Ryna Rudenko ผลักซองจดหมายด้วยปากกานี้โดยใช้องค์ประกอบผ้าใบดิบที่มีเอฟเฟกต์การปกปิดส่วนใหญ่ใน HTML

มาสก์นี้ไม่เพียงแต่ใช้งานได้จริงและใช้งานได้ในส่วนหัวขนาดใหญ่เท่านั้น แต่ยังได้รับการออกแบบมาเป็นอย่างดีและทำงานบน HTML5 และ CSS3 เท่านั้น ตัวอย่างที่สำคัญของมาตรฐานเว็บสมัยใหม่ที่นำไปใช้ให้เกิดประโยชน์

10. มาสก์ CSS & SVG

แกลเลอรีมาสก์ SVG ที่สมบูรณ์นี้ช่วยผลักดันให้กลับมาบ้านได้จริงๆ ว่าคุณใช้ CSS บริสุทธิ์ทำอะไรได้บ้าง

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

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