ספריות עבור מגניב גלילה אפקטים

עיצוב אתר מגיע לחיים עם אנימציה להורג היטב. אם אתה מחפש את הספריות הנכונות להוסיף אפקטים לפרויקט שלך, הנה אני כבר עשה רשימה של כמה ספריות כי אתה יכול להשתמש כדי לתת אפקטים המבוססים על אירוע הגלילה.

כאשר משתמש גולל בדף האינטרנט שלך, הפעולה יכול להיות מתוכנן להפעיל מגוון של אפשרויות אנימציה כגון אפקטים לדעוך, לטשטש, 3D, parallax, ועוד. יש 25 ספריות JS כאן שיכולים לעזור לך להשיג סוג כזה של תגובה בעיצוב האתר שלך.

גלול לחשוף

ספריה המקלה על הוספת הנפשה גלילה הן לאינטרנט והן לנייד. ניתן להגדיר הקלות מותאמות אישית, סיבובי תלת-ממד, משך זמן ופרמטרים רבים של mor אל הרכיב שברצונך להנפיש.

תלויות: none גודל: 2.9kb | רישיון: MIT

Aniview

תוסף שפועל יחד עם Animate.CSS כדי לאפשר את הנפשות רק כאשר האלמנט שלך מגיע אל שדה התצוגה.

תלויות: jQuery גודל: 1kb | רישיון: N / A

דהייה לתוך תצוגה

תוסף המוסיף את אפקט הדהייה פנימה / החוצה אלמנטים כאשר הם נכנסים או יוצאים מראש viewports.

תלויות: jQuery גודל: 3.81kb | רישיון: N / A

וואו

WOW יגלה An anim.css הנפשות על האירוע לגלול. אתה יכול להגדיר את משך האנימציה, עיכובים, קיזוז ו iterations ישירות מן סימון HTML, ואז פשוט קוראים את הכיתה של אלמנט מ JS.

תלויות: Animate.css | גודל: 8.23kb רישיון: MIT

ScrollMagic

תוסף זה יציג אפקט 'קסום' כאשר משתמש מגלגל את הדף. זה מושלם עבור animating, הצמדה אלמנט, או toggling בכיתה CSS, הכל על בסיס מיקום הגלילה. ScrollMagic יכול לעבוד יחד עם GSAP ו VelocityJS ביצירת סצנת אנימציה. ראה את הדגמות המלאות כאן.

תלויות: jQuery, GSAP, מהירות | גודל: 16.9kb | רישיון: MIT

jScrollability

jScrollability מאפשר לך ליצור דפי אינטרנט בודדים עם אנימציות מגוונות מבוססות. על המשתמש sroll, האלמנט יהיה הנפשת מבוסס על עמדות הגלילה. אנימציות לרוץ על בסיס עומק הגלילה, וכמובן אתה יכול להגדיר את ההתחלה ואת הסוף של האנימציה.

תלויות: jQuery | גודל: 1.86kb | רישיון: MIT

pushIn.js

ספריה פשוטה להוסיף את dolly-in או לדחוף בתוקף לכל אלמנט זה עובד כאשר משתמש מגלגל דרך הדף. זה קל ליישם: פשוט להוסיף את ההתחלה, לעצור ואת מהירות הפרמטרים ל נתונים- params אל אלמנט HTML שלך.

תלויות: אף אחד | גודל: 4.94kb רישיון: N / A

סקרוליסימו

זוהי ספריית JS להוסיף אנימציה חלקה נשלט אנימציות. הוא מנצל את greensock של tweens ו timeline כדי ליצור אנימציות חלקה.

תלויות: גרין שוקס TweenLite / TweenMax | גודל: 2.94kb | רישיון: N / A

גלילה אנימציה

זהו תוסף jQuery להוסיף אנימציה מופעלות באמצעות תצוגה באמצעות Greensock. זה מקל על הנפשת אלמנטים עם הקלות, שינוי, קנה המידה, סיבוב ואנימציות 3D.

תלויות: jQuery, GreenShock | גודל: 14kb | רישיון: GNU GPL

Circlr

Circlr מאפשר לך ליצור את האנימציה סיבוב אלמנט, מופעלות על ידי גלילה, אירועי עכבר או אירועי מגע. זה מושלם לעשות חלון ראווה של מוצר אשר ניתן לצפות מכל 360 מעלות, מופעל על ידי המשתמש לגלילה.

תלויות: אף אחד | גודל: 6.05kb | רישיון: MIT

Scrollimator

Scrollimator יראה לכם את המיקום ואת התקדמות הגלילה, ולחזור ערכים בהם ניתן להשתמש כדי לשנות את tween אנימציות המצורפת המשתמש גלילה התנהגות. הוא תומך גלילה אנכית ואופקית.

