גרפיקה וקטורית מדרגית (SVG) היא פורמט תמונה שנכתב ב- XML. בעזרת SVG תוכלו לקוד גרפיקה מדרגית דו-ממדית. לאחר מכן תוכלו ליישם ולשנות אותם ב- CSS ו- JavaScript.
SVG מאפשר לשלושה סוגים של גרפיקה: צורות וקטוריות (קווים ישרים ומעוקלים לכל הכיוונים והצורות), תמונות וטקסט. בגלל יכולותיו השונות, מעצבי אתרים פונים ל- SVG כדי ליצור אנימציות מורכבות. הם קלים להתקנה, אינם מאבדים איכות כאשר הם משתנים בגודל, ואינם דורשים מאף יישומי צד שלישי לעבוד.
מכיוון שהאנימציות עדיין גדלות בפופולריות, רובן אינן מכירות אותן. מאמר זה ידגיש 20 אנימציות SVG פנטסטיות המראות את הפוטנציאל של פורמט זה.
1. אייקוני SVG רפואיים על ידי קיטונים
קישורים מהירים
- 1. אייקוני SVG רפואיים על ידי קיטונים
- 2. רחף על ידי SeanMcCaffery
- 3. משוך למטה לרענון (מטוס נייר) מאת ניקולאי טלנוב
- 4. Just Keep Going מאת דיאקו מ. לוטפוללהי
- 5. מסנני SVG שנוספו לסרטון HTML5
- 6. פאזל
- 7. אניה Gradient מאת פטריק יאנג
- 8. בואו לנסוע מאת jjperezaguinaga
- 9. שעון מאת מוחמד מוהיבר
- 10. אייקונים מונפשים מאת לואיג'י דה רוזה
- 11. כל המכשירים ב- SVG מאת כריס גנון
- 12. מפל מאת כריס גנון
- 13. מחולל צמחים מאת בלייק בואן
- 14. לחיצה על אייקון של חמיש וויליאמס
- 15. עוגה חדשה מאת מרקו באריה
- 16. מגרסת נייר מאת כריס גנון
- 17. פוליאליון נמוך על ידי GREYGHOST
- 18. מטעין שעון חול מאת ללה
- 19. פרה מגיבה מאת שרה דרסנר
- 20. סטודנט מאת דומני
- תורך
האנימציה החמה והחלקה הזו נהדרת לכל אתר שקשור לבריאות. בזמן שאתה מפרט את האשכולות השונים, התמונות יופיעו בעדינות. מכונית האמבולנס או האטום יבנה, העין תיפתח והרופא יקפוץ החוצה. אנימציה זו מציגה את כל הכיף והדינמיות של SVG.
קישור
2. רחף על ידי SeanMcCaffery
אנימציה אוניברסלית שתוכלו להכניס לכל אתר אינטראקטיבי. המראה העדין של הגבולות כשאתה מרחף משאיר אותך עם תחושה מספקת ומזמין אותך ללחוץ על הקישור.
קישור
3. משוך למטה לרענון (מטוס נייר) מאת ניקולאי טלנוב
בדרך כלל, דפים יתרעננו כשאתה "מושך" עליהם. אנימציה זו מביאה את זה לרמה חדשה. כשתמשוך למטה כדי לשחרר אותו, תשגר מטוס נייר לשמיים. אם אתה רוצה שהמבקרים שלך ירעננו את האפליקציה שלך לעיתים קרובות, עליך לשקול להוסיף אנימציה כמו זו.
4. Just Keep Going מאת דיאקו מ. לוטפוללהי
אנימציה SVG שמציגה את הפוטנציאל של וקטור המדרג. התנועה המדויקת החלקה של גוף האדם מהפנטת.
קישור
5. מסנני SVG שנוספו לסרטון HTML5
פול אירי מצוות Google Chrome בדק כיצד SVG יכול לשנות תוכן מחוץ לגרפיקה וקטורית. הוא שילב CSS ו- SVG כדי ליצור פילטרים חזותיים מדהימים כדי להראות שהאנימציה של SVG יכולה להיות תוספת נאה לסרטון מוכן.
קישור
6. פאזל
אתה יכול להכין פאזלים אינטראקטיביים מדהימים בעזרת אנימציית SVG. בדוגמה זו, אנו יכולים לבחור אחת מתמונות רבות ולראות כיצד היא מתפרקת להרבה חלקים קטנים של הפאזל. אתה יכול לשחזר את זה גם!
קישור
7. אניה Gradient מאת פטריק יאנג
אם אתה נמצא באורות ניאון וגופנים יפהפיים, אתה תיהנה מהאנימציה הזו. עבודה זו מראה כיצד אינך זקוק לקווים נעים לצורך אנימציה מבריקה, פשוט פונט נהדר וקוד צבע נכון עם אפקט מעבר צבע.
קישור
8. בואו לנסוע מאת jjperezaguinaga
שני מטוסים ובלון אוויר חם הנע סביב ציוני דרך פופולריים בעולם. אנימציה זו צבעונית, אופטימית ומנפחת מחשבות. זה מראה את כל מה שאתה יכול לעשות אם אתה מיומן ב- SVG.
קישור
9. שעון מאת מוחמד מוהיבר
הנפשה SVG פשוטה של שעון נע שמראה את השעה הנוכחית. התנועה המרגיעה של המצביעים והעיצוב המינימליסטי עושים פלאים עבור האנימציה הזו.
קישור
10. אייקונים מונפשים מאת לואיג'י דה רוזה
אם תרחף מעל סמלים אלה תפעיל את האנימציות, שהן פשוטות אך יעילות. אתה יכול לראות שאתה לא צריך לעשות פלאים כדי להפוך אייקון אנימציה מרשים.
11. כל המכשירים ב- SVG מאת כריס גנון
אנימציה בתיקייה אחת שעוברת על כל המכשירים החכמים בהם אנו משתמשים בדרך היצירתית ביותר. שולחן העבודה יהפוך למחשב נייד, מחשב נייד לטאבלט ואז לסמארטפון.
קישור
12. מפל מאת כריס גנון
עוד אחד של כריס גנון, זו הדגמה מסודרת של קרקעית מפל מים מוקצפת. תנועת המים מסודרת, וניתן לראות טיפות קטנות של מים מתזים עוזבים את גבולות האנימציה כדי שהכל ייראה מציאותי יותר.
קישור
13. מחולל צמחים מאת בלייק בואן
עכשיו זה משהו אחר. כשתלחץ על כפתור 'צור', תראה צמחים עולים וצומחים. אך בכל פעם שתלחץ, תבוצע דפוסים שונים.
קישור
14. לחיצה על אייקון של חמיש וויליאמס
SVG אינטראקטיבי נוסף שמפעיל אנימציה ברגע שאתה לוחץ עליו. ההפעלה הזו תיזום את האנימציה "שלח" ברגע שתלחץ עליה.
קישור
15. עוגה חדשה מאת מרקו באריה
אנימציה מעניינת המציגה את עשיית העוגה שכבה אחר שכבה. זו אנימציה SVG מרשימה שמתאימה לכרטיס יום הולדת.
16. מגרסת נייר מאת כריס גנון
אם אתה נהנה לצפות בגריסת נייר, תיהנה מההנפשה הזו המתארת מכונה שגורסת נייר על ידי זמנים ללא הגבלה ברצף חלק.
קישור
17. פוליאליון נמוך על ידי GREYGHOST
זהו איור והנפשה מעוררי-מחשבה המתארים ראש אריה המופיע ונעלם בצורת מצולעים מונפשים.
קישור
18. מטעין שעון חול מאת ללה
אנימציה יעילה נוספת המשתמשת רק ב- SVG. כל 5 שניות, שעון החול יתהפך ויתחיל מחזור חדש.
קישור
19. פרה מגיבה מאת שרה דרסנר
זו אנימציה אינטראקטיבית מצחיקה המאפשרת לך ללחוץ על פרה ולגרור אותה סביב הירח בזמן שאסטרונאוט מבולבל מסתכל עליה.
20. סטודנט מאת דומני
נראה כי סטודנט נלהב מוכן ללמוד! זו אנימציה נהדרת בה דפי הספר מסתובבים יפה. אין מהבהב מהתלמיד, אבל זו עדיין אנימציה מסודרת לחלוטין לסיום הרשימה הזו.
קישור
תורך
מהן הנפשות SVG המועדפות עליך שלא כלולות ברשימה זו? שתף את הבחירות שלך בתגובות למטה!
