การเลื่อน Parallax ทำได้ง่ายด้วย StickyStack.js

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

คุณยังสามารถสร้าง สไตล์พารัลแลกซ์ที่ไม่ซ้ำใคร ใช้ StickyStack.js เสียบเข้าไป. มัน สร้างขึ้นบน jQuery และคงส่วนของหน้าหลักไว้ที่ด้านบนขณะที่คุณเลื่อนลง.

สิ่งนี้สร้าง ภาพลวงตาของเว็บไซต์ชั้น ที่แต่ละหน้า “สแต็ค” ด้านบนของอื่น ๆ มันเจ๋งจริงๆและตั้งค่าได้ง่ายด้วยตัวคุณเอง.

แม้ว่าจะง่ายต่อการติดตั้ง แต่ก็ต้องมีความเข้าใจในการพัฒนาส่วนหน้า.

คุณต้องก่อน สร้างส่วนของหน้าแต่ละส่วน ภายในภาชนะหลัก วิธีนี้คุณจะมี ทุกสิ่งที่อยู่ใน HTML, เพื่อให้คุณสามารถกำหนดเป้าหมายทุกอย่างได้ด้วยฟังก์ชั่น StickyStack jQuery.

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

นี่คือ ตัวอย่างรหัส จากหน้า GitHub:

 $ ('. main-content-wrapper'). stickyStack (containerElement: '. main-content-wrapper', stackingElement: 'ส่วน', boxShadow: '0 -3px 20px rgba (0, 0, 0, 0.25)' ); 

แม้ว่าสิ่งนี้จะไม่ได้รับการอัปเดตในเวลาประมาณสองปี แต่ก็ยังเป็นปลั๊กอินที่น่าเชื่อถือมาก มัน ทำงานในเบราว์เซอร์ทั้งหมดที่ฉันทดสอบ (Chrome, Safari, & Firefox) ด้วย รองรับ jQuery ทุกรุ่น.

นอกจากนี้ไฟล์ย่อยังเป็น 2KB เท่านั้น ซึ่งเป็นขนาดที่เหมาะสมสำหรับปลั๊กอิน.

หากต้องการเรียนรู้เพิ่มเติมเยี่ยมชม repo หลักและดูว่า StickyStack สามารถเสนออะไรได้บ้าง ฉันคิดว่ามันใช้ได้ดีที่สุด เว็บไซต์หน้าเดียว หรือ หน้า Landing Page ที่มีพื้นหลังแบบเต็มหน้าจอขนาดใหญ่.

คุณยังสามารถตรวจสอบ การสาธิตสดบน CodePen ถ้าคุณต้องการที่จะดูว่าสิ่งนี้มีลักษณะอย่างไรในเว็บไซต์สด.