Wix Parallax Effect

• อาจ 7, 2024

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

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

เทคนิคนี้สร้างขึ้นด้วยองค์ประกอบ JavaScript, CSS และ div โปรดทราบว่าอุปกรณ์มือถือส่วนใหญ่มีปัญหากับ CSS พื้นหลังคงที่ ดังนั้น Wix จะปิดเอฟเฟกต์สำหรับอุปกรณ์มือถือ

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

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

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

ตัวเลือกที่สามคือตัวเลือก Freeze สำหรับภาพพื้นหลังตัวเลือก Scroll Effects คือการล็อคภาพพื้นหลังให้เข้าที่เนื่องจากองค์ประกอบหน้าส่วนที่เหลือเลื่อนขึ้นหรือลง

เพิ่ม Parallax ให้กับภาพพื้นหลัง

1. คลิกที่ไอคอนพื้นหลังในเมนูด้านซ้าย
   
   
2. เพิ่มภาพพื้นหลังของคุณตามปกติ
   
   
3. คลิกปุ่มการตั้งค่าเพื่อเปิดการตั้งค่าภาพ
   
   
4. เลือกหนึ่งในสามตัวเลือกสำหรับลักษณะพิเศษการเลื่อน
   
   
   • ไม่มี - พื้นหลังจะย้ายในอัตราเดียวกับองค์ประกอบอื่น ๆ ในหน้า
     
     
   • Parallax - พื้นหลังจะเคลื่อนไหวช้ากว่าองค์ประกอบอื่น ๆ ในหน้า
     
     
   • ตรึง - พื้นหลังจะยังคงอยู่ในสถานที่ แต่องค์ประกอบอื่น ๆ จะเลื่อน
     
     

เพิ่ม Parallax เพื่อตัดภาพหรือวิดีโอ

1. เลือกแถบและเลือกเปลี่ยนพื้นหลังของแถบจากเมนูป๊อปอัพ
   
   
2. เพิ่มภาพพื้นหลังหรือวิดีโอตามปกติ
   
   
3. คลิกปุ่มการตั้งค่าเพื่อเปิดการตั้งค่าภาพ
   
   
4. จากนั้นเลือก Parallax จาก Scroll Effects
   
   

คำแนะนำวิดีโอ: Parallax Scrolling | Easily add stunning scrolling effects to your Wix website (อาจ 2024).