สร้างเว็บแนว Parallax Scrolling แบบง่ายๆ ด้วย jQuery Jarallax

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

30 Great Websites with Parallax Scrolling

หลักการเบื้องต้น

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

การนำมาใช้งาน

1. งานส่วนมากที่เราจะนำมาใช้คือหน้า landing page , home page เพื่อสร้าง engagement และเพิ่ม conversion rate กับ visitors
2. เมื่อนำมาประยุกต์ใช้ในเว็บไซต์ ตัวอย่างง่ายๆ คือเราก็ทำตามที่กล่าวมาข้างต้นเลยครับ มีภาพพื้นหลังเป็น ภูเขา มีภาพต้นไม้ขนาดเล็กแต่เป็นรูปที่ชัด แล้วก็มีภาพต้นหญ้าขนาดใหญ่ แต่มัวๆเพื่อให้ดูใกล้สายตา หลังจากนั้น เราก็จะใช้ javascript รับค่าจากการ scroll เมาส์ เพื่อเพิ่มหรือลดค่า margin หรือ left right จะมากน้อยแล้วแต่จะกำหนดครับ

ปัญหา

1. จะตกอยู่กับการถกเถียงกัน ตั้งแต่การวางโครงเรื่อง,การเคลื่อนไหว การตัดภาพ ซึ่งกว่าโปรแกรมเมอร์จะได้ทำก็นานแน่ครับ
2. javacript library ที่ผมค้นเจอจะสนับสนุนการเคลื่อนไหวอย่างใดอย่างหนึ่งเท่านั้นครับ ถึงเวลาที่เราจะได้ทำจริง อาจจะต้องเขียน jquery เอง
3. ความยากไม่ได้อยู่ตรงที่ javascript แต่เป็น css นี้แหละครับ การจัดองค์ประกอบต่างๆ ให้ลงตัวแถมเราต้องเรียนรู้ css syntax แบบที่เราไม่ค่อยได้ใช้กันอย่างพวก animate

Javascript Library ที่ใช้ในการทำ Parallax

ผมขอแบ่งออกเป็น 3 ประเภทตามนี้นะครับ ส่วน js library เลือกมาจากได้รับ star บน github มากที่สุด

1. แบบเลื่อนหน้าจอในแนวนอน
2. htdt ลองกดไปดู demo ของเว็บที่ใช้ library ตัวนี้สร้างได้ที่ hotdot.pro ถ้าจะทำ parallax แบบแนวนอน เมื่อไหร่ ตัวนี้เป็นหนึ่งในตัวเลือกของผมเลย
3. แบบเลื่อนหน้าจอในแนวตั้ง
4. skrollr ตัวนี้ได้รับ star สุงสุดเลยครับ เเล้ว effect ก็ตระการตาจริงๆ
5. แบบใช้การเคลื่อนไหวของเมาส์
6. wagerfield ถ้าไป search เรื่อง parallax จะเจอหน้า demo ของ js ตัวนี้ก่อนเลยครับ
7. jparallax ตัวนี้มีหน้าอธิบาย พร้อมตัวอย่าง ประกอบการทำ parallax แบบเข้าใจง่าย

library ที่ใช้สร้าง parallax มีเยอะจริงๆครับ สามารถลองไปเลือกชมได้บน github เลยครับ

สร้าง Parallax แบบง่ายๆ ด้วย Jarallax

Jarallax เป็น jQuery plugin ตัวหนึ่งที่ผมบังเอิญไปเจอมา แล้วพบว่ามันดีกว่า library ชนิดเดียวกัน เยอะเลยครับ เพราะบน github นั้น มี library ที่ใช้ทำ parallax อยู่เยอะก็จริงครับ แล้วตัวที่ได้ star มากที่สุดก็ไม่ได้หมายความว่าจะดีที่สุดเสมอไป มาดูจุดเด่นของ เจ้า Jarallax ขวัญใจของผมกันดีกว่าครับ

1. การใช้งานจริงมีแค่ไม่กี่ฟังก์ชันที่เราจะใช้
2. ครอบคลุมการทำแบบ parallax แบบแนวนอนและแนวตั้ง
3. รับคำสั่งจากอุปกรณ์ ได้หลากหลายตัว เช่น คีย์บอร์ด, เมาส์, มือถือ, การจับเวลา
4. มี api ทำให้เราสามารถแทรกสคริปต์ที่เราต้องการเข้าไปได้ดั่งใจเลย ความสามารถนี้สุโค่ยจริงๆ เลยครับ

เนื่องจากอธิบายเป็นคำพูดจะเห็นภาพได้ยาก ผมจึงได้ทำตัวอย่างไว้พร้อมคำอธิบาย และมีโค้ดให้ดาวน์โหลดที่ parallax.taqmaninw.com

สรุป

การทำเว็บแนว parallax นี้เหมือนกับเราสร้าง animation เรื่องหนึ่งเลยครับ เพียงแต่เปลี่ยนเครื่องมือ และวิธีการเล่าเรื่องเท่านั้นครับ ถ้าเพื่อนๆคนไหนทำอยู่ก็มาแลกเปลี่ยนความรู้กับผมได้นะครับ

พบกับผู้เขียนได้ที่ http://taqmaninw.com