יצירת מעברי מעבר יפה עם

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

עם Granim.js, אתה יכול לבנות צבע מותאם אישית צבע מלא מעברים זה נראה חלקה רשת היטב עם כל אתר.

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

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

רק זרוק את granim.js קובץ לתוך הדף שלך להתחיל. אתה יכול להוריד עותק מ GitHub או לארח אחד CDN חי.

הנה מדגם קוד בסיסי מן ריפו GitHub:

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

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

שים לב שדוגמה זו לוקחת הרבה של קוד JS / CSS אז זה לא יישום פשוט.

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

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

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

ל הורד עותק בקר בדף משחרר ב GitHub או לתפוס עותק של .י קובץ ישירות מ cdnjs. ול להציג את המקור בדוגמה חיה לקחת הצצה זו הדגמה CodePen שנוצר על ידי ג 'ונתן שניידר.