บูม! การตรวจสอบการระเบิดในการออกแบบเว็บ

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

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

แง่มุมที่ยอดเยี่ยมที่สุดอย่างหนึ่งก็คือนักพัฒนาไม่ได้จำกัดการโฟกัสไปที่เรื่องใหญ่เท่านั้น ใช่ เราสามารถเห็นแอนิเมชั่นแคนวาสจำนวนมาก การทดลอง VR และวิดีโอที่ต้องใช้โหมดเต็มหน้าจอ ฯลฯ อย่างล้นหลาม เป็นต้น อย่างไรก็ตาม ทุกวันนี้ แม้แต่รายละเอียดที่เล็กน้อยที่สุดก็ยังได้รับความสนใจในตัวเอง

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

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

วิธีการทำเช่นนี้คุณอาจถาม ฉันมีทางออกที่ดีวิธีหนึ่ง: ทำให้สิ่งต่าง ๆ ระเบิด – ตามตัวอักษรและเปรียบเปรย

อนุภาคในอวกาศ โดย Dean Wagman

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

ดูปากกา
อนุภาคในอวกาศ โดย Dean Wagman (@deanwagman)

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

อนุภาคระเบิดโดย Aleksei / Kaboomerz โดย Christopher Lis

หากวิธีแก้ปัญหาของ Dean Wagman ดูมากเกินไป คุณสามารถลองใช้ Particle Exploration โดย Aleksei หรือหากตรงกันข้าม คุณต้องสร้างผลกระทบที่สำคัญกว่านี้ คุณสามารถใช้ Kaboomerz โดย Christopher Lis ได้ตลอดเวลา

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

ดูปากกา
การระเบิดของอนุภาค JS/CSS3 โดย Aleksei (@alek)

ดูปากกา
#Codevember 5 – Kaboomerz โดย Christopher Lis (@chriscourses)

การระเบิด DOM โดย David A.

ถ้าคุณชอบแนวคิดนี้แต่ต้องการบางอย่างที่เหมือนดิจิทัลและได้แรงบันดาลใจจากย้อนยุค แสดงว่ามีวิธีแก้ปัญหาที่น่าอัศจรรย์ซึ่งสร้างสรรค์โดย David เขาใช้สี่เหลี่ยมขนาดต่างๆ แทนวงกลมเพื่อให้ได้สัมผัส 8 บิตที่สวยงาม เป็นผลให้เราสามารถเห็นการระเบิดเล็ก ๆ น้อย ๆ กับความสามารถพิเศษของยุค 80

ดูปากกา
การระเบิด DOM โดย David A. (@meodai)

WebGL Sparkles โดย CreateJS

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

ดูปากกา
CreateJS: WebGL Sparkles โดย CreateJS (@createjs)

เครื่องยิงพลุอัตโนมัติโดย Christopher Lis

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

ดูปากกา
วันที่ 29 – เครื่องยิงพลุอัตโนมัติโดย Christopher Lis (@chriscourses)

หน้าต่าง Modal ทำลายแนวคิดโดย LegoMushroom

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

ดูปากกา
หน้าต่าง Modal ทำลายแนวคิดโดย LegoMushroom (@sol0mka)

เอฟเฟกต์การระเบิด SCSS โดย Sylvain Garnot / การระเบิดข้อความ SVG โดย Kacper Bawol / การระเบิดข้อความ Canvas โดย Tim Horwood

เอฟเฟกต์การระเบิดก็มีประโยชน์สำหรับการออกแบบตัวอักษรเช่นกัน พิจารณาเอฟเฟกต์การระเบิดของ SCSS โดย Sylvain Garnot, การระเบิดข้อความ SVG โดย Kacper Bawol และการระเบิดข้อความ Canvas โดย Tim Horwood

ทั้งสามแสดงเอฟเฟกต์การระเบิดที่ใช้กับข้อความ เคอร์เซอร์ของเมาส์จะทริกเกอร์แต่ละอันที่คาดคะเน

Sylvain Garnot ให้ผู้ใช้ระเบิดแต่ละตัวอักษรเป็นสี่เหลี่ยมเล็กๆ นับร้อย แนวคิดของ Kacper Bawol เกือบจะเหมือนกัน แต่คราวนี้สัญลักษณ์แบ่งออกเป็นสามเหลี่ยมเล็กๆ และทิม ฮอร์วูดยังให้ผู้ใช้เป่าข้อความทั้งหมดให้เป็นอนุภาคเล็กๆ ที่ในที่สุดก็กลับมาและคืนทุกอย่างกลับสู่สถานะเดิม ความคิดทั้งสามนั้นช่างเหลือเชื่อ

ดูปากกา
SCSS – เอฟเฟกต์การระเบิดโดย sylvain garnot (@sylvaingarnot)

ดูปากกา
การระเบิดข้อความ Svg โดย Kacper Bawol (@Casperovic)

ดูปากกา
การระเบิดข้อความบนผ้าใบ คลิกเพื่อดูโดย Tim Horwood (@tdhorwood)

ระเบิดบ้าน โดย โก๋ เยเล่

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

ดูปากกา
ระเบิดบ้าน โดย Ko.Yelie (@ko-yelie)

คุณสมบัติระเบิด

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

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

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