תלויות: אף אחד | גודל: 37.7kb | רישיון: N / A

Crossfade

Crossfade הוא תוסף להוסיף את האפקט crossfade לתמונה. האפקט המטושטש ימשיך כמשתמש לגלילה למטה.

תלויות: jQuery | גודל: 3.19kb רישיון: MIT

אפקט גלילה

זה הוא ספרייה עבור דף ניסיוני לגלול אפקטים שנוצרו על ידי CodyHouse. זה מנצל velocitey.js אנימציות.

תלויות: jQuery, מהירות | גודל: 17.6kb | רישיון: N / A

jquery.parallax-scroll

ספריה זו מאפשרת לך להוסיף חלקה אפקט פרלקסה לגלילה הדף האנכי. רק לייבא jQuery ו jquery.easing.1.3.js, ולאחר מכן להוסיף את "פרלקס" תכונה ופטמסטר אופציונלי אלמנט שלך כדי להתאים אישית את האפקט.

תלויות: jQuery, jQuery.easing | גודל: 8.72kb רישיון: GNU GPL

parallax.js

Parallax.js הוא תוסף פשוט מוסיף את אפקט גלילה פרלקסה, בהשראת אתר Spotify.

תלויות: jQuery | גודל: 6.63kb רישיון: MIT

אנלאקס

Enllax הוא סופר קל משקל לשימוש על החלת אפקט פרלקסה על כל רכיב גלילה. ניתן להגדיר אלמנטים ברקע או בחזית אל אפקט hav ethis. זה עובד עבור גלילה אנכית ואופקית.

תלויות: jQuery | גודל: 1.53kb רישיון: MIT

טשטש על הגלילה

ספריה זו מסייעת לך להוסיף את אפקט הטשטוש לתמונה, אשר תוצג על ידי גלילה בדף. ככל שתגלוש עמוק יותר בדף, כך התמונה תהיה מטושטשת יותר.

תלויות: אף אחד | גודל: 1.1kb | רישיון: N / A

boxLoader

boxLoader הוא תוסף פשוט לטעון רכיבים על גלילה הדף. הפרמטר שאתה צריך להגדיר את הכיוונים (x או y), מיקום באחוזים, השפעה וגם משך.

תלויות: jQuery | גודל: 3.42kb | רישיון: N / A

דף גלילה מוטה

כשמשתמש גולל דרך דף, תוסף זה יגלה אפקט תלת מימדי מדהים אלמנט שהגדרת.

תלויות: jQuery | גודל: 1.5kb | רישיון: GNU GPL

אהרלקס

AhRelax מספק דרך לעשות אנימציות מבוססות גלילה מהירה. זה lighweight וגם יש ביצועים גדולים. אתה יכול לקרוא עוד על זה כאן.

תלויות: jQuery | גודל: 1.6kb | רישיון: MIT

מגילה מפוארת

אם אי פעם אתה רואה את אפקט הגלילה של הצפת על אנדרואיד או iOS, עם תוסף זה אתה יכול עכשיו להחיל את זה לאתר שלך. ניתן להוסיף אנימציה, או להקפיץ או זוהר, כאשר משתמש מגיע למעלה / התחתון של הדף.

תלויות: jQuery | גודל: 2.64kb | רישיון: GNU GPL

גלילת תמונות פרלקסה

תוסף זה יגרום אלמנטים לצוף ולהעביר כמו המשתמש לגלול למטה או את הדף.

תלויות: jQuery | גודל: 8.69kb רישיון: MIT

Rlsmooth

זהו תוסף קטן כדי ליצור את האפקט הזורם כאשר משתמש scolls למטה או את הדף. ישנם שלושה אפקטים זמינים: שקופית, דהייה ולהציג.

תלויות: jQuery | גודל: 1.95kb | רישיון: MIT

גלול

מוסיף אפקטים פשוטים לדף גלילה כגון קנה מידה, לסובב, לתרגם ולשנות את אטימות של אלמנטים. זה קל להתקנה: פשוט לייבא את jQuery, תוסף זה, ולהגדיר את הפרמטרים אנימציה על הסימון של אלמנט.

תלויות: jQuery | גודל: 5.45kb רישיון: N / A

תמונה של Parallax ImageScroll

תוסף זה מאפשר לך לתת אפקט פרלקסה על כל תמונה בדף שלך. זה לעשות שימוש CSS3 המרה לעשות את האפקט לעבוד. לתוסף זה יש תמיכה ב- jQuery ו- AMD.

תלויות: jQuery | גודל: 8.01kb | רישיון: MIT