יצירת אפקטים מדורגים בקלות עם CascadeJS

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

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

ספריה זו יש ללא תלויות; הוא פועל על JavaScript קלאסי. ניתן להתקין אותו באמצעות npm, Bower או על ידי הורדת עותק ישירות מ- GitHub.

כדי לקבל עבודה CascadeJS, אתה צריך שני קבצים: קובץ CSS וקובץ JavaScript. שניהם באים ארוז עם גרסאות מוקטנות כדי לחסוך לך כמה KBs על גודל הדף.

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

אבל, תצטרך להגדיר את זרימה () פונקציה בקובץ שלך, לאחר מיקוד כל רכיב שאתה רוצה הנפשת.

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

הנה קטע של וניל מהדגמה של האתר הראשי:

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

CascadeJS יש פונקציה נוספת בשם קטע () אשר מאפשר לך לפצל אותיות (או אלמנטים) לתוך מכולות נפרדות, ללא animating אותם. ניתן להשתמש בפונקציה זו צבע טקסט restyle בדף על ידי מיקוד כל אות בודדת במילה. די מגניב, נכון?

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