โฮมเพจ » ออกแบบเว็บไซต์ » 20 เว็บไซต์ที่มี MouseOver สร้างสรรค์

    20 เว็บไซต์ที่มี MouseOver สร้างสรรค์

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

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

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

    Pixels โดย Tomer Lerner

    มันเป็นเว็บไซต์ที่มีความคิดสร้างสรรค์สูงพร้อมหน้าแรกสีดำและสีขาวที่แสดงความแตกต่าง รูปทรงเรขาคณิตการเต้นรำและการแปลง เมื่อคุณเลื่อนเคอร์เซอร์ไปที่พวกเขา.

    Haus

    Haus เป็นเว็บไซต์ของเอเจนซี่แบบโต้ตอบที่ ชอบเทคโนโลยีและมีอารมณ์ขัน. Mouseover ตัวเลขการ์ตูน บนหน้าจอและดูว่าพวกเขากระโดดและเรียกใช้.

    Canva

    แคนวาคือ บริการสำหรับการสร้างภาพข้อความต่าง ๆ. หน้าแรกของพวกเขามีพื้นหลังเบลอสีเข้ม แต่เมื่อคุณวางเคอร์เซอร์ไว้เหนือมันคุณจะเห็น พื้นที่ทำความสะอาดและแสดงภาพในพื้นหลัง, เหมือนเครื่องมือลบข้อมูล.

    Mainworks

    เป็นเว็บไซต์ผลงานของสตูดิโอผลิตสื่อสร้างสรรค์ Mainworks. วางเมาส์หรือคลิกที่จุดบนบรรทัดเพื่อดูโครงการของพวกเขา.

    Cedric Pereira

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

    Bullmonk

    Bullmonk เป็นเว็บไซต์จัดการธุรกิจที่มี ภาพเคลื่อนไหว SVG อย่างง่ายบนหน้าแรก. เพียงวางเมาส์บนสี่เหลี่ยมที่มีตาข่ายเพื่อดูว่า เกิดขึ้นในหลุม.

    InSymbiosis

    InSymbiosis นำเสนอกลยุทธ์ทางเลือกแก่อุตสาหกรรมชีวเภสัชกรรม เพื่อเร่งโครงการพัฒนายา เลื่อนเมาส์เพื่อดูยอดเยี่ยม การโต้ตอบขนาดเล็กพร้อมข้อความปุ่มและองค์ประกอบพื้นหลัง.

    OUI R Creative Studio

    OUI R เป็น สตูดิโอออกแบบสหวิทยาการ อุทิศตนเพื่อการสร้างผลิตภัณฑ์ตามความคิดสร้างสรรค์ด้านภาพ เมื่อคุณวางเคอร์เซอร์ของเมาส์บนภาพ แสดงข้อมูลและด้วยการเลื่อนเมาส์คุณเลื่อนไปยังภาพถัดไป.

    Minnim

    Minnim มี หน้าแรกแบบโต้ตอบกับวงกลมเส้นที่มีสีสัน ซึ่งย้ายด้วยเมาส์โฮเวอร์ คุณสามารถ สร้างรายการรอบใหม่ที่มีโลโก้ ใช้เมาส์ของคุณ.

    ชุดเต็ม

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

    FS ไม่มีชื่อ

    FS ไม่มีชื่อ เชิญผู้เยี่ยมชมเลือกชื่อสำหรับแบบอักษร. โฮมเพจแสดงเซลล์ที่เมื่อคุณคลิก, นำไปสู่การสาธิตของแบบอักษรนั้น.

    Trainrobber

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

    ซากุระอินเตอร์เนชั่นแนลอิงค์.

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

    แฟนสตูดิโอ

    Fan Studio เป็นเว็บไซต์การ์ตูนที่สร้างเกมและแอพมือถือ เพื่อให้เกิดการเคลื่อนไหว พื้นหลังเคลื่อนที่ไปพร้อมกับเคอร์เซอร์ของเมาส์.

    Studio Rotate

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

    TheMcBrideCompany

    หน้าแรกของ TheMcBrideCompany มีภาพทิวทัศน์ที่สวยงามซึ่งเบลอ เมื่อคุณ เลื่อนเคอร์เซอร์ไปที่พื้นหลัง, พื้นที่เล็ก ๆ รอบเคอร์เซอร์ ชัดเจน มันดูยอดเยี่ยม.

    Clever Franke

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

    ศูนย์ออกแบบข้อความ

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

    เพิ่งเขียนโค้ด

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

    แอพ Kinetic

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