آیکون های متحرک یکی از جذاب ترین روش ها برای بهبود تجربه کاربری و افزودن حس مناسبت به وب سایت هستند. استفاده از SVG (Scalable Vector Graphics) مزایای زیادی دارد!!! سبک است، بدون افت کیفیت مقیاس پذیر است و کنترل کامل روی المان ها با CSS امکانپذیر است.
در این مقاله ابتدا اصول آمادهسازی SVG و انیمیشن های پایه را بررسی می کنیم و سپس چند نمونه عملی شامل چراغ های کریسمس، رودلف با بینی درخشان!! کره برفی و متن متحرک «Season’s Greetings» را با هم پیاده می کنیم .
چرا SVG برای انیمیشن مناسب است؟؟
SVG یک فرمت برداری مبتنی بر XML است که در تمام مرورگرهای مدرن پشتیبانی میشود. برخلاف تصاویر رستری مثل PNG یا GIF، SVG:
- بدون افت کیفیت بزرگ یا کوچک میشود
- بهراحتی با CSS متحرک میشود
- حجم سبک و مناسب برای وب دارد
- قابلیت کنترل بخشهای داخلی با کلاس و ID را فراهم میکند
SVG را میتوان inline در HTML قرار داد و سپس هر بخش را با قواعد CSS هدفگذاری و متحرک کرد .
آماده سازی کد SVG
بسیاری از نرمافزارهای گرافیکی مانند Adobe Illustrator یا Inkscape SVG هایی پیچیده تولید میکنند. قبل از استفاده در وب، کد را ساده و قابل خواندن کنید و کلاسهای مناسب برای بخشهای مختلف اضافه کنید.
مثلاً چراغها، بینی رودلف و متنها را با کلاسهای جداگانه مشخص کنید تا CSS بتواند هر بخش را کنترل کند.
آموزش ساخت آیکون های متحرک Festive SVG با CSS
برای مثال می توانید از روش های زیر استفاده کنید:
انیمیشن چراغ های کریسمس
برای ایجاد چشمک زدن لامپها، از keyframes CSS استفاده میکنیم:
.svg-light .bulb {
fill: hsl(204, 70%, 23%);
animation-name: glow-blue;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes glow-blue {
0% { fill: hsl(204, 80%, 23%); }
100% { fill: hsl(204, 80%, 63%); }
}
این کد باعث میشود رنگ لامپ بین دو حالت روشن و خاموش تغییر کند و چشمک بزند.
متحرک سازی گروهی از چراغ ها
برای ردیفی از چراغها با رنگهای متفاوت میتوان SVGهای جداگانه را داخل divهایی با کلاس رنگی قرار داد و به هر کدام تأخیر متفاوت داد:
.svg-light--red .bulb { animation-name: glow-red; animation-delay: .5s; }
@keyframes glow-red { 0% { fill: hsl(6, 63%, 16%); } 100% { fill: hsl(6, 63%, 56%); } }
این روش باعث ایجاد هارمونی و چشمک زدن تصادفی میشود.
رودلف با بینی قرمز
برای جلوه طبیعیتر، بینی رودلف بهآرامی روشن و تیره میشود:
.svg-rudolph .nose {
animation: glow 6s infinite ease-in-out alternate;
}
@keyframes glow {
0% { fill: hsl(6, 93%, 16%); }
50% { fill: hsl(6, 93%, 56%); }
}
با این روش، رنگ بینی به تدریج تغییر میکند و جلوه جذابی ایجاد میشود.
بارش برف در کره برفی
چند دانه برف درون یک گروه <g> قرار میگیرند و با clip-path در محدوده کره محدود میشوند . سپس برای هر دانه برف، انیمیشن Y تعریف میکنیم:
.svg-snowglobe .snow {
animation-name: snowfall;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}
با افزودن تأخیر برای هر عنصر، حرکت طبیعیتر و تصادفی به نظر میرسد.
متن Season’s Greetings
متن ابتدا با stroke رسم میشود و سپس پر میشود:
.svg-message .text {
stroke-dasharray: 1865.753px;
stroke-dashoffset: 1865.753px;
fill-opacity: 0;
animation: drawStroke 1s forwards, fadeIn 1s 1s forwards;
}
@keyframes drawStroke { 100% { stroke-dashoffset: 0; } }
@keyframes fadeIn { 100% { fill-opacity: 1; } }
نتیجه: متن ابتدا خط خطی ظاهر میشود و سپس کامل پر میشود، جلوه زیبایی ایجاد میکند.
نتیجه گیری
در این آموزش آموختید که چگونه SVG را برای وب بهینه کنید و با CSS انیمیشن های جذاب بسازید. از چراغهای چشمکزن رودلف درخشان کره برفی متحرک تا متن Season’s Greetings را پیاده سازی کردیم . برای جلوه های پیشرفته تر میتوان CSS را با JavaScript یا کتابخانه هایی مثل GSAP ترکیب کرد و کنترل دقیق تر و تعامل های پیچیده تر ایجاد کرد . این روش هم سبک است و هم به کاربر حس مناسبت و زنده بودن میدهد!!!
