Parallax Scrolling ในการออกแบบเว็บไซต์ - แนวคิด

ตอนนี้เราได้เข้าใจที่มาและความเป็นมาของ Parallax แล้วให้เราเข้าใจประวัติและแนวคิดของการเลื่อนแบบ Parallax ในการออกแบบเว็บ

คำจำกัดความ

อ้างอิงจาก Wikipedia - Parallax scrolling เป็นเทคนิคหนึ่งในคอมพิวเตอร์กราฟิกที่ภาพพื้นหลังเคลื่อนผ่านกล้องช้ากว่าภาพเบื้องหน้าสร้างภาพลวงตาของความลึกในฉาก 2 มิติและเพิ่มความรู้สึกดื่มด่ำในประสบการณ์เสมือนจริง

การเลื่อนแบบพารัลแลกซ์ถูกนำมาใช้ในช่วงแรก ๆ ของภาพเคลื่อนไหว สตูดิโอแอนิเมชั่นหลายแห่ง (เช่นดิสนีย์) ใช้กล้องหลายตัวเพื่อให้ได้เอฟเฟกต์พารัลแลกซ์

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

ตัวอย่าง

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

ตัวอย่างบางส่วนของเว็บไซต์ที่ใช้การเลื่อนแบบพารัลแลกซ์มีดังต่อไปนี้ -

แบร์กริลล์

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

ทำให้เงินของคุณมีความสำคัญ

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

อินโฟเควสท์อินโฟกราฟิก

การเดินทางของพนักงานในการค้นหาข้อมูลที่สำคัญในที่ทำงานของเขาแสดงให้เห็นโดยใช้ประสบการณ์การเลื่อน

GitHub 404

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

การประยุกต์ใช้การเลื่อนแบบพารัลแลกซ์

ถึงตอนนี้ควรมีความชัดเจนจากคำจำกัดความและภูมิหลังว่าการเลื่อนแบบพารัลแลกซ์มีประโยชน์ในสื่อดิจิทัลที่หลากหลาย แอปพลิเคชั่นบางตัวมีการเลื่อนแบบพารัลแลกซ์อยู่ด้านล่าง -

การออกแบบเกม

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

เว็บไซต์

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