5 אנימציות SVG כדי להחיות את עיצוב האינטרנט שלך

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

עבודה עם גרפיקה וקטורית ניתנת להרחבה

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

מלבד היותו נהדר לשינוי גודל, אתה יכול גם להשתמש בקוד SVG בתוך HTML, והוא יפעל כמו כל אלמנט אחר. זה אומר שאתה יכול להשתמש חוקי CSS, קוד JavaScript, והכי חשוב, אנימציות עם ה-SVG של האתר שלך.

אתה יכול ליצור SVGs באמצעות תוכנות כמו Adobe Illustrator ואתרי אינטרנט כמו SVGator, אבל אתה יכול גם ליצור אותם ביד. פורמט SVG הוא שפת XML של טקסט רגיל ונראה קצת כמו HTML.

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

שילוב של JS ו-CSS מייצר את התוצאות הללו, והכל מתחיל בלופ זה מוסיף מאזינים לאירועים לכל כפתור.

ל (var אני = 0; i < menuItems.length; i++) {
 menuItems[i].addEventListener('נְקִישָׁה', לחצן קליק);
}

לאחר לחיצה על כפתור, פונקציה הנקראת buttonClick() מבצעת מספר פעולות. זה מתחיל בשינוי צבע הרקע של העמוד:

מסמך.body.style.backgroundColor = `#${זֶה.getAttribute('data-background')}`;

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

menuItemActive.classList.remove('menu__item--פעיל');
this.classList.add('menu__item--פעיל');
menuItemActive.classList.add('menu__item--הנפשה');
this.classList.add('menu__item--הנפשה');
menuItemActive = זֶה;

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

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

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

.path-1 {
 stroke-dasharray: 1850 2000;
 קו-היסט-היסט: 1851;
 מעבר: 5s ליניארי;
}

פונקציית JS מוסיפה מחלקת CSS ייחודית לכל חלק של הטקסט באמצעות מחלקת CSS אב יחידה כדי להוריד עוד יותר את צפיפות הקוד.

$(פוּנקצִיָה() {
פוּנקצִיָהאנימציה התחל() {
 $('#מְכוֹלָה').addClass('סְנַפִּיר');
 }
setTimeout (animationStart, 250);
});

כדוגמה ל-CSS בלבד, אנימציית SVG זו נהדרת לכל מי שלא רוצה לטבול את אצבעות רגליו בקוד JavaScript. הרעיון הוא פשוט: כפתור מתחיל בקו תחתון שהופך לגבול מלא כאשר אתה מרחף מעליו.

מסגרות מפתח של CSS יוצרות שני מצבים עבור הכפתור. למצב הראשון יש קו עבה יותר ומכסה רק את החלק התחתון של לחצן צורת SVG, החל מ-0%. המצב השני הוא הכפתור השלם ב-100% עם מהלך דק יותר.

@keyframes לצייר {
 0% {
 stroke-dasharray: 140 540;
 שבץ-היסט-היסט: -474;
 רוחב שבץ: 8px;
 }
100% {
 stroke-dasharray: 760;
 שבץ-היסט: 0;
 רוחב שבץ: 2 פיקסלים;
 }
}

מסגרות מפתח אלו מוחלות רק על מתאר לחצן ה-SVG כאשר המשתמש מעביר את הסמן מעל הלחצן. הוא משתמש ב-:hover Pseudo-class CSS כדי להשיג זאת, הפעלת כלל שמוסיף את הפריימים המפתח של האנימציה ללחצן.

.svg-wrapper:לְרַחֵף.צוּרָה {
-webkit-אנימציה: 0.5 שניותלציירליניאריקדימה;
אנימציה: 0.5 שניותלציירליניאריקדימה;
}

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

עם כל כך הרבה טכניקות מעניינות מתחת למכסה המנוע, קשה להחליט על מה לדון כשמסתכלים על דוגמה זו של שעון SVG.

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

var תאריך = חָדָשׁתַאֲרִיך();
var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuteAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

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

hands[0].setAttribute('מ', shifter (secAngle));
hands[0].setAttribute('ל', shifter (secAngle + 360));
hands[1].setAttribute('מ', shifter (minuteAngle));
hands[1].setAttribute('ל', shifter (minuteAngle + 360));
hands[2].setAttribute('מ', shifter (hoursAngle));
hands[2].setAttribute('ל', shifter (hoursAngle + 360));

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

אנימציית SVG מונעת CSS זו מספקת דרך מסודרת לגרום לכל צורה להיראות מדהימה.

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

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

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

$app-padding: 6vh;
רוחב $app: 50vh;
$app-height: 90vh;
#app {
 רוחב: $app-width;
 גובה: $app-height;
 ריפוד: $app-padding;
 רקע: לבן;
 צל קופסא: 002rem rgba(שָׁחוֹר, 0.1);
}

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

יצירת אנימציות SVG משלך עם HTML, JS ו-CSS

יצירת אנימציית SVG מאפס יכולה להיות תהליך קשה כאשר אתה מתחיל. דוגמאות אלו יתנו לך את ההתחלה הדרושה לך לבניית אנימציות SVG שיגרמו לאתר שלך לזרוח.

9 טריקים מתקדמות של שאילתת מדיה ב-CSS שכדאי לדעת

קרא הבא

על הסופר