متحرک سازی با استفاده از css ترفندی ساده ولی بسیار کاربردی در جذب بازدیدکنندگان میباشد. همانطور که میدانید زیبایی وب سایت و در عین حال ساده بودن آن میتواند بسیار کاربر پسند باشد.

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

آمار نشان میدهد بیش از 80درصد از بازیدکنندگان به سایت هایی که طراحی زیبا و در عین حال ساده داشته باشند مجددا مراجعه و یا از آن خرید میکنند.

ما در این مقاله سعی کردیم متحرک سازی با استفاده از css را از صفر تا صد آموزش دهیم.

اولین سوالی که ما از خود میپرسیم این است که متحرک سازی در وبسایت ها چه صورت انجام میشود.متحرک سازی که ما بیشتر در سایت های مدرن امروزی میبینیم به شکلی است که اجزای سایت مانند متن ها و تصاویر با استفاده از css به حرکت درآمده اند و دارای شکل خاصی شده که تقریبا به آن انیمیشن هم میگویند. همانطورکه وقتی واردسایت آی وحید میشوید و صفحه را اسکرول می کنید تک تک اجزا به شکل خاصی حرکت میکنند و در جای خود قرار میگیرند.

استفاده از این تکنیک باعث میشود در عین سادگی جذابیت خاصی به سایت شما بدهد و نه تنها برای سایت شما ضرری ندارد برای کاربر هم جذاب بوده و این کار خود یک امتیاز خوب برای سایت شماست.

آموزش متحرک سازی با css و پلاگین  animate.css

بسیاری از وب مستران و کد نویس ها با کد های css آشنایی کامل دارند اما به دلیل زمان بر بودن پیاده سازی این کد ها برای متحرک سازی اجزای سایت از پلاگین استفاده می کنند.

animate.css یک پلاگین رایگان با حجم سبک (100k) است که به راحتی میتوانید از گیت هاب آن را دانلود کنید. در ادامه اضافه کردن و استفاده از پلاگین animate.css را آموزش می دهیم.

دانلود پلاگین:

برای درست کار کردن پلاگین ها همیشه سعی کنید آخرین نسخه پلاگین ها را نصب کنید.

برای نصب آخرین نسخه پلاگین animate.css بر روی دکمه زیر کلیک کنید.

https://daneden.github.io/animate.css/

اضافه کردن پلاگین animate.css به سایت

پس از دانلود فایل CSS آنرا در کنار دیگر فایل های وبسایتتان در یک مسیر مشخص قرار دهید.

هنگامی که فایل CSS را در هاست خود در کنار فایل های پوسته قرار میدهید باید کد زیر را در قسمت HEAD کد های قالب ساییتان اضافه کنید. مطمئن شوید که حتما فایل را در یک مسیر با آدرس مشخص قرار دهید.

<head>
 <link rel="stylesheet" href="animate.min.css">
</head>

در قطعه کد بالا بعد از href مسیر فایل  animate.css را که دانلود کرده بودید قرار دهید

چنانچه آدرس شما اشتباه باشد فایل اجرا نمیشود و پلاگین کار نمی کند.

البته راه های دیگری هم هست که این پلاگین را نخواهید دانلود کنید آن هم اسفاده از CDN می باشد.

برای اینکار شما دیگر نیازی به دانلود ندارید فقط باید همانند بالا کد زیر را در قسمت head  کد های خود قرار دهید.

<head>
<link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css">  
<!-- یا --> 
<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

پیشنهاد ما استفاده از CDN میباشد چراکه با دانلود پلاگین  با هر دفعه به روزرسانی پلاگین شما هم باید آنرا دانلود کرده  و در فایل های سایت خود بارگذاری کنید در صورتی که استفاده از CDN دیگر نیازی به دانلود ندارید فقط با یک بار اضافه کردن کد به قالبتان به صورت خودکار به روز رسانی می شود.

استفاده از پلاگین animate.css

پس از اجرای پلاگین animate.css به یکی از دو روش بالا حال نوبت آن رسیده تا اجزای وب سایتتان را متحرک سازی کنید. به همین منظور بر روی دکمه زیر کلیک کرده و پس از باز شدن صفحه نام کلاسی که آن را می پسندید انتخاب و پیش نمایش آنرا مشاهده کنید.

https://daneden.github.io/animate.css/

در ادامه اگر از انیمیشن انتخاب شده  خوشتان آمد نام کلاس آن را انتخاب و بر روی کد های قالب خود قرار خواهیم داد. مثلا کلاس bounceInRight  را ما انتخاب واز سمت راست متحرک سازی کردیه ایم.

یادآروی میکنیم که باید ابتدا کلاس animated  را وارد و سپس با یک فاصله نام کلاس انتخاب شده را وارد کنید.

<img src="Untitled.png" class="animated bounceInRight">

ویژگی هایی که میتوان برای این کلاس ها مهم قائل شد این است که به کوچک یا بزرگ بودن حروف حساس نیستند ولی توجه داشته باشید که اگر نام کلاس را وارد کردید در ابتدا باید کلاس animated را برای همه ی محتوایی که قرار است به آن ها انمیشن بدهید استفاده کنید چرا که اگر مراحل را به درستی انجام ندهید کلاسی که شما انتخاب کردید اجرا نخواهد شد.

جمع بندی:

ما در این مقاله سعی کردیم به شما یاد بدهیم چگونه بدون دانش برنامه نویسی محتوای سایتمان را دارای انمیشن کنیم. بسیاری از مدیران سایت کد نویسی را بهتر میدانند، ما هم به نظر آنها احترام میگذاریم ولی مطمئناً با استفاده از css میتوانیم در هزینه و وقت خود صرفه جویی کنیم.