יש עולם שלם סביב SVG ואנימציות באינטרנט. מי שעוד לא מכיר כלכך וחשב על אנימציות בשילוב באתרים, אז יש כמה דרכים:
- אנימציות ב SVG – בשילוב עם JS CSS ואפשר לעשות אנימציות מגניבות מאד, נתמכות ברוב הדפדפנים ושוקלות כלום מכלום.
- gif – אפשר לעשות בAfter effects או כלים גרפיים אחרים אניציות ולייצר לGIF . אבל יש אם זה קצת בעיות ברקעים וזה גם יכול לשקול הרגע כי זה קובץ שעלול להיות דיי כבד.
- אפשר גם עם html canvas או סקריפטים למינהם . לרוב זה דברים יותר ייעודיים נגיד למשחקים או אניציות מורכבות עם איוונטים.
- וכן אפשר לעשות גם אניציות בcss נקי שזה חלק מהרעיון של אנימציות בSVG.
הוסיפו לSVG אניצמיות רנדומליות בCSS בעזרת JS.
הטריק הזה שימושי מאוד להרבה מקרים בהם אתם רוצים לייצר אנימציות רנדומליות לכמה אובייקטים זהים. לדוגמא: אם יש להם הרבה עננים ואתם רוצים שהעננים יזוזו מעט, אבל יש לכם 15 עננים, ואם תתנו את אותם ערכים לאנימציה מה יקרה? כולם יזוזו ביחד לאותם נקודות וזה יראה דיי מגוחך. אז אפשר להגדיר 15 אניציות שונות ולתת לכל ענן את האנימציה שלו. ואפשר לעשות פונקציה js פשוטה שגדיר באופן רנדומלי את הערכים לכל ענן ואז תקבלו תזוזה דיי טבעית של אלמנטים שזזים בקצב שונה מאד וכך תשיגו את תחושה נקיה ואינטואיטיבית יותר בעיני המשתמש.
SVG חייב להיות בתוך הHTML ולא ב SRC:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 739.46 264.65"><defs><style>.cls-1{opacity:0.2;}.cloud{fill:#fff;}.cls-3{opacity:0.4;}.cls-4{opacity:0.6;}.cls-5{opacity:0.3;}.cls-6{opacity:0.1;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"> <path class="cloud" d="M512.69,195.42a12.26,12.26,0,0,1-12.26,12.26H457.57a12.26,12.26,0,1,1,0-24.52,12.12,12.12,0,0,1,5.66,1.39,18.61,18.61,0,0,1,35.72-1.3,12.12,12.12,0,0,1,1.48-.09A12.26,12.26,0,0,1,512.69,195.42Z"/></g><g class="cls-3"> <path class="cloud" d="M318,249a15.7,15.7,0,0,1-15.7,15.69H247.45a15.69,15.69,0,0,1,0-31.38A15.51,15.51,0,0,1,254.7,235a23.82,23.82,0,0,1,45.73-1.66,14.76,14.76,0,0,1,1.89-.11A15.69,15.69,0,0,1,318,249Z"/></g><g class="cls-3"> <path class="cloud" d="M361,132.81a7.84,7.84,0,0,1-7.84,7.84h-27.4a7.84,7.84,0,1,1,3.62-14.79,11.9,11.9,0,0,1,22.83-.83c.31,0,.63,0,.95,0A7.83,7.83,0,0,1,361,132.81Z"/></g><g class="cls-4"><path class="cloud" d="M551.34,70.82a22.91,22.91,0,0,1-22.91,22.91H448.31A22.92,22.92,0,1,1,458.9,50.49a34.78,34.78,0,0,1,66.76-2.42,22.9,22.9,0,0,1,25.68,22.75Z"/></g><g class="cls-5"><path class="cloud" d="M184,95.61a33.48,33.48,0,0,1-33.47,33.47h-117A33.47,33.47,0,1,1,48.93,65.92a50.79,50.79,0,0,1,97.5-3.53,31.91,31.91,0,0,1,4-.25A33.47,33.47,0,0,1,184,95.61Z"/></g><g class="cls-4"><path class="cloud" d="M739.46,188.3a13.53,13.53,0,0,1-13.52,13.52H678.68a13.52,13.52,0,1,1,0-27,13.36,13.36,0,0,1,6.24,1.53,20.51,20.51,0,0,1,39.38-1.43,12.78,12.78,0,0,1,1.64-.1A13.52,13.52,0,0,1,739.46,188.3Z"/></g> <g class="cls-4"><path class="cloud" d="M177.4,174.19a11.15,11.15,0,0,1-11.16,11.16h-39a11.16,11.16,0,1,1,5.16-21.06,16.94,16.94,0,0,1,32.51-1.18,12.22,12.22,0,0,1,1.35-.08A11.16,11.16,0,0,1,177.4,174.19Z"/></g><g class="cls-1"><path class="cloud" d="M653.92,147.54a18.39,18.39,0,0,1-18.39,18.38H571.25a18.39,18.39,0,1,1,8.49-34.69,27.91,27.91,0,0,1,53.57-1.94,18.13,18.13,0,0,1,2.22-.14A18.39,18.39,0,0,1,653.92,147.54Z"/></g><g class="cls-6"><circle class="cloud" cx="647.84" cy="60.3" r="17.6"/></g><g class="cls-6"><circle class="cloud" cx="174.86" cy="35.71" r="17.6"/></g><g class="cls-4"><circle class="cloud" cx="537.4" cy="8.8" r="8.8"/></g><g class="cls-4"><circle class="cloud" cx="99.05" cy="176.35" r="4.4"/></g><g class="cls-4"> <circle class="cloud" cx="513.05" cy="160.35" r="4.4"/> </g></g> </g></svg>
האנימציה ב-css, מגדירים רק אחת כללית:
בגדול אפשר גם להגדיר את הtransform בJS אבל יותר נוח בCSS . אם כי זה תלוי סיטואציה. כמו כן שימו לב! SVG לא עובד כמו CSS. יש הרבה מאפייני CSS שלא חלים על SVG. בקיצר התזוזה הקלה הזו בשילוב של עם ררנדומליות שאוסיף בJS ותראו איך זה מתקבל יפה.
@keyframes CloudsMove { 0%{transform: translate(0, 0);} 25% {transform: translate(6px, 3px);} 50% {transform: translate(0px, 0px);} 75% {transform: translate(-6px ,-3px);} 100% {transform: translate(0, 0);} };
הנה הטריק בJS להגדיר את האנימציות לכל אחד מהרכיבים של הSVG . (בחרנו אלמנט עם קלאס cloud.):
פונקציה פשוטה ממש, בסה"כ יוצרת HTMLCollection של כל האלמנטים שהם בעלי אותו הקלאס. וכפי שרואים בדוגמה:
- מהירות רנדומלית בין 20 -30 שניות
- דיליי רנדומלי בין 0-3 שניות.
const allClouds = document.querySelectorAll('.cloud'); allClouds.forEach(element => { element.style.animation = 'CloudsMove ' + (Math.random() * (30 - 20) + 20) +'s ' + (Math.random() * 3) + 's ease-in-out infinite'; });
בהצלחה! 🐊