ایجاد انیمیشن های جی کوئری جذاب با روشی ساده

یکشنبه ۲۹ آذر ۱۳۹۴

ایجاد انیمیشن های جی کوئری جذاب با روشی سادهReviewed by جواد نبوی on Dec 20Rating: 4.5

انیمیشن جی کوئری

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

توجه: ما در این آموزش, یک پروژه جدید ایجاد می کنیم و قدم به قدم نحوه ایجاد انیمیشن در آن را برایتان توضیح می دهیم. اما شما باید در قالب (پوسته) خودتان یا هر جای دیگری که نیاز دارید از این روش استفاده کنید.

توجه: هر چند اسم این آموزش, ایجاد انیمیشن های جی کوئری است اما مهمترین زبان مورد استفاده در این روش, CSS میباشد و جی کوئری فقط در قسمت کوچکی از آن کاربرد دارد.

در زیر میتوانید آموزش ایجاد انیمیشن های جی کوئری و سی اس اس را مطالعه کنید.

قدم اول: دانلود فایل های مورد نیاز

برای شروع کار, شما نیاز دارید که دو فایل animate.min.css و wow.min.js را دانلود کنید. آنها را از لینک زیر دانلود کنید.

سپس فایل فشرده ای که دانلود کردید را اکسترکت کنید.

قدم دوم: فراخوانی فایل های animate.min.css و wow.min.js در سند HTML

توجه: ما برای اینکه به شما آموزش دهیم نیاز داریم که یک سند html جدید ایجاد کنیم و در آن کد نویسی کنیم. اما شما همین کارهایی که ما میکنیم را در پروژه خودتان(که می تواند یک قالب وردپرس یا یک صفحه استاتیک و …) باشد, پیاده کنید.

ابتدا فایل های animate.min.css و wow.min.js را در فولدری که سند html در آن وجود دارد قرار دهید.

افکت انیمیشنی با جی کوئری

سند html تان را با یک ویرایشگر باز کنید و کد زیر را در بالای تگ <head/> (بین دو تگ <head> و <head/>) قرار دهید.

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

ایجاد افکت انیمیشنی جی کوئری

افکت انیمیشنی با JQuery

البته اگر دارید روی قالب وردپرس اینکار را انجام میدهید کد زیر را در فایل header.php بالای تگ <head/> (بین دو تگ <head> و <head/>) قرار دهید.

HTML
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/animate.min.css" type="text/css">

سپس کد زیر را در انتهای سند html بالای تگ <body/> قرار دهید.

HTML
<script src="/wow.min.js"></script>

و برای وردپرس هم به جای کد بالا,کد زیر را به فایل footer.php اضافه کنید:

HTML
<script src="<?php bloginfo('template_directory'); ?>/wow.min.js"></script>

در نهایت کد زیر را بالای تگ <body/> زیر کد فراخوانی wow.min.js قرار دهید:

HTML
<script>
 new WOW().init();
 </script>

این هم عکس:

انیمیشن جی کوئری

قدم سوم: استفاده از انیمیشن ها در عناصر

شما میتوانید از این افکت های انیمیشنی در عناصر مختلفی مثل عکس ها, لینکها, متون, باکس ها و … استفاده کنید. نحوه ی استفاده هم به این صورت است که باید یک کلاس برای عنصر مورد نظر مشخص کنید و طبق فرمول animated effectname ویژگی آن کلاس را مشخص کنید. effectname نام افکت انیمیشنی مورد نظر شما است. لیست افکت ها را می توانید در این صفحه ببینید. برای روشن تر شدن موضوع به کد زیر توجه کنید:

HTML
<h1 class="animated flash">WEBTOASTER.IR</h1>

کد بالا متن WEBTOASTER.IR را با افکت flash نمایش میدهد. برای مشاهده پیش نمایش اینجا کلیک کنید.

انیمیشن جی کوئری

این هم یک نمونه دیگر که عکس را به صورت انیمیشنی در می آورد:

HTML
<img src="logo.jpg" class="animated flipInY"/>
 <h1 class="animated hinge">WEBTOASTER.IR</h1>

نتیجه را در این صفحه ببینید. عکس کدش هم این پایین است:

انیمیشن جی کوئری با روشی ساده

یک مشکل …

تا اینجا توانستیم انیمیشن ها را برای عناصر تعیین کنیم. اما مشکلی که وجود دارد این است که اگر صفحه طولانی تر باشد, و عنصری در انتهای صفحه دارای انیمیشن باشد, به سرعت بعد از لود شدن صفحه, آن انیمیشن اجرا می شود و بیننده نمیتواند آنرا ببیند. بنابراین در کلاس عنصر مورد نظرمان به جای عبارت animated, عبارت wow را قرار میدهیم تا هنگامی که کاربر صفحه را به سمت پایین اسکرول می کند انیمیشن ها به تدریج ایجاد شوند. به کد زیر توجه کنید:

HTML
<img src="logo.jpg" class="wow flipInY"/>

نتیجه را در این صفحه ببینید. کافیست صفحه را به سمت پایین اسکرول کنید تا اجرا شدن انیمیشن را ببینید.

این هم عکسش:

animation4

همچنین برای اینکه کاری کنید انیمیشن ها به صورت loop یا چرخشی تکرار شوند میتوانید کلاس infinite را به عنصر مورد نظر اضافه کنید. مثال:

HTML
<img src="logo.jpg" class="wow flipInY infinite"/>

نتیجه را در این صفحه ببینید.

تمام شد! شما به همین راحتی انیمیشن های جی کوئری جذاب خلق کردید. فایل پروژه ای که من ایجاد کردم را هم از زیر میتوانید دانلود کنید.

لينک دانلود:

تبلیغات

نویسنده (مدیر سایت)

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

9 دیدگاه برای “ایجاد انیمیشن های جی کوئری جذاب با روشی ساده”

  1. سلام گفت:

    سلام
    اگه آموزش هاتون را یاد بگیرم و به بقیه تدریس کنم اشکالی دارد؟

    ممنون.

    1. جواد نبوی گفت:

      سلام دوست من
      نه تدریس هیچ اشکالی نداره.
      تنها چیزی که مشکل داره کپی کردن مطلب ما بدون ذکر منبع هستش. همین.
      موفق باشید

  2. شاهو گفت:

    خیییلی جالب و عالی بود ممنون

  3. hatef گفت:

    با سلام
    خاستم سایت دیوار و ببینید در تب همه آگهی ها تمام دسته ها و زیر دسته ها تو در تو و کشویی باز میشن اینم جی کوئری ؟ اگه همینه میخام شما برام تو سایتم انجام بدین لطفا ج به ایمیلم بفرستید

    با سپاس

    1. جواد نبوی گفت:

      سلام
      بله از جی کوئری استفاده شده.
      در حال حاضر وقت کافی برای انجام پروژه نداریم
      موفق باشید

  4. Ali گفت:

    سلام خیلی خیلی ممنونم .
    آموزش کامل و بی عیب بود تشکر میکنم کامل این کار رو یاد گرفتم اینجا
    براتون آرزوی موفقیت دارم.

    1. جواد نبوی گفت:

      خواهش می کنم دوست من. شما هم موفق باشید

  5. baran گفت:

    سلام یه دنیا بابت آموزش خوبتون ممنون.موفق باشید

    1. جواد نبوی گفت:

      خواهش می کنم شما هم موفق باشید

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *