10 CSS & JavaScript Snippets สำหรับสร้าง Parallax Scrolling Effect

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

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

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

1. The Great Fall โดย CJ Gammon

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

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

ดูปากกา The Great Fall โดย CJ Gammon

2. CSS Scrolling Parallax โดย Sebastian Schepis

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

นักพัฒนา Sebastian Schepis ใช้ CSS สำหรับหน้านี้เท่านั้น และเป็นแนวคิดที่ค่อนข้างเรียบง่าย ฉันคิดว่าทุกคนสามารถโคลนสิ่งนี้ได้อย่างง่ายดาย ไม่ต้องพูดถึงการออกแบบพื้นหลังที่สามารถปรับปรุงได้อย่างมาก

ดูเอฟเฟกต์ Parallax เลื่อน CSS ของปากกาโดย Sebastian Schepis

3. Simple Image Tag Parallax โดย Renan Breno

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

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

ดูพารัลแลกซ์ Pen Simple Image Tag โดย Renan Breno

4. พื้นหลังภาพพารัลแลกซ์และคงที่

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

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

ดูปากกา #Maincode Hackdays โดย chaobu

5. CSS Parallax โดย Paulo Cunha

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

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

ดู Pen CSS Parallax โดย Paulo Cunha

6. การออกแบบพารัลแลกซ์ โดย Katie Rogers

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

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

ดูการออกแบบ Pen Parallax โดย Katie Rogers

7. เลื่อน Parallax ภาพพื้นหลัง โดย Rich Howell

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

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

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

ดู Paralax ภาพพื้นหลังเลื่อนด้วยปากกาโดย Rich Howell

8. พื้นหลัง Starry Parallax โดย Saransh Sinha

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

ภาพเคลื่อนไหวทำงานผ่าน CSS แต่ข้อมูลโค้ดนี้ใช้ Sass และ Compass ดังนั้นจึงควรทำความเข้าใจก่อนทำการแก้ไข

ดูพื้นหลัง Pen Parallax Star ใน CSS โดย Saransh Sinha

9. Canvas Parallax Skyline โดย Jack Rugile

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

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

ดู Pen Canvas Parallax Skyline โดย Jack Rugile

10. ตัวกรองกระจกแตก โดย Bajjy Xilo

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

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

ดูตัวกรอง Pen BrokenGlass css โดย Bajjy Xilo