ไลบรารี JavaScript สำหรับเอฟเฟกต์การเลื่อนแบบเย็น

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

เมื่อผู้ใช้เลื่อนหน้าเว็บลงการกระทำ สามารถออกแบบมาเพื่อทริกเกอร์ตัวเลือกภาพเคลื่อนไหวที่หลากหลาย เช่นเอฟเฟกต์จาง, เบลอ, 3D, พารัลแลกซ์และอื่น ๆ ที่นี่มี 25 ไลบรารี JS ที่สามารถช่วยให้คุณบรรลุการตอบสนองในการออกแบบเว็บไซต์ของคุณ.

เลื่อนเปิดเผย

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

อ้างอิง: ไม่มี | ขนาด: 2.9kb | ใบอนุญาต: เอ็มไอที

Aniview

ปลั๊กอินที่ทำงานร่วมกับ Animate.CSS เพื่อเปิดใช้งานภาพเคลื่อนไหวเฉพาะเมื่อองค์ประกอบของคุณเข้ามาในวิวพอร์ต.

อ้างอิง: jQuery | ขนาด: 1kb | ใบอนุญาต: N / A

จางหายไปในมุมมอง

ปลั๊กอินที่เพิ่มเอฟเฟ็กต์จางหายเข้า / ออกให้กับองค์ประกอบเมื่อพวกเขาเข้าหรือออกจากวิวพอร์ตที่กำหนดไว้ล่วงหน้า.

อ้างอิง: jQuery | ขนาด: 3.81kb | ใบอนุญาต: N / A

ว้าว

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

อ้างอิง: Animate.css | ขนาด: 8.23kb | ใบอนุญาต: เอ็มไอที

ScrollMagic

ปลั๊กอินนี้จะแสดงผล 'Magical' เมื่อผู้ใช้เลื่อนหน้า มันสมบูรณ์แบบสำหรับการเคลื่อนไหวการตรึงองค์ประกอบหรือการสลับคลาส CSS ทั้งหมดขึ้นอยู่กับตำแหน่งการเลื่อน ScrollMagic สามารถทำงานร่วมกับ GSAP และ VelocityJS ในการสร้างฉากแอนิเมชั่น ดูตัวอย่างทั้งหมดได้ที่นี่.

อ้างอิง: jQuery, GSAP, Velocity.js | ขนาด: 16.9kb | ใบอนุญาต: เอ็มไอที

jScrollability

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

อ้างอิง: jQuery | ขนาด: 1.86kb | ใบอนุญาต: เอ็มไอที

pushIn.js

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

อ้างอิง: ไม่มี | ขนาด: 4.94kb | ใบอนุญาต: N / A

Scrollissimo

นี่คือไลบรารี JS เพื่อเพิ่มภาพเคลื่อนไหวที่ควบคุมได้อย่างลื่นไหล มันใช้ tweens และเส้นเวลาของ Greensock เพื่อสร้างภาพเคลื่อนไหวที่นุ่มนวลขึ้น.

อ้างอิง: GreenShock TweenLite / TweenMax | ขนาด: 2.94kb | ใบอนุญาต: N / A

ปลั๊กอินเลื่อนภาพเคลื่อนไหว jQuery

นี่คือปลั๊กอิน jQuery เพื่อเพิ่มแอนิเมชั่นที่เรียกวิววิวโดยใช้ Greensock มันทำให้ง่ายต่อการเคลื่อนไหวองค์ประกอบด้วย easing, transform, scale, การหมุนและภาพเคลื่อนไหว 3 มิติ.

อ้างอิง: jQuery, GreenShock | ขนาด: 14kb | ใบอนุญาต: GNU GPL

Circlr

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

อ้างอิง: ไม่มี | ขนาด: 6.05kb | ใบอนุญาต: เอ็มไอที

Scrollimator

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

อ้างอิง: ไม่มี | ขนาด: 37.7kb | ใบอนุญาต: N / A

Crossfade

Crossfade เป็นปลั๊กอินสำหรับเพิ่มเอฟเฟกต์ crossfade ให้กับรูปภาพ เอฟเฟกต์พร่ามัวจะดำเนินต่อไปเมื่อผู้ใช้เลื่อนลงไปอีก.

อ้างอิง: jQuery | ขนาด: 3.19kb | ใบอนุญาต: เอ็มไอที

ผลการเลื่อนหน้า

