سلام و درود خدمت همه خوانندگان این مقاله و دوستان عزیز
امیدوارم حال دلتون خوش و همچنین خودتون و عزیزان تون سالم و سلامت باشید.
در ابتدا می خوام از عزیزانی که تا به اینجا مقالات و مطالب من رو پیگری و دنبال کردند تشکر و قدردانی کنم و همینطور دوستانی که اولین مقاله ای که از من شروع به خوندنش کردن، این مقاله هست, رو دعوت کنم که بعد از پایان مطالعه شون به سایر مقالات من هم سری بزنند و اون ها رو هم بررسی کنن و نظرات و انتقادات و تجارب خودشون رو به اشتراک و همینطور سوالات و مشکلاتی که دارن رو بیان کنن.
این سری با یکی دیگه از مقالات حوزه برنامه نویسی در خدمت شما هستم و در این مقاله قصد دارم که تعدادی کتابخانه مفید برای اضافه کردن انیمیشن و جلوه های بصری و پویا نمایی بیشتر به سایت و صفحه وب و المان های داخل اون رو به شما معرفی کنم. این کتابخانه ها به شما کمک می کند تا ظاهر و استایل سایت و وب پیج خودتون رو راحت تر و سریع تر دگرگون و شخصی سازی کنید و ایده های خاص و متفاوت و خلاقانه تری رو در اون اجرا و پیاده سازی و جلوه های بصری و انیمیشن های جذابی رو به کارتون اضافه، المان های مد نظرتون رو متحرک و صفحه وب خودتون رو پویا و کاربر پسند تر کنید. برای استفاده از کتابخانه های که در ادامه خدمت تون معرفی میکنم باید آن ها را داخل فایل صفحه اصلی سایت یا هر بخشی که قصد استفاده از این افکت ها را دارید اضافه و فراخوانی کنید. در نتیجه برای استفاده از آن ها باید آشنایی اولیه و مقدماتی با HTML و CSS و مفاهیم پایه طراحی وب و فرانت اند را داشته باشید.
دنیای وب در حال حاضر پر است از افکت ها و متحرک سازی های جذاب و گیرا و امروزه طراحان از روش ها و راهکار های مختلفی برای سرگرم کردن و جذب مخاطبان و همچنین بهبود تجربه کاری و مسیر یابی و هدایت کاربران در صفحات سایت و حین انتخاب گزینه ها و مرور سایت استفاده می کنند و بهره بردن از انیمیشن ها قطعا یکی از تاثیر گذار و مفید ترین و در عین حال سرگرم کننده ترین راه ها است.
اگر به سایت های مطرح و پر مخاطب و مدرن سری بزنید قطعا در گوشه کنار و بخش های مختلف آن ها انیمیشن ها و افکت هایی را می بینید که بعضا به صورت تعاملی و اینتر اکتیو نیز طراحی و به کار برده شده اند. چنین راهکار هایی قطعا در بازده و بازدید سایت و وفادار سازی و رضایت مخاطب و مشتری تاثیر بسزایی دارد.
پیش از شروع توضیحی که لازم میدانم در اینجا ذکر کنم این هست که تعدادی از این کتابخانه ها صرفا از کد هایHTML و CSS خالص و تعدادی از آن ها از جاوا اسکریپت و جی کوئری و LESSو SASS یا موارد دیگر استفاده می کنند. در نتیجه و برای اطمینان از کارکرد صحیح آنها و به مشکل نخوردن بهتر است که به مستندات و راهنمای شروع به کار هر کتابخانه مراجعه و نسبت به اضافه کردن و فراخوانی موارد اضافه تر برای اجرای صحیح کد ها و دستورات اقدام کنید و نکته ذکر شده را فراموش نکنید.
همچنین کتابخانه های معرفی شده اغلب به صورت رایگان هستند (برای استفاده های تجاری, بازرگانی و گسترده ممکن است نیاز به تهیه لایسنس باشد که البته در داخل کشور و بدلیل رعایت نشدن قوانین کپی رایت استفاده از آنها احتمال مشکل زا نخواهد بود) و می توانید آنها را به راحتی دانلود و استفاده کنید و حتی کتابخانه هایی که اوپن سورس یا متن باز هستند را در صورت نیاز مطابق با میل خود تغییر دهید و ویرایش کنید!
از آنجایی که قرار است تعدادی کتابخانه مختلف برای انیمیشن و متحرک سازی نام برده و همراه توضیح مختصری هر کدام را معرفی کنم، این مقاله بیشتر به صورت معرفی تیتر وار و خلاصه خواهد بود و برای اینکه بیش از حد طولانی و خسته و گیج کننده نشود، به بیان توضیحات و بررسی ها مختصر در هر مورد بسنده و از زیاده گویی پرهیز میکنم و با توجه به موضوع صحبت و نوع کتابخانه ها و بصری و دیداری بودن کاربرد آن ها شدیدا توصیه میکنم که هر کدام از موارد را خودتان تست و آزمایش کنید. همچنین مستندات و توضیحات مفصل و جامع تر هر کدام از کتابخانه را در داخل سایت رسمی و مرجع خودشان مطالعه کنید و در آنجا با امتحان کردن هر کدام از ویژگی ها و امکانات منحصر به فردی که دارند بهترین و مناسب کتابخانه ای که مطابق با نیاز و پروژه تان است را انتخاب و از آن استفاده کنید.
در آخر این نکته را هم اضافه کنم که برای استفاده از هر کدام از این کتابخانه ها باید کلاس های تعریف شده و مخصوص هر کتابخانه را، برای المانی که می خواهید به آن انیمیشن یا افکت مورد نظر اضافه شود, اعمال کنید. لیست این کلاس ها و اسامی و جزییات بیشتر را می توانید در وبگاه رسمی هر کدام از کتابخانه ها مشاهده کنید, البته در هر مورد سعی میکنم توضیح مختصری را برای راحتی بیشتر شما بدهم اما با توجه به این که ممکن است در نسخه ها و آپدیت های بعدی هر کدام از این کتابخانه ها تعدادی از اسامی کلاس ها یا سایر موارد به صورت جزیی یا کلی تغییر کنند, برای بار چندم توصیه میکنم که حتما به سایت های رسمی خود این کتابخانه ها مراجعه و از دستور العمل ها و مستندات ارائه شده توسط خود توسعه دهندگان کتابخانه پیروی کنید.
در ادامه و بدون فوت وقت به معرفی هر کدام از کتابخانه ها می پردازم و صرفا این مورد را اضافه کنیم که ترتیب معرفی هر کدام از این کتابخانه ها الزاما به معنای برتری و ارجحیت یا کامل تر بودن کتابخانه ای بر دیگری نیست و بعضا موارد استفاده و کاربرد تعدادی از آن ها با بقیه نیز ممکن است متفاوت باشد.
این را نیز در نظر داشته باشید که به دلیل اینکه در حال حاضر تعداد نسبتا زیادی کتابخانه های ساخت انیمیشن و متحرک سازی توسعه پیدا کردند، معرفی و بررسی همه آن ها امکان پذیر نیست قطعا مواردی از قلم می افتند. در نتیجه اگر کتابخانه مورد علاقه شما در این لیست حضور ندارد لطفا آن را در بخش نظرات ذکر و با من و سایر مخاطبین و خوانندگان به اشتراک بزارید و معرفی کنید.
این کتابخانه تقریبا دارای 77 انیمیشن است و از محبوب ترین و ساده ترین کتابخانه های انیمیشن سازی است که چند سال پیش معرفی شده و همچنان هم مورد توجه است. برای استفاده از آن بعد از فراخوانی و اضافه کردن فایل آن به پروژه خود, کافی است که کلاس و نام انیمیشن مورد نظر را به تگی که قصد متحرک سازی آن را دارید اضافه کنید!
آقای Daniel Eden که توسعه دهنده این کتابخانه است این پروژه را در سال 2013 به عنوان یک راه ساده و آسان برای افزون انیمیشن های سفارشی به صفحات وب ایجاد و در طول چندین سال گذشته و با کمک افراد دیگر آن را به یک کتابخانه قدرتمند و کاربردی برای استفاده در پروژه های مختلف تبدیل کرد.
نحوه استفاده :
برای فراخوانی و اضافه کردن آن به پروژه خود می توانید از طریق پکیج منیجر های npm و yarn استفاده کنید یا لینک CDN آن را در Head سایت خود اضافه کنید یا به صورت محلی آن را آدرس دهی کنید.
همچنین برای مشاهده لیست انیمیشن ها و اسامی و پیش نمایش آن ها می توانید به سایت مرجع این کتابخانه مراجعه کنید.
کتابخانه HOWER.CSS در واقع برای متحرک سازی دکمه های موجود در صفحات توسعه پیدا کرده (با توجه به اسم HOVER و پیش نمایش موجود در سایت می توان تصور کرد که تمرکز آن روی حالتی است که نشانگر موس رو المان مد نظر می رود) و می تواند به خوبی با پروژه های مختلف سازگار شود و تقریبا دارای تمام انیمیشمن های مورد نیاز برای متحرک سازی و تعامل با یک عنصر است و می توانید برای مشاهده لیست انیمیشن ها که در چندین دسته هم وجود دارند به سایت مرجع آن مراجعه کنید.
البته طبق توضیحاتی که در سایت این کتابخانه آمده ظاهرا برای استفاده از آن به صورت تجاری نیاز به خرید لایسنس است که متاسفانه با توجه به عدم رعایت قانون کپی رایت و وضع ارز در کشور کمتر کسی به این مورد توجه و به صورت قانونی از آن استفاده خواهد کرد. همچنین با SASS و LESS نیز سازگار می باشد.
نحوه استفاده:
مانند کتابخانه قبلی می تواند HOVER.CSS را به صورت فایل دانلود یا آن را از طریق پکیج منیجر هایی که پشتیبانی می کند نصب کنید.
سپس برای اعمال آن روی هر المانی که می خواهید کلاس افکت مورد نظر را به آن المان اضافه کنید. (لیست کلاس ها و اسامی شان را می توانید داخل خود فایل کتابخانه مشاهده و بررسی کنید.)
کتابخانه ای جاوا اسکریپتی است و همانطور که از نامش پیداست برای ایجاد افکت ها و انیمیشن هایی از نوع Bounce داخل صفحات توسعه پیدا کرده. با وجود حجم کمی که دارد شامل افکت ها و انیمیشن های زیادی است که می توانید خیلی از آن ها را حتی برای لودینگ صفحات و به صورت لوپ نیز استفاده کنید. و محبوبیت آن در گیت هاب بیش از 6000 ستاره است.
نحوه استفاده:
از آن جایی که نحوه استفاده از این کتابخانه ها بعد از دانلود فایلشان، استفاده از CDN یا نصب آنها از طریق پکیج منیجر عملا یکسان هست و تفاوت ها در اسامی کلاس ها و موارد جزیی است از عنوان کردن این قسمت برای کتابخانه های بعدی عبور میکنم و صرفا به معرفی خود کتابخانه ها می پردازم تا مقاله پیش رو کوتاه تر شده و از اضافه گویی و خسته شدن خوانندگان عزیز جلوگیری شود.
صرفا این نکته را بار دیگر تاکید میکنم که برای استفاده از بعضی از این کتابخانه ها بدلیل اینکه ممکن است در توسعه آن ها از جاوا اسکریپت و جی کوئری و موارد دیگری استفاده شده باشد شاید نیاز به افزودن و فراخونی فایل های دیگری نیز برای شروع به کار داشته باشند و از آنجا که ممکن است این موضوع در نسخه های مختلف و بعدی دستخوش تغییر شود و سعی بنده این است که تا جای ممکن مطالبی را برای شما عزیزان فراهم کنم که در شرایط مختلف قابل استفاده و کاربردی بوده و محدود به زمان و مکان خاصی نباشد, از بیان این جزییات در حال حاضر پرهیز می کنم و برای اطمینان بیشتر از این موارد شامل را به وب سایت های مرجع هر کدام از این کتابخانه ها رجوع میدهم. علاوه بر این موارد, برای اینکه بتوانید یک برنامه نویس حرفه ای و همیشه در حال پیشرفت و یادگیری باشید باید روحیه پیگیری و دنبال کردن مطالب و خصوصا مطالعه مستندات فریمورک ها, کتابخانه ها یا ابزار های دیگری که از آن ها در کار خود استفاده می کنید را در خود پرورش داده و تقویت کنید.
کتابخانه ای انیمیشنی است که از آن می توان برای ساخت افکت های پارالاکس هم استفاده کرد! این کتابخانه به نسب کمتر شناخته شده و به همین علت نیز از محبوبیت کمتری برخوردار است و تعداد کمی ستاره در گیت هاب دارد ولی از قابلیت های خوب آن می توان به حالت چرخش عناصر به هنگام scrolling اشاره کرد.
نحوه استفاده:
لطفا توضیحات ارائه شده برای دو کتابخانه ی اول را مطالعه کنید.
این کتابخانه شباهت زیادی به animate.css دارد با این تفاوت که تعدادی انیمیشن های یکتا و منحصر به فرد خود را دارد و از آن مهم تر حجم فایل آن از animate.css کمتر است و این خود یک مزیت با ارزش به حساب می آید و به همین دلیل توانسته که توجه طراحان و برنامه نویسان را به خود جلب کند و در گیت هاب به بیش از 6500 ستاره دست پیدا کند. به کمک جی کوئری نیز می توانید از آن استفاده کنید و همچنین دموی تمامی انیمیشن ها نیز در سایت موجود است.
نحوه استفاده:
لطفا توضیحات ارائه شده برای دو کتابخانه ی اول را مطالعه کنید.
کتابخانه ای برای متحرک سازی است که برای لرزاندن عناصر و ایجاد حالت شیک و ویبره توسعه پیدا کرده. این کتابخانه دارای کلاس های متعددی است که هر کدام حالت های مختلف افکت لرزیدن را ایجاد می کنند. در این کتابخانه از کی فریم ها و ترنسفورم برای ایجاد انیمیشن ها و متحرک سازی ها استفاده می شود. اگر از این کتابخانه برای المان ها و در جای درستی استفاده کنید می توانید تجربه کاربری و تعاملی بهتری را برای مخاطبان خود ایجاد کنید.
نحوه استفاده:
لطفا توضیحات ارائه شده برای دو کتابخانه ی اول را مطالعه کنید.
در واقع Animista محیطی است که طراحان و برنامه نویسان در آن می توانند مجموعه ای از انیمیشن های پیش ساخته را ویرایش و اجرا و پیش نمایش آن را مشاهده کنند و در صورت مورد تایید بودن کد آن را کپی و در پروژه هایشان استفاده کنند.
این جاوا اسکریپت انیمیشن جنریتور از آنجا که به آسانی امکان ویرایش و اعمال تغییرات گوناگون, فراوان و جزئی و مشاهده آنی نتایج را در اختیار طراحان می گذارد ابزاری مناسب, کاربردی و
با ارزش محسوب می شود.
نحوه استفاده:
می توانید وارد سایت رسمی animista شده و افکت و انیمیشن مورد نظر را انتخاب و سپس تغییرات دلخواه را روی آن اعمال و در آخر روی دکمه generate code بزنید و از کد انیمیشن مورد نظر داخل سایت و پروژه خود استفاده کنید.
همچنین می توانید انیمیشن های مورد علاقه خود را ذخیره کنید تا در دفعات بعدی راحت تر و سریع تر به آن ها دسترسی داشته باشد.
این کتابخانه کمی با سایر کتابخانه های معرفی شده متفاوت است و فرق می کند.
همانطور که احتمالا از اسمش حدس زدید مخصوص اعمال انیمیشن به favicon سایت است! با استفاده از این کتابخانه و خلاقیت خود می توانید کارهای جالب و جذابی را انجام دهید و پروژه خود را متفاوت تر و خاص تر کنید و این کتابخانه نیز در جای خود می تواند مفید باشد و به کارتان بیاید.
نحوه استفاده:
داخل سایت مرجع مثال ها و نمونه های متنوعی به همراه کد وجود دارد که می توانید از آن ها استفاده و آن را به پروژه خود اضافه کنید. همچنین یک فایل دمو برای تست و بررسی نیز وجود دارد که از آن نیز می توانید استفاده کنید.
در این مقاله سعی کردم به طور مختصر نگاهی به تعدادی از کتابخانه های ساخت انیمیشن CSS بیاندازم و بخشی از آنها را به شما معرفی کنم و همچنین توضیح کوتاهی درباره هر کدام بدهم.
امیدوارم از این مقاله و مطالب آن لذت برده باشید و برایتان کاربردی بوده باشد. همچنین اگر به مطالب و مقالات برنامه نویسی و توسعه و طراحی وب علاقمند هستید، می توانید مقاله قبلی ام با عنوان " بوت استرپ چیست و چه کاربردی دارد؟ " را نیز مطالعه کنید و نظرات و سوالات خود را درباره آن بیان کنید.
اگر این مقاله را دوست داشتید و برایتان مفید بوده لطفا آن را با دوستان و همکارانتان نیز به اشتراک بزارید و همچنین فراموش نکنید که نظرات, انتقادات و پیشنهادات و همینطور سوالات خود را در پایین همین مقاله اعلام کنید.
روز و روزگار تون خوش و بی غم
مراقب خودتون و عزیزان تون باشید
pooyast – نوشته شده در تابستان 1399
