ไซต์ที่เลื่อนยาว ๆ กลายเป็นเทรนด์การออกแบบเว็บทั่วไป หนึ่งในประเภทย่อยที่เจ๋งที่สุดคือเว็บไซต์การเลื่อนพารัลแลกซ์ซึ่งภาพเคลื่อนไหวเพื่อให้เอฟเฟกต์พารัลแลกซ์ ในขณะที่ผู้ใช้เลื่อนหน้าลงภาพเคลื่อนไหวจะถูกเรียกใช้และโดยรวมจะให้รูปลักษณ์ใหม่แก่เว็บไซต์ใด ๆ หากมีการใช้งานอย่างถูกต้อง
การทำเว็บไซต์การเลื่อนพารัลแลกมักจะน่าเบื่อเพราะต้องใช้ความรู้เชิงลึกเกี่ยวกับ CSS, Javascript และการออกแบบเว็บที่ดีเพื่อดึงออกมา นี่คือรายการของ ปลั๊กอินเลื่อน Parallax ที่ดีที่สุด ซึ่งไม่เพียง แต่ช่วยให้คุณสร้างเว็บไซต์เลื่อน Parallax ได้ง่ายขึ้น แต่ยังมีไลบรารีเอฟเฟกต์ Parallax ที่ได้รับการยอมรับอย่างดีเพื่อให้ง่ายต่อการพัฒนาเว็บเพจที่ดูดี .
การปฏิเสธความรับผิด : ก่อนที่จะเริ่มโปรดทราบว่าในการใช้ปลั๊กอินเหล่านี้จำเป็นต้องมีความรู้เกี่ยวกับเทคโนโลยีเว็บ (HTML / CSS / Javascript) บางอย่าง ปลั๊กอินที่แสดงรายการส่วนใหญ่ใช้ jquery ดังนั้นอาจจำเป็นต้องมีความรู้ Jquery
ปลั๊กอินเลื่อน Parallax
1. ScrollMagic
ScrollMagic เป็นหนึ่งในปลั๊กอิน jquery ที่ได้รับความนิยมและมีคุณลักษณะมากที่สุด เป็นไลบรารี javascript ของ isa ที่ให้คุณสร้างเอฟเฟกต์การเลื่อนที่น่าอัศจรรย์ การใช้ ScrollMagic คุณสามารถทำให้เคลื่อนไหวตามตำแหน่งการเลื่อนของคุณ ซึ่งหมายความว่าคุณสามารถแก้ไขย้ายหรือทำให้องค์ประกอบ HTML เคลื่อนไหวได้ตามที่คุณเลื่อนไม่ว่าจะต้องการระยะเวลาใดและยังเพิ่มเอฟเฟกต์พารัลแลกซ์ลงในเว็บไซต์ของคุณได้อย่างง่ายดาย มันปรับแต่งได้สูงและยังมีน้ำหนักเบา (6kb เมื่อ gzipped) ในบรรดาปลั๊กอินเลื่อน Parallax อื่น ๆ Scroll Magic มีเอกสารที่ดีที่สุดและทรัพยากรภายนอก มันเข้ากันได้อย่างสมบูรณ์แบบกับมือถือเช่นกัน
ScrollMagic มีตัวอย่างอยู่ในรายการมากมาย ตรวจสอบแรงบันดาลใจและแนวทางในการใช้ห้องสมุดนี้
เกี่ยวกับ:
หน้าแรก: //janpaepke.github.io/ScrollMagic/
สร้างโดย: Jan Paepke
การติดตั้ง:
1. CDN:
2. ดาวน์โหลดจาก Github
2. skrollr
skrollr เป็น Javascript และ CSS บริสุทธิ์ที่มีน้ำหนักเบาโดยไม่เกี่ยวข้องกับ jQuery โดยพื้นฐานแล้วมันคือ 'การเลื่อนเวทมนตร์ที่ง่ายสำหรับ CSS' ในการใช้ skrollr คุณไม่จำเป็นต้องรู้จัก Javascript หรือ jQuery ใด ๆ แค่ HTML และ CSS ก็เพียงพอแล้ว skrollr ใช้คุณลักษณะข้อมูลเพื่อเคลื่อนไหวองค์ประกอบ HTML ใด ๆ ที่คุณต้องการ หนึ่งในข้อเสียเปรียบหลักของ skrollr คือภาพเคลื่อนไหวใช้ได้เฉพาะในขณะที่หน้ากำลังถูกเลื่อน ไม่เช่นนั้นเอฟเฟกต์ทั้งหมดจะถูกพักไว้ skrollr ช่วยให้คุณเคลื่อนไหวคุณสมบัติ CSS ทั้งหมดขององค์ประกอบ HTML ของคุณ
เกี่ยวกับ:
หน้าแรก: //prinzhorn.github.io/skrollr/
สร้างโดย: Prinzhorn
การติดตั้ง: ดาวน์โหลดจาก Github
3. pagePiling.js 
Page Piling เป็นปลั๊กอิน jQuery ที่ให้คุณสร้างเว็บไซต์ของคุณในส่วนต่างๆที่ซ้อนทับกัน เมื่อเลื่อนหรือโดยการเข้าถึง URL แต่ละส่วนจะได้รับการเปิดเผยในภาพเคลื่อนไหวที่เลื่อนเรียบร้อย pagePiling.js เข้ากันได้กับแพลตฟอร์มทั้งหมด - เดสก์ท็อปแท็บเล็ตและมือถือ - และทำงานได้กับเบราว์เซอร์ส่วนใหญ่ มันลดระดับลงอย่างเบราว์เซอร์บนเบราว์เซอร์รุ่นเก่าซึ่งไม่รองรับภาพเคลื่อนไหว (เช่น IE 7) ในการใช้ปลั๊กอินคุณต้องรวมไฟล์ CSS และไฟล์ Javascript ไว้ใน HTML ของคุณ pagePiling.js ถูกเตรียมใช้งานโดย (เอกสาร) ฟังก์ชัน. ready:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
สำหรับการเริ่มต้นขั้นสูงเพิ่มเติมให้ไปที่ README.md
เกี่ยวกับ:
โฮมเพจ: //alvarotrigo.com/pagePiling/
สร้างโดย: alvarotrigo
การติดตั้ง: ดาวน์โหลดจาก Github
4. ตัน
Alton เป็นปลั๊กอินสำหรับเลื่อนของ jQuery กับเรา Scroll jacking หมายความว่าการเลื่อนแบบดั้งเดิมของเบราว์เซอร์ของคุณถูกปิดใช้งานเนื่องจากการเลื่อนที่เป็นเป้าหมายซึ่งเมื่อเริ่มต้น (โดยล้อเลื่อนของเมาส์หรือทัชแพด) พาคุณไปยังจุดแนวตั้งถัดไปบนหน้าจอหรือด้านบนของคอนเทนเนอร์ถัดไป
Alton อนุญาตให้ใช้งานได้สามแบบแยกกันซึ่งเรียกว่า 'Hero', 'Bookend' และ 'Standard' มาตรฐานช่วยให้คุณใช้การเลื่อนแบบเต็มหน้าโดยแต่ละส่วนมีความสูง 100% เลื่อนนำออกมาในส่วนถัดไปหรือส่วนก่อนหน้า Bookend ช่วยให้คุณสร้างประสบการณ์แบบ bookend ในขณะที่ Hero ช่วยให้คุณสามารถเลื่อนแจ็คเฉพาะในส่วน 'ฮีโร่' โดยที่ส่วนอื่น ๆ ของหน้าที่มีการเลื่อนแบบเนทีฟ (เปิดใช้งาน)
เกี่ยวกับ:
โฮมเพจ: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
สร้างโดย: ใบไม้กระดาษ
การติดตั้ง: ดาวน์โหลดจาก Github
5. Stellar.js
Stellar เป็นปลั๊กอิน jQuery ซึ่งคุณสามารถเพิ่มเอฟเฟกต์การเลื่อนแบบพารัลแลกซ์ได้อย่างง่ายดาย หากต้องการเรียกใช้ก่อนอื่นคุณต้องเรียกใช้ฟังก์ชัน $ .stellar () การตั้งค่าภาพเคลื่อนไหวสำหรับองค์ประกอบแต่ละรายการสามารถกำหนดค่าได้โดยใช้แอตทริบิวต์ข้อมูลในองค์ประกอบนั้น
ดาวฤกษ์ยังช่วยให้คุณมีพื้นหลังพารัลแลกซ์ซึ่งเป็นพื้นหลังที่เปลี่ยนตำแหน่งในการเลื่อน หนึ่งในคุณสมบัติที่มีประโยชน์ที่สุดของ Stellar.js คือการชดเชย
องค์ประกอบทั้งหมดจะกลับสู่ตำแหน่งเดิมเมื่อผู้ปกครองออฟเซ็ตตรงกับขอบของหน้าจอ - บวกหรือลบออฟเซ็ตเสริมของคุณเอง สิ่งนี้ช่วยให้คุณสร้างรูปแบบพารัลแลกซ์ที่ซับซ้อนได้ง่ายมาก (เอกสารที่เป็นตัวเอก)
เกี่ยวกับ:
โฮมเพจ: //markdalgleish.com/projects/stellar.js/
สร้างโดย: Mark Dalgeish
การติดตั้ง: ดาวน์โหลดจาก Github
6. multiScroll.js
ปลั๊กอินนี้สร้างขึ้นโดยนักพัฒนาเดียวกัน (alvarotrigo) ซึ่งสร้างปลั๊กอิน pagePiling.js โดยทั่วไปแล้วการเลื่อนแบบหลายจุดนั้นช่วยให้คุณสร้างเอฟเฟกต์ที่แต่ละส่วนของหน้าโหลดในสองส่วนที่แบ่งออกซึ่งเลื่อนเข้าที่เมื่อโหลดหน้า ลองดูหน้าแรกเพื่อดูว่ามีลักษณะอย่างไรบนเบราว์เซอร์ของคุณ multiScroll.js ให้คุณตั้งค่าความเร็วในการเลื่อน, การผ่อนคลาย, ตัวเลือกการเลื่อนคีย์บอร์ดและคุณสมบัติอื่น ๆ อีกมากมายเพื่อให้คุณสามารถปรับแต่งเอฟเฟกต์ตามที่คุณต้องการ
เกี่ยวกับ:
โฮมเพจ: //alvarotrigo.com/multiScroll/
สร้างโดย: alvarotrigo
การติดตั้ง: ดาวน์โหลดจาก Github
7. ScrollMe
ScrollMe เป็นปลั๊กอินสำหรับการเพิ่มเอฟเฟ็กต์การเลื่อนพารัลแลกซ์ง่ายๆให้กับหน้า มันสามารถปรับขนาดหมุนแปลและเปลี่ยนความทึบขององค์ประกอบบนหน้าเว็บขณะที่คุณเลื่อนลง ScrollMe ไม่ต้องใช้ Javascript และมีเพียง CSS ความรู้เพียงพอ ด้วยการเพิ่มคลาส“ แอนิเมชั่น” และแอตทริบิวต์ข้อมูลที่จำเป็นคุณสามารถทำให้องค์ประกอบ HTML ใด ๆ เคลื่อนไหว ScrollMe ใช้สำหรับการเพิ่มเอฟเฟกต์ CSS ได้ดีที่สุด มันมีน้ำหนักเบาและภาพเคลื่อนไหวทั้งหมดนั้นราบรื่นตราบใดที่คุณใช้ในการกลั่นกรอง
เกี่ยวกับ:
หน้าแรก: //scrollme.nckprsn.com/
สร้างโดย: Nick Pearson
การติดตั้ง: ดาวน์โหลดจาก Github
8. เลื่อน Parallax
Parallax Scroll เป็นปลั๊กอิน jQuery ที่ใช้งานง่ายซึ่งช่วยให้คุณสร้างเอฟเฟกต์การเลื่อนภาพพารัลแลกซ์ที่พบในไซต์เช่น Spotify มันค่อนข้างใช้งานง่าย - เพียงระบุคลาส CSS ที่จำเป็นสำหรับผู้ถือรูปภาพ แทนที่จะใช้ แท็กในการใช้ปลั๊กอินนี้คุณต้องใช้องค์ประกอบที่มีภาพพื้นหลังที่ระบุไว้ (โดยใช้คุณสมบัติ `background-image` CSS) คุณสามารถทำให้องค์ประกอบตอบสนองได้โดยใช้ CSS @media
เกี่ยวกับ:
โฮมเพจ: //parallax-scroll.aenism.com/
สร้างโดย: Aen
การติดตั้ง: ดาวน์โหลดจาก Github
9. Jarallax
Jarallax เป็นห้องสมุด CSS และ Javascript ที่เชี่ยวชาญด้านเอฟเฟกต์การเลื่อนแบบพารัลแลกซ์ Jarallax ได้รับการกำหนดค่าโดยใช้ Javascript (ไม่ใช่ jQuery, เพียง pure vanilla JS) มันรองรับคุณสมบัติการเลื่อนที่นุ่มนวลการทำให้สบายและแอนิเมชัน parallax Jarallax รองรับเบราว์เซอร์ส่วนใหญ่ข้ามแพลตฟอร์ม เว็บไซต์ Jarallax มีเอกสารที่ยอดเยี่ยมเกี่ยวกับวิธีปรับแต่ง Jarallax ตามความต้องการของคุณ Jarallax ยังมีวิดีโอแนะนำที่แสดงวิธีการตั้งค่า Jarallax สำหรับเว็บไซต์ของคุณและวิธีเริ่มใช้งาน
เกี่ยวกับ:
หน้าแรก: //www.jarallax.com/
สร้างโดย: Jarallax
การติดตั้ง: ดาวน์โหลดจากเว็บไซต์ Jarallax
10. Superscrollorama
Superscrollorama เป็นปลั๊กอินที่ใช้ jQuery ที่รองรับภาพเคลื่อนไหวการเลื่อน มันขับเคลื่อนโดย TweenMax และ Greensock Tweening Engine ซึ่งเพิ่มประสิทธิภาพการเคลื่อนไหวและความราบรื่น ภาพเคลื่อนไหว Superscrollorama เรียกผ่าน jQuery และคุณสามารถใช้ฟังก์ชั่น TweenMax.js ได้เช่นกัน น่าเสียดายที่ภาพเคลื่อนไหวเหล่านี้ไม่ได้รับการรองรับอย่างสมบูรณ์จากอุปกรณ์พกพา (เนื่องจากอุปกรณ์หน้าจอสัมผัสรองรับการเลื่อนในลักษณะที่แตกต่างกัน) อย่างไรก็ตามการใช้เมธอด setScrollContainerOffset สามารถเข้าถึงเอฟเฟกต์ Superscrollorama บนอุปกรณ์มือถือได้
นี่คือรหัสสำหรับทำสิ่งนี้:
.setScrollContainerOffset(x, y)
(x: ออฟเซ็ต x ของ scrollcontainer, y: ออฟเซ็ต x ของ scrollcontainer)
เกี่ยวกับ:
โฮมเพจ: //johnpolacek.github.io/superscrollorama/
สร้างโดย: johnpolacek
การติดตั้ง: ดาวน์โหลดจาก Github
ดูเพิ่มเติม: 10 สุดยอดเว็บไซต์กำเนิดไฟฟ้าคงที่