อันนี้เป็นห้องสมุดสำหรับเอฟเฟกต์การเลื่อนหน้าทดลองที่สร้างโดย CodyHouse มันใช้ velocitey.js ภาพเคลื่อนไหว.

อ้างอิง: jQuery, Velocity.js | ขนาด: 17.6kb | ใบอนุญาต: N / A

jquery.parallax เลื่อน

ไลบรารีนี้อนุญาตให้คุณเพิ่มเอฟเฟกต์พารัลแลกซ์ให้ราบรื่นในการเลื่อนหน้าในแนวตั้ง เพียงนำเข้า jQuery และ jquery.easing.1.3.js จากนั้นเพิ่ม 'ข้อมูลรัลแลกซ์' แอตทริบิวต์และพารามิเตอร์เสริมให้กับองค์ประกอบของคุณเพื่อปรับแต่งผลกระทบ.

อ้างอิง: jQuery, jQuery.easing | ขนาด: 8.72kb | ใบอนุญาต: GNU GPL

parallax.js

Parallax.js เป็นปลั๊กอินง่าย ๆ ที่เพิ่มเอฟเฟกต์การเลื่อน parallax ซึ่งได้รับแรงบันดาลใจจากเว็บไซต์ Spotify.

อ้างอิง: jQuery | ขนาด: 6.63kb | ใบอนุญาต: เอ็มไอที

Enllax

Enllax เป็นไลบรารี่ที่มีน้ำหนักเบามากสำหรับใช้ในการใช้เอฟเฟกต์พารัลแลกซ์กับองค์ประกอบการเลื่อน คุณสามารถตั้งค่าพื้นหลังหรือองค์ประกอบเบื้องหน้าให้มีผล hav ethis มันใช้ได้ทั้งการเลื่อนแนวตั้งและแนวนอน.

อ้างอิง: jQuery | ขนาด: 1.53kb | ใบอนุญาต: เอ็มไอที

เบลอเมื่อเลื่อน

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

อ้างอิง: ไม่มี | ขนาด: 1.1kb | ใบอนุญาต: N / A

boxLoader

boxLoader เป็นปลั๊กอินง่าย ๆ ในการโหลดองค์ประกอบเมื่อเลื่อนหน้า พารามิเตอร์ที่คุณควรตั้งค่าคือทิศทาง (x หรือ y) ตำแหน่งตามเปอร์เซ็นต์ผลกระทบและระยะเวลา.

อ้างอิง: jQuery | ขนาด: 3.42kb | ใบอนุญาต: N / A

เลื่อนหน้าเอียง

ในขณะที่ผู้ใช้เลื่อนผ่านหน้าเว็บปลั๊กอินนี้จะแสดงเอฟเฟกต์ 3D แบบเอียงที่ยอดเยี่ยมสำหรับองค์ประกอบที่คุณตั้งค่า.

อ้างอิง: jQuery | ขนาด: 1.5kb | ใบอนุญาต: GNU GPL

AhRelax

AhRelax ให้วิธีในการสร้างภาพเคลื่อนไหวแบบเลื่อนเร็ว มันมีน้ำหนักเบาและมีประสิทธิภาพที่ยอดเยี่ยม คุณสามารถอ่านเพิ่มเติมได้ที่นี่.

อ้างอิง: jQuery | ขนาด: 1.6kb | ใบอนุญาต: เอ็มไอที

เลื่อนแฟนซี

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

อ้างอิง: jQuery | ขนาด: 2.64kb | ใบอนุญาต: GNU GPL

เลื่อนภาพ Parallax

ปลั๊กอินนี้จะทำให้องค์ประกอบลอยและย้ายเป็นผู้ใช้เลื่อนลงหรือขึ้นหน้า.

อ้างอิง: jQuery | ขนาด: 8.69kb | ใบอนุญาต: เอ็มไอที

Rlsmooth

นี่เป็นปลั๊กอินขนาดเล็กเพื่อสร้างเอฟเฟกต์การไหลเมื่อผู้ใช้ scolls ลงหรือขึ้นหน้า มีเอฟเฟกต์สามอย่าง: สไลด์จางและแสดง.

อ้างอิง: jQuery | ขนาด: 1.95kb | ใบอนุญาต: เอ็มไอที

Scrollme

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

อ้างอิง: jQuery | ขนาด: 5.45kb | ใบอนุญาต: N / A

Parallax ImageScroll

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

อ้างอิง: jQuery | ขนาด: 8.01kb | ใบอนุญาต: เอ็มไอที