10 ตัวอย่าง CSS & JavaScript ที่กำหนดเองสำหรับ Hover & Click Effects

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

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

เอฟเฟกต์ปุ่มโฮเวอร์

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

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

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

การนำทางโฮเวอร์

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

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

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

เอฟเฟ็กต์ภาพโฮเวอร์

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

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

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

CSS Tooltip Hovers

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

ข้อมูลโค้ดทั้งหมดนี้ทำงานโดยกำหนดเป้าหมายแท็ก HTML <dfn> เมื่อวางเมาส์เหนือข้อความใดๆ ที่อยู่ในแท็กนี้ ข้อความนั้นจะหายไปโดยอัตโนมัติเมื่อวางเมาส์เหนือที่ปรากฏเหมือนคำแนะนำเครื่องมือ

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

ไอคอน CSS บนโฮเวอร์

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

แต่ละไอคอนมาจาก Font Awesome เพื่อให้คุณสามารถจำลองการออกแบบนี้ด้วยไอคอนฟรีทั้งหมด

เอฟเฟกต์รวมถึงไอคอนสไลด์อิน การยืด และสีจางที่ปรากฏบนโฮเวอร์และหายไปเมื่อเคอร์เซอร์ย้ายไปที่อื่น

การแบ่งหน้าไม่มีที่สิ้นสุด

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

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

มันมีค่าในทางปฏิบัติที่จำกัด แต่เอฟเฟกต์นั้นยอดเยี่ยม

แอนิเมชั่นการนำทางซ้อนทับ

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

นักพัฒนา Ryan Mulligan ได้สร้างแอนิเมชั่นสัตว์ร้ายนี้ด้วยคีย์เฟรม CSS แท้ที่ทำงานบนคลาส CSS เดียว

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

เอฟเฟกต์คลิก CSS บริสุทธิ์

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

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

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

ปุ่มมานะ

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

Coder Dean Hidri สร้างเอฟเฟกต์ปุ่มมานาด้วย CSS เพียง 80 บรรทัดและ HTML สองสามโหล (รวม SVG ด้วย) เมื่อวางเมาส์เหนือปุ่มนี้จะทำให้รูปร่างของเหลวที่กำหนดเองเคลื่อนไหวภายในปุ่มเพื่อสร้างการเติมพื้นหลัง จากนั้นจะเคลื่อนไหวออกในภายหลัง

หากคุณมีไซต์ที่สามารถใช้รูปแบบปุ่มนี้ได้ ก็คุ้มค่าที่จะลองเล่นดู

Iconic Button FX

คุณสามารถทำอะไรได้มากมายกับแบบอักษรไอคอนและปุ่มเคลื่อนไหวเหล่านี้โดย David Darnes เป็นตัวอย่างที่ดี

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

และนั่นเป็นการสรุปรายการเอฟเฟกต์ UX ของฉัน แต่นี่ไม่ใช่คอลเล็กชั่นสุดท้ายอย่างแน่นอน

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