نگــاهــی متفـــاوت بــه طراحـــی
A Different View on design

Hypertemp.ir

آموزش و معرفی کتابخانه animate.css

پست شماره 114
17:7 , شنبه 22 فروردين 1394

آموزش و معرفی کتابخانه animate.css

با سلام خدمت کاربران و میهمانان عزیز هایپرتمپ

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

آموزش استفاده از کتابخانه animate.css

در ابتدا لازم است که کتابخانه آن را در head قالب خود قرار دهید یعنی بین دو تگ زیر

و کد فراخوانی کتابخانه که باید بین دو تگ بالا قرار بگیرد :

خوب حالا ما کتابخانه رو در قالب خودمون قرار دادیم و نوبت اینه که کلاس (مشخصه)  هارو به اجزای قالب خودمون اضافه کنیم :

خوب مشخصه animated الزامه اجرای انیمیشن و نحوه اجرای انیمیشن که ما از zoomIn استفاده کردیم . ما تمامی مشخصه های انیمیشن هارو در زیر قرار دادیم:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

یک مثال که ما در آن به یک دایو انیمیشن دادیم :

خوب تا اینجا ما موفق شدیم انیمیشن رو به جز دلخواهمون در کدنویسی بدیم ولی این انیمیشن ها همگی در ابتدا که لود شد اجرا میشن و اگه ما بخوایم این انیمیشن اجزا وقتی اجرا بشن که روشون اسکرول شد به مانند قالب هایپرتمپ نسخه 1.3 اجرا شوند باید کتابخانه زیر را علاوه بر کتابخانه بالا به head قالبمون اضافه کنیم :

و کلاس زیر رو به جزهای دلخواهمون در قالب نیز اضافه کنیم

یک مثال :

اگه سوالی در این مورد داشتین در نظرات با ما درمیان بگزارید.

 

با سلام خدمت کاربران و میهمانان عزیز هایپرتمپ

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

آموزش استفاده از کتابخانه animate.css

در ابتدا لازم است که کتابخانه آن را در head قالب خود قرار دهید یعنی بین دو تگ زیر

و کد فراخوانی کتابخانه که باید بین دو تگ بالا قرار بگیرد :

خوب حالا ما کتابخانه رو در قالب خودمون قرار دادیم و نوبت اینه که کلاس (مشخصه)  هارو به اجزای قالب خودمون اضافه کنیم :

خوب مشخصه animated الزامه اجرای انیمیشن و نحوه اجرای انیمیشن که ما از zoomIn استفاده کردیم . ما تمامی مشخصه های انیمیشن هارو در زیر قرار دادیم:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

یک مثال که ما در آن به یک دایو انیمیشن دادیم :

خوب تا اینجا ما موفق شدیم انیمیشن رو به جز دلخواهمون در کدنویسی بدیم ولی این انیمیشن ها همگی در ابتدا که لود شد اجرا میشن و اگه ما بخوایم این انیمیشن اجزا وقتی اجرا بشن که روشون اسکرول شد به مانند قالب هایپرتمپ نسخه 1.3 اجرا شوند باید کتابخانه زیر را علاوه بر کتابخانه بالا به head قالبمون اضافه کنیم :

و کلاس زیر رو به جزهای دلخواهمون در قالب نیز اضافه کنیم

یک مثال :

اگه سوالی در این مورد داشتین در نظرات با ما درمیان بگزارید.

 

توجه : تمام حقوق مطالب برای هایپرتمپ محفوظ می باشد.

نظرات ارسال شده

  • پیام 1395/2/21 , 12:57

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

    پاسخ : میشه ولی روی تگ خود تصویر نزارید توی مثلا پی بزارید

  • habib 1394/11/8 , 10:49

    سلام عرض شد
    من میخوام این انمیشن ها موقعی صفحه به کلاس مورد نظر اسکرول شد و رسید اجرا بشه ؟؟
    پیشفرضش این هست که انمیشن رو به کلاس میدیدم و موقع لود صفحه اجرا میشه وممکنه ما بخوایم این انمیشن در فوتر مثلا اجرا بشه و کاربر تا به فوتر میرسه
    انمیشن همون اول تموم شده لطفا بگید چه کدی باید بنویسیم وراه حل چیه
    ممنون میشم جواب بدید

    پاسخ : بیشتر در مورد افکت اسکرول بخونید اشتباه استفاده میکنید

  • SaEeD GH 1394/10/10 , 23:01

    بعد یه سوال دیگه میشه دو تایی استفاده کرد؟

    پاسخ : به هر تعداد که بخوای میشه استفاده کرد

  • SaEeD GH 1394/10/10 , 22:48

    آقا مرتضی برام یه سوال پیش اومده این ینی چی؟
    sidebar-back-ad zoomIn www
    توی قالب بود زوم رو می دونم www اما اونای دیگه ینی چی؟

    پاسخ : wow افکت هنگام اسکرول لد شست این کلاس
    sidebar-back این هم کلاس بک گراند بلوکو تعیین کرده

  • SaEeD GH 1394/9/22 , 23:30

    مرسی اقا مرتضی یاد گرفتنامو مدیونتم جبران می کنم ایشالله

    پاسخ : شما واسمون دعا کنید برامون کافیه عزیزم

  • سید مبین 1394/9/13 , 17:22

    داش مرتضی نوکرتم
    داشتم میگشتم توی مطالب
    این مطلب خیلی خیلی خیلی به دردم خورد

    پاسخ : عشقی سید

  • test 1394/4/15 , 21:06

    آقا دمت گرم این کتابخانه بی نظیره

    پاسخ : قربونت

  • habib 1394/4/12 , 20:27

    ممنون چیز خوبی بود
    سایت جای پیشرفت داره
    لطفا آموزش های html وcss بیشتری بگذارید
    ممون

    پاسخ : چشم

  • sss 1394/1/27 , 12:43

    خب یه سوال

    یه کد هست که وقتی اسکرول میاد پایین این انیمیشن اجرا می شه


    حالا سوال من اینه چه کدی بگذاریم که اسکرول از روش رد شد یا رفت بالا اونا هم با یه انیمیشن برن


    وقتی میای این ها با انیمیشن میان حالا می خواهم کدی که وقتی ازشون رد شدی اونا برن هم بدی

    پاسخ : ایده جالبی بود باید اسکریپتشو ببینم کسی ننوشته اگه ننوشته خودم بنویسم
    به زودی نتیجشو اعلام میکنم ممنون از نظرت

  • محمد حسین مرتضی پور 1394/1/24 , 16:53

    عالیه افرین

    پاسخ : خواهش میکنم عزیزم

  • نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتی