من اخیراً یک قالب ایجاد کرده ام که به راحتی با CSS انیمیشن ایجاد می کند.
برای استفاده از الگو به این مخزن GitHub بروید:
این قالب HTML، CSS و JS ایجاد انیمیشن های CSS را آسان می کند.
فریم های انیمیشن را به صورت HTML تعریف کنید <div> عناصر با کلاس frame. به هر فریم یک قاب منحصر به فرد بدهید id از frame[number].
با افزودن، فریم‌های بعد از اولین را مخفی کنید style="display: none;".
این متغیرهای جاوا اسکریپت را تغییر دهید:
let seconds = 0.5;
let loop = true;
let play = true;
let numberOfFrames = 4;
-
seconds: مدت زمان (بر حسب ثانیه) هر فریم نمایش داده می شود. پیش فرض:0.5 -
loop: اگر انیمیشن باید حلقه بزند. پیش فرض:true -
play: اگر انیمیشن به طور خودکار شروع شود. پیش فرض:true -
numberOfFrames: تعداد فریم ها
این frame کلاس به قاب استایل می دهد…
فریم های انیمیشن را به صورت HTML تعریف کنید <div> عناصر با کلاس frame. به هر فریم یک قاب منحصر به فرد بدهید id از frame[number].
<div id="frame1" class="frame">
...
</div>
<div id="frame2" class="frame" style="display: none;">
...
</div>
با افزودن، فریم‌های بعد از اولین را مخفی کنید style="display: none;".
این متغیرهای جاوا اسکریپت را تغییر دهید:
let seconds = 0.5;
let loop = true;
let play = true;
let numberOfFrames = 4;
-
seconds: مدت زمان (بر حسب ثانیه) هر فریم نمایش داده می شود. پیش فرض:0.5 -
loop: اگر انیمیشن باید حلقه بزند. پیش فرض:true -
play: اگر انیمیشن به طور خودکار شروع شود. پیش فرض:true -
numberOfFrames: تعداد فریم ها
این frame کلاس اندازه قاب و حاشیه را سبک می کند.
قالب شامل:
- یک نوار لغزنده برای تغییر فریم انیمیشن
- یک چک باکس برای تغییر یا بازکردن حلقه (
loop) - یک ورودی برای تغییر زمان نمایش هر فریم (
seconds)
شما می توانید نسخه ی نمایشی این قالب انیمیشن CSS را در قالب انیمیشن CSS مشاهده کنید
با تشکر از خواندن این مقاله و اگر پیشنهادی برای الگو دارید به من اطلاع دهید!
