เรียกว่ากิมมิกก็ได้ เรียกว่า Eye Candy ก็ได้ แต่ Parallax Effect ใน Web Design อยู่มาตลอด มันคือ Element ให้เว็บมี "WOW Factor" แม้ Effect นี้มีมานาน และเว็บเยอะ Implement แล้ว ยังคง Cool
พร้อมเข้าร่วม Trend เพิ่ม Effect ให้ WordPress Site ติดตามมา
Parallax คืออะไร?
สำหรับคนไม่คุ้น คำศัพท์นิยาม "Parallax": "ปรากฏการณ์ที่ตำแหน่งหรือทิศทางของวัตถุปรากฏแตกต่าง เมื่อมองจากตำแหน่งต่างกัน"
ใน Web Design: Parallax = เทคนิคที่ Background Images เคลื่อนที่ความเร็วต่างกัน ปกติช้ากว่า Foreground Images เป้าหมาย: สร้าง Illusion of Depth (Faux 3D Effect) ในสภาพแวดล้อม 2D
Parallax ใช้ใน Gaming ตั้งแต่ 1980s แต Web Designers เริ่มนำมาใช้กว้างขวาง 2011 ด้วย HTML5 และ CSS3
เส้นทางที่ 1: WordPress Themes
User WordPress วิธีง่ายสุด: ใช้ Theme ที่มี Parallax Built-in เปลี่ยน Theme -> เสร็จ
มี Parallax-ready WP Themes เยอะมาย ฟรีและเสียเงิน ค้นหา Google และ WordPress Theme Repo ได้ Options มากกว่าที่จัดการได้
อยากลอง Theme บางตัว นี่คือตัวอย่างจาก Repo เลือกจาก Subjective Visual Taste ของผม:
1. Parallax Frame
2. Marvy
3. SimpleShift
4. Eleganto
5. Integral
6. Zeal
7. Juniper
8. Theme ล่าสุดจาก WordPress: Twenty Seventeen รองรับ Parallax Header
Theme เหล่านี้มักมี Placeholder เฉพาะสำหรับ Parallax ทำได้แค่ Upload Background Image ไปที่นั่น ความง่าย = ข้อเสีย: น้อยโอกาส Improvise
ทุก Theme ต่างกัน แต่ปกติ Customize Parallax Background ที่ "Appearance -> Customize" เลือก Menu ตาม Theme Settings
เส้นทางที่ 2: WordPress Plugins
อยาก Apply Effect พื้นที่ที่เลือก ใช้ Plugins จำนวนน้อยกว่า Theme แต่ยังมีเยอะ: Parallax Scroll, Easy WordPress Parallax Slider, cbParallax, ML Parallax, MG Parallax Slider, Easy WP Parallax Slider, Aesop Story Engine
ส่วนใหญ่: สร้าง Parallax Elements -> ใส่ใน Posts, Pages, Areas อื่นๆ ด้วย Shortcodes บางตัวสร้าง Element ตรงที่ต้องการ Parallax
Parallax Scroll ตัวอย่าง: สร้าง Parallax ใหม่คล้ายสร้าง Post ใหม่ Editing Interface คล้ายกัน ใส่ Background Image: "Set Featured Image" Title/Content Optional
Options เยอะใต้ Content Box แตก็ Optional
Publish -> ได้ Shortcode ใส่ในที่รองรับ (Posts, Pages, Widgets) -> ได้ Parallax Effect
หมายเหตุ: ผลลัพธ์สุดท้าย Up to Theme หาก Theme รองรับ Full Width -> Parallax แสดงเต็มความกว้าง หากไม่ -> ยอมรับ หรือ Hack ด้วย CSS/JS
เคล็ดลับ: ไม่มีใครบอกว่า Theme + Plugin ไม่รวมกันได้ ใช้หลาย Plugin ก็ได้ เช่น Twenty Seventeen + Aesop Story Engine + Parallax Scroll
ไปเดินทาง Parallax และ Wow ผู้เยี่ยมชมได้เลย!
