Scrollmagic: עיצוב אתרים מהנה

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

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

ScrollMagic: עיצוב אתרים מהנה

ScrollMagic היא ספריה המיוצרת ב- JavaScript כדי להשיג אינטראקציות בעת העברת אתרים. זהו שכתוב מלא של קודמתה Superscrollorama והארכיטקטורה שלה מבוססת על תוספים שמציעים התאמה אישית והרחבה קלה.

זה אידיאלי אם אנו רוצים ליישם כמה מהדברים הבאים:

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

תכונות ScrollMagic

• ביצועים מיטביים, הוא קל, גמיש ומאפשר הרחבה. ניהול אירועים ותכנות מונחה עצמים .זה תומך בעיצוב אתרים אדפטיבי. יש לו תמיכה לתנועות בשני הכיוונים (אופקי ואנכי) יש לו תמיכה בתנועות בתוך מכולות (div), אפילו מרובים בדף אחד. זה עובד בצורה מושלמת עבור דפדפנים: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. במאגר ה- GitHub שלו, יש לו תיעוד מפורט ודוגמאות יישום רבות.

קבל ScrollMagic

ניתן להשיג אותו בדרכים שונות.

1: GitHub

git clone git: //github.com/janpaepke/ScrollMagic.git

2: באוור

Bower להתקין גלילה

3: מנהל חבילות צומת

npm התקן מגילה

4: CDN

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

תוכל גם לקרוא כיצד להתאים אישית את העיצוב של דוא"ל ב- Outlook

התקנה ושימוש

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

;

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

זו תהיה דוגמא בסיסית:

// בקר בקר init var controller = ScrollMagic.Controller חדש (); // צור סצנה חדשה ScrollMagic.Scene ({משך זמן: 100, // הסצינה צריכה להימשך למרחק גלילה של 100 פיקסלים בקיזוז: 50 // התחל סצנה זו לאחר גלילה של 50px}). setPin ("# my-sticky- אלמנט ") // מצמיד את האלמנט למשך הסצינה.addTo (בקר); // להקצות את הסצינה לבקר

דוגמה מתקדמת יותר היא, להשיג קיזוזים מרובים, קוד המקור שלה יהיה:

$ (פונקציה () {// חכה למסמך מוכן // init controller var controller = חדש ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# אנימה", 0.5, {סולם: 3, קלות: Linear.easeNone}); // build scene var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", משך זמן: 400, אופסט: 250}). SetTween (tween).setPin ("# animated"). addIndicators ({name: "שינוי גודל"}) // להוסיף אינדיקטורים (דורש תוסף).addTo (בקר); // init בקר אופקי var controller_h = חדש ScrollMagic.Controller ({אנכי: שקר}); tween_h = TweenMax.to ("# הנפשה", 0.5, {סיבוב: 360, קלות: Linear.easeNone}); // build scene var scene_h = new ScrollMagic.Scene ({משך: 700}).setTween (tween_h). setPin ("# אנימה"). מוסתר ({name: "סובב"}) // הוסף אינדיקטורים (דורש תוסף).addTo (controller_h);});

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

אנו ממליצים לך לבצע התקנה נקייה של Windows 10 באמצעות מקל USB