การโจมตีของพื้นหลังภาพเคลื่อนไหวแบบ Blob-Based ในการออกแบบเว็บ

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

มีแอนิเมชั่นหลายประเภท คุณสามารถสะดุดเมื่อ:

• ภาพเคลื่อนไหวของอนุภาค
• แอนิเมชั่นคาไลโดสโคป;
• แอนิเมชั่น 3 มิติที่เป็นนามธรรม;
• แอนิเมชั่นเรขาคณิตที่ราบรื่น และอีกมากมาย

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

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

แอนิเมชั่น Blob โดย Uwe Chardon

แนวทางของ Uwe Chardon เกี่ยวกับวิธีแก้ปัญหายอดนิยมนี้เป็นประโยชน์และเป็นแรงบันดาลใจ มีลักษณะเป็นหยดแบนๆ เรียบง่ายที่มีสีส้มสวยงามและมีขอบเรียบในสภาพแวดล้อมที่สะอาด เขาสามารถเลียนแบบพฤติกรรมของเหลวได้ค่อนข้างดี

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

ดู CSS บริสุทธิ์ของ Pen Blob โดย Uwe Chardon

Blob โดย Ashton Holgate

ตัวอย่างก่อนหน้านี้แสดงให้เห็นหยดแบบดั้งเดิมที่มีรูปร่างผิดปกติและมอร์ฟิงที่ค่อนข้างแสดงออก อย่างไรก็ตาม โปรเจ็กต์นี้ของ Ashton Holgate ยังคงรักษารูปทรงที่ศักดิ์สิทธิ์กว่า ซึ่งเกือบจะติดกับวงกลม และการเปลี่ยนแปลงนั้นแทบจะสังเกตไม่เห็น อย่างไรก็ตาม ก็ยังดูโดดเด่น

ยิ่งไปกว่านั้น ศิลปินยังเล่นกับข้อความด้วย โดยบังคับให้เปลี่ยนสีไปเป็นสีตรงข้ามเมื่อกระทบกับบริเวณฟองสบู่

ดู Pen Blob โดย Ashton Holgate

Bouncing Liquid Loader โดย Fabio Ottaviani

Fabio Ottaviani ได้ฝึกฝนลักษณะขี้เล่นของพฤติกรรมเหนอะหนะซึ่งมีอยู่ในแอนิเมชั่นหยด ฟองสบู่ของเขามีขนาดเล็ก แต่ก็สร้างผลกระทบได้ค่อนข้างมากด้วยรูปร่างหน้าตาที่น่ารักและการเด้งอย่างตลกขบขัน

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

ดู Pen Bouncing Liquid Loader โดย Fabio Ottaviani

การทดสอบ Canvas Blob โดย Shaw

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

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

ดูการทดสอบ Pen Canvas Blob โดย Shaw

Blob โดย Jeffrey

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

ข้อมูลโค้ดสร้างด้วย HTML, CSS และ JavaScript มันดูสอดคล้องกันในเบราว์เซอร์และอุปกรณ์ต่างๆ ศิลปินใช้อัลกอริธึมสปริงพื้นฐานที่ทำให้การโต้ตอบกับหยดขนาดใหญ่ให้ความรู้สึกเหมือนจริงและไม่ใช่ของปลอม

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

ดู Pen Blob โดย Jeffrey

Blobs โดย Charlotte Dann

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

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

ดู Pen Blobs โดย Charlotte Dann

ทีนี้ มาย้ายจากโลกแบนไปสู่โลกสามมิติกัน

Blob โดย Georgi Nikoloff

Blob โดย Georgi Nikoloff เป็นจุดในกรณี ดึงดูดสายตาด้วยสีสันที่สดใส รูปลักษณ์ไฮเทค และพฤติกรรมแบบไดนามิก นักพัฒนาใช้ประโยชน์สูงสุดจากเทคโนโลยีขั้นสูง โดยใช้ WebGL, GLSL และ shaders เพื่อประโยชน์ของเขา แม้ว่าโซลูชันจะขึ้นอยู่กับความเข้ากันได้ของเบราว์เซอร์ แต่ก็ดูสร้างแรงบันดาลใจ

ดู Pen blob โดย Georgi Nikoloff

การทดลอง #6 โดย Daniel Del Core

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

ดูการทดลองปากกา #6 โดย Daniel Del Core

หยดอนุภาคปลอมโดย Eli Fitch

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

เป็นไปได้ว่าศิลปินใช้เวทมนตร์ Three.js และงานอันชาญฉลาดด้วยพื้นผิวที่มีขั้นตอนเพื่อดึงแนวคิดนี้ออกมา

ดู Pen #3December อนุภาคปลอมโดย Eli Fitch

CSS Blob Generator โดย Edwin Chen

เราจะปิดคอลเลกชันของเราด้วย CSS Blob Generator โดย Edwin Chen ตามชื่อเรื่อง ปากกานี้มีสนามเด็กเล่นขนาดเล็กที่คุณสามารถสร้างรูปร่างหยด

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

ดู Pen CSS Blob Generator โดย Edwin Chen

รูปร่างที่สมบูรณ์แบบสำหรับบรรยากาศที่สงบเงียบ

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

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

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