คุณสามารถเรียกมันว่าลูกเล่น เรียกได้ว่าเป็นลูกเล่น แต่เอฟเฟกต์พารัลแลกซ์ในการออกแบบเว็บยังคงอยู่ที่นี่ เป็นองค์ประกอบหนึ่งที่จะทำให้เว็บไซต์ของคุณมีปัจจัย “ว้าว” แม้ว่าเอฟเฟกต์จะมีมาระยะหนึ่งแล้ว และมีเว็บไซต์มากมายที่นำเอฟเฟกต์นี้ไปใช้ในการออกแบบ แต่ก็ยังเจ๋งอยู่
หากคุณพร้อมที่จะเข้าร่วมการเคลื่อนไหวและเพิ่มเอฟเฟกต์ให้กับไซต์ WordPress ของคุณ โปรดคอยติดตาม
พารัลแลกซ์คืออะไร
สำหรับผู้ที่ไม่คุ้นเคยกับคำศัพท์นี้ พจนานุกรมกำหนดคำว่า “พารัลแลกซ์” เป็น “ผลกระทบที่ตำแหน่งหรือทิศทางของวัตถุดูเหมือนจะแตกต่างออกไปเมื่อดูจากตำแหน่งที่ต่างกัน ”
ในโลกของการออกแบบเว็บไซต์ Parallax เป็นเทคนิคที่ภาพพื้นหลังเคลื่อนที่ด้วยความเร็วที่ต่างกัน ซึ่งมักจะช้ากว่าภาพเบื้องหน้า จุดประสงค์คือเพื่อสร้างภาพลวงตาของความลึก (เอฟเฟกต์ 3D เทียม) ในสภาพแวดล้อม 2 มิติ
แอปพลิเคชั่น Parallax มีมาตั้งแต่ปี 1980 ในโลกของเกม แต่นักออกแบบเว็บไซต์เพิ่งเริ่มรวมเอฟเฟกต์นี้อย่างกว้างขวางในปี 2011 โดยใช้ HTML5 และ CSS3
เส้นทางแรก:ธีม WordPress
หากคุณเป็นผู้ใช้ WordPress วิธีที่ง่ายที่สุดในการสร้างเอฟเฟกต์พารัลแลกซ์ในเว็บไซต์ของคุณคือการใช้ธีม WordPress ที่มีเอฟเฟกต์ในตัว สลับธีมแล้วเสร็จ
มีธีม WP ที่พร้อมพารัลแลกซ์มากมาย ทั้งแบบฟรีและมีค่าใช้จ่าย การค้นหาอย่างรวดเร็วบน Google และในที่เก็บธีมของ WordPress จะทำให้คุณมีตัวเลือกมากขึ้นที่คุณสามารถจัดการได้
หากคุณต้องการทดสอบธีมบางส่วน ต่อไปนี้คือตัวอย่างบางส่วนที่สดใหม่จากที่เก็บ เนื่องจากเป็นไปไม่ได้ที่จะทดสอบและเปรียบเทียบธีมที่พร้อมใช้พารัลแลกซ์ทั้งหมดและแสดงให้คุณเห็นเฉพาะสิ่งที่ดีที่สุด ธีมเหล่านี้จึงถูกเลือกโดยพิจารณาจากความชอบส่วนตัวของฉันเท่านั้น
1. เฟรมพารัลแลกซ์
2. มาร์วี
3. SimpleShift
4. สง่างาม
5. อินทิกรัล
6. ความกระตือรือร้น
7. จูนิเปอร์
8. และอย่าลืมธีมทางการล่าสุดจาก WordPress Twenty Seventeen ยังรองรับส่วนหัวพารัลแลกซ์ด้วย
ธีมเหล่านี้มักจะมีตัวยึดตำแหน่งเฉพาะสำหรับเอฟเฟกต์พารัลแลกซ์หนึ่งหรือสองสามรายการ และสิ่งที่คุณต้องทำคืออัปโหลดภาพพื้นหลังไปยังตำแหน่งเหล่านั้น แต่ความเรียบง่ายนี้ก็เป็นข้อเสียเช่นกันเพราะคุณมีพื้นที่น้อยที่จะด้นสด
ทุกธีมมีความแตกต่างกัน แต่โดยปกติคุณสามารถปรับแต่งภาพพารัลแลกซ์พื้นหลังได้โดยใช้เมนู "ลักษณะที่ปรากฏ -> ปรับแต่ง" และเลือกเมนูเฉพาะตามการตั้งค่าธีม
เส้นทางที่สอง:ปลั๊กอิน WordPress
หากคุณต้องการใช้เอฟเฟกต์กับพื้นที่ที่คุณเลือก คุณต้องใช้ปลั๊กอิน แม้ว่าจำนวนจะไม่มากเท่ากับธีม แต่ก็ยังมีปลั๊กอินพารัลแลกซ์ของ WordPress มากมายที่คุณสามารถลองใช้ได้ นี่คือบางส่วนจากที่เก็บปลั๊กอิน:Parallax Scroll, Easy WordPress Parallax Slider, cbParallax, ML Parallax, MG Parallax Slider, Easy WP Parallax Slider และ Aesop Story Engine
ปลั๊กอินเหล่านี้ส่วนใหญ่จะช่วยให้คุณสร้างองค์ประกอบพารัลแลกซ์และแทรกลงในโพสต์ หน้า หรือพื้นที่อื่นๆ ที่รองรับได้โดยใช้รหัสย่อ นอกจากนี้ยังมีบางส่วนที่สร้างองค์ประกอบโดยตรงในตำแหน่งที่คุณต้องการให้พารัลแลกซ์ปรากฏ
ตัวอย่างเช่น ใน Parallax Scroll คุณสามารถสร้าง Parallax ใหม่ได้เหมือนกับการสร้างโพสต์ใหม่ อินเทอร์เฟซการแก้ไขก็ดูคล้ายกัน หากต้องการเพิ่มภาพพื้นหลังพารัลแลกซ์ ให้ใช้ตัวเลือก "ตั้งค่ารูปภาพเด่น" หัวข้อและเนื้อหาโพสต์เป็นตัวเลือก
มีตัวเลือกมากมายที่คุณสามารถแก้ไขได้ที่ด้านล่างของกล่องเนื้อหา แต่ก็เป็นตัวเลือกด้วยเช่นกัน
หลังจากกดปุ่ม "เผยแพร่" คุณจะได้รับรหัสย่อ ใส่รหัสย่อนี้ลงในตำแหน่งที่รองรับ (โพสต์ เพจ วิดเจ็ต ฯลฯ) แล้วคุณจะได้เอฟเฟกต์พารัลแลกซ์
โปรดทราบว่าแม้ว่าคุณจะสามารถปรับหลายๆ อย่างในตัวเลือกต่างๆ ได้ แต่ผลลัพธ์สุดท้ายของพารัลแลกซ์จะขึ้นอยู่กับธีมที่คุณใช้เป็นอย่างมาก หากธีมรองรับแบบเต็มความกว้าง องค์ประกอบพารัลแลกซ์ก็สามารถปรากฏในรัศมีเต็มความกว้างได้ หากไม่เป็นเช่นนั้น คุณสามารถยอมรับสิ่งที่ชีวิตได้มอบให้คุณด้วยอาวุธที่เปิดกว้าง หรือคุณอาจลองแฮ็กเข้าไปในรูปลักษณ์ที่คุณต้องการโดยใช้ CSS และ JavaScript
เคล็ดลับเล็กน้อยในการเพิ่มคลังแสงของคุณ:ไม่มีใครบอกว่าคุณไม่สามารถรวมธีมและปลั๊กอินได้ การใช้ปลั๊กอินมากกว่าหนึ่งตัวก็ถูกกฎหมายเช่นกัน ตัวอย่างเช่น คุณสามารถใช้ Twenty Seventeen สำหรับธีมของคุณ และติดตั้ง Aesop Story Engine ร่วมกับ Parallax Scroll เพื่อเป็นเครื่องเทศเพิ่มเติมสำหรับสูตรเว็บของคุณ
ตอนนี้คุณสามารถเดินทางแบบพารัลแลกซ์และทำให้ผู้เยี่ยมชมของคุณประทับใจไปพร้อมกัน
