آموزش متحرک سازی با استفاده از CSS
آموزش متحرک سازی با استفاده از CSS
چیزی که امروزه در جذب مشتری و کاربر برای وبسایت بین وبمستر‌ها رایج است بدون شک زیبایی وبسایت است. همینطور که می‌دانید وبسایت و یا فروشگاه اینترنتی همانند یک مغازه می‌باشد. فکر می‌کنید اگر این مغازه با یک دکوراسیون عالی و چیدمان زیبا راه اندازی شده باشد بهتر مشتری را جذب می‌کند و یا اینکه زیبایی مناسبی نداشته باشد؟
جواب این سوال بسیار ساده است، مسلماً اگر یک فروشگاه با زیبایی و دکوراسیون مناسب داشته باشیم مشتریان بیشتری را می‌توان جذب کرد. این مورد برای وبسایت و یا فروشگاه اینترنتی هم صدق می‌کند. در نتیجه اگر ما وبسایت خود را به گونه‌ای جذاب و زیبا طراحی کنیم صد در صد کاربران و مخاطبین بیشتری را می‌توانیم به سمت وبسایت خود هدایت کنیم و آنها را به مشتریان وفاداری تبدیل کنیم.
حال قصد داریم در رابطه با آموزش متحرک سازی با استفاده از CSS این مطلب را به پایان برسانیم شاید بدانید منظور از متحرک سازی چیست، اما لازم است توضیحی را به شما عزیزان ارائه دهیم. متحرک سازی در وبسایت که الان در بیشتر سایت‌ها با طراحی مدرن مشاهده می‌کنید استفاده شده است و به گونه‌ای که المان‌های وبسایت شما مثل تصاویر و متن‌ها با استفاده از CSS دارای انیمیشن خاصی می‌شوند.
اگر سری به این وب‌سایت‌ها همانند وبسایت خود ما یعنی الماس وب بزنید در مرحله اول زمانی که اسکرول می‌کنید به سمت پایین، چیدمان سایت با انیمیشن ظاهر می‌شوند و تک به تک المان‌ها و اجزاء از یک سمتی وارد دید کاربر می‌شوند. این عمل در بسیاری از موارد زیبایی خاصی را به وبسایت شما می‌دهد و تجربه نشان داده تا متحرک سازی المان‌های وبسایت برای کاربر جذاب بوده است.
آموزش متحرک سازی با استفاده از CSS و animate.css
اگر شما با کدهای CSS آشنایی کامل داشته باشید این کار مطمئنا برای شما بسیار ساده است. اما به هر حال با اینکه تسلط کامل دارید زمان زیادی نیاز هست تا شما بتوانید کدهای CSS برای متحرک سازی محتوای سایت را بنویسید. به همین دلیل قصد داریم تا ما شما را با پلاگین animate.css آشنا کنیم.
پلاگین animate.css توسط Daniel Eden نوشته شده و به صورت رایگان در گیت هاب (Github) آن را قرار داده‌اند. این پلاگین تنها یک فایل CSS است و بسیار سبک یعنی حجم آن به ۱۰۰KB هم نمی‌رسد. پس نگران اینکه حجم صفحات سایت شما را افزایش دهد نباشید. برای آموزش اضافه کردن و استفاده از پلاگین animate.css همراه ما باشید.
مرحله اول : دانلود پلاگین
آموزش استفاده از پلاگین animate.css بسیار ساده است و برای استفاده از این پلاگین نیاز هست تا آن را دانلود کنیم. سپس به فایل‌های وبسایت خود اضافه کنیم. شما می‌توانید هم اکنون جدیدترین نسخه این پلاگین را با کلیک بر روی دکمه زیر دانلود کنید.
دانلود پلاگین
مرحله دوم : اضافه کردن پلاگین animate.css به سایت
در این مرحله اگر با موفقیت فایل CSS را دانلود کرده‌اید، به فایل‌های وبسایت خود مراجعه کنید و سپس فایلی که هم اکنون دانلود کرده‌اید را در کنار دیگر فایل‌های CSS در یک مسیر مشخص قرار دهید. نام آن را می‌توانید تغییر دهید اما نیازی به این کار نیست.
زمانی که فایل خود را در میزبان (هاست) خود در کنار فایل‌های پوسته سایت خود قرار داده‌اید نیاز هست تا کد زیر را در قسمت head کدهای قالب خود اضافه کنید. دقت کنید حتما فایل را در یک مسیر و آدرس مشخص بارگذاری کنید.
<head> <link rel="stylesheet" href="animate.min.css"> </head>
در خط کد بالا شما در قسمت href دقیقا باید مسیر فایل animate.css را که دانلود کرده‌اید را قرار دهید در غیر این صورت فایل شما فراخوانی نمی‌شود و عملا استفاده از این پلاگین ممکن نیست.
برای اضافه کردن این پلاگین به وبسایت خود به جزء دانلود فایل animate.css می‌توان به استفاده از CDN اشاره کرد. به همین منظور شما می‌توانید بدون نیاز به دانلود، کد زیر را همانند آموزش بالا در head کدهای قالب خود قرار دهید.
<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/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
پس از اینکه ما پلاگین را به یکی از دو روش‌های گفته شده در بالا به وبسایت خود اضافه کردیم وقت آن رسیده تا محتوای پوسته وبسایت خود متحرک سازی و یا به آنها انیمیشن بدهیم. برای این کار تنها نیاز است بر روی دکمه زیر کلیک کرده و در صفحه باز شده نام کلاس خود را انتخاب کنید سپس پیشنمایش آن را مشاهده کنید.
پیشنمایش پلاگین
چنانچه پیشنمایش انیمیشن مورد پسند بود نام کلاس انتخاب شده را بر روی تگ کدهای خود در قالب وبسایت اضافه خواهیم کرد. همانند خط کد زیر که ما به یک تصویر کلاس bounceInRight را وارد کردیم و آن را از سمت راست به داخل متحرک سازی کرده‌ایم. لازم به ذکر است شما باید ابتدا کلاس animated را وارد کنید و سپس با یک فاصله نام کلاس انتخاب شده را وارد کنید.
<img src="Untitled.png" class="animated bounceInRight">
نکته : حروف نام کلاس‌ها به کوچک و یا بزرگ بودن حساس نیستند ضمن اینکه اگر شما نام کلاس را وارد کردید در ابتدا باید کلاس animated را برای تمامی المان‌های که قصد متحرک کردن آن را دارید استفاده کنید در غیر این صورت کلاس انتخاب شما اجراء نخواهد شد.
در این قسمت مشاهده می‌کنید که المان انتخاب شده در وبسایت که قصد داشتیم به آن انیمیشن بدهیم زمانی که صفحه را مجدد بارگذاری (Reload) می‌کنیم آن المان دارای انیمیشن شده است و یا به زبان دیگری متحرک سازی شده است.
همچنین شما می‌توانید مستندات بیشتری را در رابطه با آموزش متحرک سازی با استفاده از CSS را در این صفحه مطالعه کنید. اینکه چگونه می‌توانیم سرعت انیمیشن‌ها را کم و یا زیاد کنیم با استفاده از jQuery و یا آنها را فعال و غیر فعال کنیم.
نتیجه گیری
در این مطلب به خوبی فرا گرفتیم تا چگونه با استفاده از CSS المان‌ها و اجزای صفحات وبسایت خود را متحرک سازی کنیم. شاید فکر کنیم اگر ما خودمان کدها رو بنویسیم بهتر است اما چرا چرخ را دوباره اختراع کنیم و چرا نباید در زمان خود صرفه جویی کنیم؟
سخن پایانی ما با شما کاربر عزیز
چنانچه شما در هر یک از مراحل آموزش انیمیشن و متحرک سازی اجزاء با CSS مشکلی داشتید می‌توانید آن را در پایین همین مطلب قسمت دیدگاه‌ها از ما بپرسید خوشحال خواهیم شد تا بتوانیم به شما کمک کنیم و مشکلات شما را برطرف کنیم.
دیدگاهتان را بنویسید