8 ตัวอย่างที่แสดงให้เห็นถึงเอฟเฟกต์การขับไล่ในการออกแบบเว็บ

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

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

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

เส้นขับไล่

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

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

ดูเส้นขับไล่ปากกา โดย Daniel Velasquez

30,000 อนุภาค

เอฟเฟกต์การขับไล่ดูยอดเยี่ยมเมื่อใช้กับจุดหลายพันจุดแทนที่จะเป็นเส้น Justin Windle พิสูจน์สิ่งนี้ในทางปฏิบัติ โครงการที่โด่งดังและโด่งดังของเขาใน CodePen มีแผงที่อนุภาคขนาดเล็ก 30,000 ตัวนั่งได้อย่างสบาย

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

ดูปากกา 30,000 อนุภาค โดย Justin Windle

อนุภาคแบบโต้ตอบ

หากกรอบสี่เหลี่ยมธรรมดาไม่ได้จุดประกายความคิดสร้างสรรค์ของคุณ คุณสามารถรวบรวมจุดเหล่านั้นทั้งหมดเป็นตัวละครได้เหมือนที่ Tamino Martinius ทำในโปรเจ็กต์ Interactive Particles ของเขา

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

ดูโลโก้ Pen Interactive Particle โดย Tamino Martinius

ข้อความเป็นอนุภาค

มาลองใช้สีและขนาดกันเพื่อเพิ่มคุณค่าให้กับแนวคิดทั้งสองก่อนหน้านี้ด้วยการพลิกผันที่มีชีวิตชีวาเช่น Louis Hoebregts ที่ทำในโปรเจ็กต์ Text to Particles ของเขา

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

ดูข้อความปากกาถึงอนุภาคโดย Louis Hoebregts

ลูกบอลและแรงโน้มถ่วง

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

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

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

ดู Pen BALLS&GRAVITY โดย Marco Dell'Anna

Attractor

โครงการนี้โดย Marco Dell'Anna สร้างขึ้นจากแรงโน้มถ่วง คุณสามารถควบคุมได้ด้วยเคอร์เซอร์ของเมาส์ ใช้เพื่อเคลื่อนย้ายอนุภาคและจัดตำแหน่งใหม่

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

ดูเครื่องดึงดูดปากกา – MatterJS โดย Marco Dell'Anna

เปิดใช้งาน

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

ดูปากกาเปิดใช้งานโดย Gerard Ferrandez

พลาสมามัวร์

เอฟเฟกต์การขับไล่สามารถช่วยแอนิเมชั่นอนุภาคได้เช่นกัน คุณสามารถทำให้พวกเขาตื่นเต้นมากยิ่งขึ้น สำรวจ Moar Plasma

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

ดู Pen Moar Plasma โดย John Chin-Jew

อนุภาคหิมะ

Snowy Particles เป็นอีกตัวอย่างที่ยอดเยี่ยมที่แอนิเมชั่นอนุภาคแบบดั้งเดิมได้รับการส่งเสริม แนท ผู้เขียนปากกา ได้ใช้กลอุบายสองอย่าง

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

ดู Pen particle.js snow โดย นัท

ตัวแทนจำหน่าย

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

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

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

ดูเครื่องไล่ปากกา โดย Rein van der Woerd

แรงดึงดูดผ่านแรงผลัก

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

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