ساخت انیمیشن (Animation) به صورت وارد شدن عنصر از سمت بالا یا پایین یا راست یا چپ (انیمیشن Slide in)، با کلاس های w3-animate-top و w3-animate-bottom و w3-animate-left و w3-animate-right ، در W3.CSS

با استفاده از کلاس های w3-animate-top و w3-animate-bottom و w3-animate-left و w3-animate-right در چارچوب W3.CSS ، می توانیم یک انیمیشن (Animation) بر اساس حرکت عنصر بسازیم، به این صورت که عنصر از سمت بالا یا پایین یا راست یا چپ، وارد شود (انیمیشن Slide in) :

همانطور که مشاهده می کنید، نام تمامی این کلاس ها (Class) با عبارت -w3-animate شروع می‌شود و در انتهای آن ها، نام سمتی که از آن وارد می شود، نوشته شده است.

چگونگی ورود عنصر به صورت از 300- پیکسل (px) تا 0 می باشد.

کلاس های (Class) مورد نظر را باید به صورت زیر برای عنصر ذکر نماییم :

به مثال زیر توجه کنید :

مثال

بخش مهم کدها :

کد کامل صفحه HTML :

نتیجه :

این صفحه را دوباره اجرا کنید تا چگونگی نمایش انیمیشن (Animation) در ابتدای بارگذاری صفحه را مشاهده نمایید :

خطا - صفحه را دوباره بارگذاری کنید
مثال

بخش مهم کدها :

کد کامل صفحه HTML :

نتیجه :

این صفحه را دوباره اجرا کنید تا چگونگی نمایش انیمیشن (Animation) در ابتدای بارگذاری صفحه را مشاهده نمایید :

خطا - صفحه را دوباره بارگذاری کنید
مثال

بخش مهم کدها :

کد کامل صفحه HTML :

نتیجه :

این صفحه را دوباره اجرا کنید تا چگونگی نمایش انیمیشن (Animation) در ابتدای بارگذاری صفحه را مشاهده نمایید :

خطا - صفحه را دوباره بارگذاری کنید
مثال

بخش مهم کدها :

کد کامل صفحه HTML :

نتیجه :

این صفحه را دوباره اجرا کنید تا چگونگی نمایش انیمیشن (Animation) در ابتدای بارگذاری صفحه را مشاهده نمایید :

خطا - صفحه را دوباره بارگذاری کنید
منابع و لینک های مفید
نویسنده علیرضا گلمکانی
شماره کلید 26295
گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)