Animate.css ساخت انیمیشن در وب با کتابخانه CSS3

تاریخ بروز رسانی: ۲۲ آبان, ۱۴۰۱

راهنمای مطالعه

یکی از بهترین راه های زیباسازی و جذاب کردن سایت، استفاده از عناصر متحرک و انیمیشن است. علاوه بر دقتی که باید در شکل و تعداد آنها بکار ببرید، به ابزار مناسبی برای ساخت سریع و آسان انیمیشن هم نیاز خواهید داشت. در این مقاله به معرفی روشی آسان برای ساخت انیمیشن در وب پرداخته‌ایم.

CSS با اضافه کردن امکانات متعدد، پیشرفت زیادی داشته است که روند توسعه وب را جذاب‌تر و چالش‌برانگیزتر کرده است. یکی از این امکانات، افکت‌های انیمیشن CSS3 است. قبل از CSS3، برای ساخت یک انیمیشن تنها می‌توانستید از جاوا اسکریپت استفاده کنید. اما اکنون می‌توانید براحتی این کار را با CSS3 انجام دهید.

در این مطلب می‌خواهیم یک کتابخانه سی اس اس شگفت انگیز به نام Animate.css را معرفی کنیم که ساخت انیمیشن با CSS3 را بسیار راحت‌تر انجام می‌دهد.

Animate.css یک کتابخانه آمده به کار از مجموعه افکت‌های انیمیشنی CSS3 است. این کتابخانه بیش از ۵۰ افکت انیمیشنی را به شما ارائه می‌کند که همیشه روی اکثر مرورگرهایی که از CSS3 پشتیبانی می‌کنند کار می‌کند.

مقاله مرتبط: با Animista، به‌راحتی انیمیشن CSS بسازید

می‌توانید این انیمیشن‌ها را روی نوشته‌ها، تصاویر، فرم‌ها و … نیز بکار ببرید. سایت های بسیاری مثل Tridiv – ویرایشگر تحت وب برای ایجاد اشکال سه بعدی در css – از این کتابخانه استفاده می کنند.

شروع کار

برای کار با کتابخانه CSS انیمیشن تنها کاری که باید انجام دهید این است که کلاس‌های مناسب با عناصر خود را در آن بگنجانید. برای شروع، فایل animate.css را در قسمت عنوان قرار دهید. می‌توانید کتابخانه کامل را از سایت منبع Github دانلود کنید.

بطور پیشفرض Animate.css تنها در اولین بارگذاری صفحه اجرا می‌شود و بعد از آن انیمیشن ثابت می‌شود. برای اینکه بتوانیم انیمیشن را کنترل کنیم به کمی جاوا اسکریپت نیاز داریم. در این مورد، همانطور که می‌بینید یک jQuery را به پروژه اضافه می‌کنیم.

<head>
...
    <link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
...
</head>

نشانه‌گذاری HTML

برای اعمال انیمیشن خود، همانطور که می‌بینید باید علاوه بر اسم انیمیشن،کلاس .animated را نیز به عنصری که می‌خواهید حرکت کند اضافه کنید.

<div class="option animated wobble">This text will animate.</div>

به همین راحتی!

انیمیشن تنها روی بارگذاری صفحه اجرا خواهد شد، پس اگر بخواهید در هنگام یک رخداد نیز انیمیشن اجرا شود احتمالا به استفاده از جاوا اسکریپت هم نیاز خواهید داشت. .option را هم می‌توانید بر اساس نیاز و سلیقه تان تغییر دهید.

امکانات دیگر CSS

انیمیشنی که ساختیم تنها یک بار، برای مدت از پیش تعیین شده و با تاخیر مشخص شده اجرا خواهد شد. پس اگر می‌خواهید دفعات اجرای آن بیشتر شود یا زمان و تاخیر اجرای آن را تغییر دهید، به این شکل می‌توانید آن را تنظیم کنید.

برای چند بار و یا حتی بینهایت بار اجرا شدن انیمیشن، می‌توانید از ویژگی animation-iteration-count استفاده کنید. مطمئن شوید که پیشوندهای مناسب مرورگرهای مختلف مانند webkit، moz و غیره را هم اضافه کنید. برای اینکه بینهایت بار اجرا شود، infinite را در بخش مقدار قرار دهید.

اما اگر می‌خواهید فقط برای چند بار نمایش داده شود، تعداد دفعات دلخواهتان را وارد کنید.

-vendor-animation-iteration-count: infinite | <number>;

برای تغییر مدت زمان اجرای انیمیشن راهکار مناسب این است که از animation-duration استفاده کرده و سپس با animation-delay تاخیر در شروع اجرای آن را کنترل کنید. در ادامه نمونه‌ای از این کد را می‌بینید.

.option {
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: 5;
}

کنترل جاوا اسکریپت

برای اینکه کنترل بیشتری روی حالت انیمیشن داشته باشید، به کمی کمک از جاوا اسکریپت نیاز دارید. می‌توان اینطور بیان کرد که می‌خواهیم یک لینک نوشتاری باعث شروع اجرای یک انیمیشن تنها با کلیک کردن روی آن بشود. ابتدا باید همانند شکل زیر یک مرجع (reference) به لینک مذکور را اضافه کنیم.

<div class="demo animated">
    <p>This text will animate. <a href="" id="ref">Click to animate!</a></p>
</div>

برای استفاده از عملکرد click، لینک مرجع را به آن اضافه کنید.

به کمک جاوا اسکریپت می‌توانید نام انیمیشن را هم تعریف کنید. به این شکل عمل می‌کنیم که ابتدا یک عملکرد animate ایجاد می‌کنیم، و سپس انیمیشن را همراه با کلاس عنصر متحرک نامگذاری می‌کنیم (در کد بالا، خصوصیت demo را اضافه کرده‌ایم).

کد جاوا اسکریپت به شکل زیر خواهد بود.

<script language="javascript">
    $(function() {
        $("#ref").click(function() {
            animate(".demo", 'bounce');
            return false;
        });
    });
     
    function animate(element_ID, animation) {
        $(element_ID).addClass(animation);
        var wait = window.setTimeout( function(){
            $(element_ID).removeClass(animation)}, 1300
        );
    }
</script>

افکت‌های انیمیشنی قطعا بعنوان یکی از بهترین راه‌های جذاب‌تر کردن سایت محسوب می‌شوند. اما دقت کنید که بیش از حد از آن استفاده نکنید.