×
۴۹,۰۰۰ تومان تا ۱۵۰ هزار تومان تخفیف

آموزش ساخت انیمیشن در CSS

آموزش ساخت انیمیشن در CSS

تعداد دانشجو
۶۹ نفر
مدت زمان
۴ ساعت و ۳۲ دقیقه
هزینه عادی آموزش
۴۹,۰۰۰ تومان
در طرح تخفیف
تا ۱۵۰ هزار تومان تخفیف (کسب اطلاعات بیشتر +)
محتوای این آموزش
تضمین کیفیت
۱ بازخورد (مشاهده نظرات)
آموزش ساخت انیمیشن در CSS

مبحث انیمیشن (Animation) در CSS به سرعت به یکی از ابزارهای ضروری برای طراحی وب تبدیل شده است چرا که به شکل شگفت‌آوری باعث ایجاد یک ارتباط روانی جذاب بین مخاطب و وب‌سایت می‌شود و بدین صورت از عوامل ارتقای سطح UI یا همان رابط کاربری به حساب می‌آید. از آنجا که بهبود رابط کاربری از اهداف انکارناپذیر هر طراح وب به شمار می‌آید، پس بدون شک تسلط بر مبحث Animation در CSS در این روزها بیش از پیش لازم و ضروری است. در این فرادرس با فرض آشنایی مقدماتی دانشجو با مفاهیم CSS و HTML سعی شده است تا تمامی مفاهیم مرتبط با این موضوع از قبیل: ترنزیشن‌ها (Transition) و ترنسفورم‌ها (TranceForm) در محیط دو‌بعدی، سه‌بعدی، Animationها و Keyframeها بیان شود تا بدین شکل دانشجو با اصول کار آشنا شده و دست او برای خلق هر آنچه که در ذهن دارد باز شود.

آموزش ساخت انیمیشن در CSS

مدت زمان
۴ ساعت و ۳۲ دقیقه
هزینه عادی آموزش
۴۹,۰۰۰ تومان
در طرح تخفیف
تا ۱۵۰ هزار تومان تخفیف

(کسب اطلاعات بیشتر +)
محتوای این آموزش
۱ بازخورد (مشاهده نظرات)
مدرس
یوسف دشتبان حسن آبادی

مدرس حوزه Front-End

ایشان علاقه‌مند به مباحث طراحی انیمیشن، ویرایش و تدوین فیلم و عکس و مباحث مرتبط با حوزه‌های کاربردی برنامه‌هایی همچون: Adobe Premiere Pro, Adobe Illustrator, Adobe Photoshop, Adobe After Effects و زبان نشانه‌گذاری CSS هستند.

چکیده آموزش


توضیحات تکمیلی

مبحث انیمیشن (Animation) در CSS به سرعت به یکی از ابزارهای ضروری برای طراحی وب تبدیل شده است چرا که به شکل شگفت‌آوری باعث ایجاد یک ارتباط روانی جذاب بین مخاطب و وب‌سایت می‌شود و بدین صورت از عوامل ارتقای سطح UI یا همان رابط کاربری به حساب می‌آید. از آنجا که بهبود رابط کاربری از اهداف انکارناپذیر هر طراح وب به شمار می‌آید، پس بدون شک تسلط بر مبحث Animation در CSS در این روزها بیش از پیش لازم و ضروری است. در این فرادرس با فرض آشنایی مقدماتی دانشجو با مفاهیم CSS و HTML سعی شده است تا تمامی مفاهیم مرتبط با این موضوع از قبیل: ترنزیشن‌ها (Transition) و ترنسفورم‌ها (TranceForm) در محیط دو‌بعدی، سه‌بعدی، Animationها و Keyframeها بیان شود تا بدین شکل دانشجو با اصول کار آشنا شده و دست او برای خلق هر آنچه که در ذهن دارد باز شود.

البته که در این مسیر صرفا به بیان تئوری مفاهیم بسنده نشده و در بین آموزش و همچنین به صورت جداگانه و ویژه، مفاهیم، مثال‌ها و پروژه‌های بسیار زیاد و کاربردی، خلاقانه و زیبا به جهت تثبیت مفاهیم و شکل‌گیری الگوی کار برای دانشجو در نظر گرفته شده است. به این صورت بعد از پایان این فرادرس، دانشجو به طور عملی بیش از ۳۵ پروژه و نمونه عملی را ساخته و بدین شکل قادر است تا ضمن درک کردن هر Web Animation توانایی ساخت نمونه‌های دلخواه خود را نیز داشته باشد.

فهرست سرفصل‌ها و مباحث مطرح شده در این دوره آموزشی، در ادامه آمده اند:
  • درس یکم: مقدمه
  • درس دوم: مبانی Transition‌ها
    • Transition
    • آپشن‌های مختلف Transition
    • راه‌های مختلف تعریف ویژگی‌های Transition
    • Propertyهای ترنزیشن‌‌پذیر
  • درس سوم: Transform‌های دوبعدی
    • Transformهای دو‌بعدی
    • تابع Translate
    • تابع Scale
    • تابع Rotate
    • تابع Skew
    • Transform Origin
  • درس چهارم: Transform‌های سه‌بعدی
    • کار با تابع Translate در محیط سه‌بعدی
    • کار با تابع Rotate در محیط سه‌بعدی
  • درس پنجم: پروژه‌‌های ساخت افکت Hover برای Button - بخش یکم
    • پروژه Background ساده
    • پروژه Swipe Effect - نمونه یکم
    • پروژه Iris Effect
    • پروژه Bold Effect
    • پروژه Swipe Effect - نمونه دوم
    • پروژه تغییر Background - نمونه یکم
    • پروژه تغییر Background - نمونه دوم
    • پروژه تغییر Background - نمونه سوم
  • درس ششم: پروژه‌‌های ساخت افکت Hover برای Button - بخش دوم
    • پروژه ساخت Hover Effect برای آیتم‌های Menu - نمونه یکم
    • پروژه تغییر Background - نمونه چهارم
    • پروژه Orange Effect
    • پروژه تغییر Background - نمونه پنجم
    • پروژه ساخت Hover Effect برای آیتم‌های Menu - نمونه دوم
    • پروژه ساخت Hover Effect برای آیتم‌های Menu - نمونه سوم
  • درس هفتم: پروژه‌‌های ساخت افکت Hover برای Image و Text
    • پروژه Fade In Effect
    • پروژه Swipe Effect - نمونه سوم
    • پروژه Swipe Effect - نمونه چهارم
    • پروژه Move Up Effect
    • پروژه Image Hover Effect خلاقانه
    • پروژه افکت Smoky Text
    • پروژه افکت Fill Text
  • درس هشتم: مبانی Animation و Keyframeها در CSS
    • انیمیشن‌ها در CSS
    • ساخت انیمیشن‌هایی با بیشتر از دو Stage مختلف
    • خاصیت Fill Mode
    • خاصیت Animation Iteration Count
    • خاصیت Animation Direction
    • مختصرنویسی در ایجاد یک انیمیشن
  • درس نهم: پروژه‌های خلاقانه با استفاده از مفاهیم Transition, Animation و Transform‌ها
    • پروژه Floating Text
    • پروژه Loading Effect
    • پروژه ماشین و موتور در حال حرکت
    • پروژه Text Rotator
    • پروژه Image Pattern متحرک
    • پروژه Shaking Effect برای Button
    • پروژه Button متحرک
    • پروژه Lighting Text
    • پروژه افکت تپش قلب
    • پروژه Text Background متحرک
    • پروژه Bouncing Balls
    • پروژه افکت باران
    • پروژه افکت خلاقانه برای آیکون‌ها
    • پروژه Loading Text
    • پروژه Background Color متغیر

مفید برای رشته‌های
  • طراحی سایت

پیش نیاز


آنچه در این آموزش خواهید دید:

برنامه آموزشی مورد تائید فرادرس
فایل برنامه ها و پروژه های اجرا شده
فایل PDF یادداشت‌ های ارائه مدرس

نرم افزارهای مرتبط با آموزش

Sublime Text 3.2.2




پیش نمایش‌ها

۱. مقدمه

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید دانلود پیش‌نمایش - حجم: ۳ مگابایت -- (کلیک کنید +))

۲. مبانی Transition‌ها

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید دانلود پیش‌نمایش - حجم: ۶ مگابایت -- (کلیک کنید +))

۳. Transform‌های دوبعدی

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید دانلود پیش‌نمایش - حجم: ۶ مگابایت -- (کلیک کنید +))

۴. Transform‌های سه‌بعدی
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۵. پروژه‌‌های ساخت افکت Hover برای Button - بخش یکم
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۶. پروژه‌‌های ساخت افکت Hover برای Button - بخش دوم
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۷. پروژه‌‌های ساخت افکت Hover برای Image و Text
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۸. مبانی Animation و Keyframeها در CSS
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۹. پروژه‌های خلاقانه با استفاده از مفاهیم Transition و Animation ,Transform‌ها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
این آموزش شامل ۱۰ جلسه ویدئویی با مجموع ۴ ساعت و ۳۲ دقیقه است.
با تهیه این آموزش، می‌توانید به همه بخش‌ها و جلسات آن، دسترسی داشته باشید.

راهنمای سفارش آموزش‌ها

آیا می دانید که تهیه یک آموزش از فرادرس و شروع یادگیری چقدر ساده است؟

(راهنمایی بیشتر +)

در مورد این آموزش یا نحوه تهیه آن سوالی دارید؟
  • با شماره تلفن واحد مخاطبین ۵۷۹۱۶۰۰۰ (پیش شماره ۰۲۱) تماس بگیرید. - تمام ساعات اداری
  • با ما مکاتبه ایمیلی داشته باشید (این لینک). - میانگین زمان پاسخ دهی: ۳۰ دقیقه


اطلاعات تکمیلی

نام آموزش آموزش ساخت انیمیشن در CSS
ناشر فرادرس
کد آموزش FVH4C9905
مدت زمان ۴ ساعت و ۳۲ دقیقه
زبان فارسی
نوع آموزش آموزش ویدئویی (نمایش آنلاین + دانلود)
حجم دانلود ۵۰۱ مگابایت (کیفیت ویدئو HD با فشرده سازی انحصاری فرادرس)


تضمین کیفیت و گارانتی بازگشت هزینه
توجه: کیفیت این آموزش توسط فرادرس تضمین شده است. در صورت عدم رضایت از آموزش، به انتخاب شما:
  • ۱۰۰ درصد مبلغ پرداختی در حساب کاربری شما شارژ می‌شود.
  • و یا ۷۰ درصد مبلغ پرداختی به حساب بانکی شما بازگشت داده می‌شود.





نظرات

تا کنون ۶۹ نفر از این آموزش استفاده کرده اند و ۱ نظر ثبت شده است.
پارسا
پارسا

با سلام. به نظر من آموزشی عالی درباره طراحی سایت می باشد زیرا UX سایت را زیبا و به UI کمک می کند.
قطعا همچین آموزشی در فرادرس لازم بود.

با تشکر.

دسته‌بندی موضوعی: برنامه نویسی | طراحی سایت
برچسب‌ها:
2D Transform in CSS | Animation in CSS | Application of Animation in CSS | Bold Effect Project in CSS | Bouncing Balls Project | Create Image Hover Effect | CSS Animations | Fade In Effect Project | Floating Text Project | Image Hover Effect Project | Iris Effect Project in CSS | Keyframe in CSS | Lighting Text Project | Loading Effect Project | Loading Text Project | Making Loading Effect | Mobility in CSS | Move Up Effect Project | Navigation in CSS | Orange Effect Project in CSS | Rotate Equation in CSS | Scale Equation in CSS | Skew Equation in CSS | Swipe Effect Project in CSS | Text Rotator Project | TranceForm in CSS | Transform Origin in CSS | Transform Training | Transition in CSS | Translate Equation in CSS | Web Animation | آپشن‌ های ترنزیشن در CSS | آموزش Animation ها در CSS | آموزش CSS | آموزش انیمیشن برای صفحات وب | انیمیشن ها در CSS | انیمیشن ها در CSS | انیمیشن ها در سی اس اس | پراپرتی های ترنزیشن‌‌ پذیر | پروژه Background Color متغیر | پروژه Background ساده در CSS | پروژه Button متحرک | پروژه Image Pattern متحرک | پروژه Shaking Effect برای Button | پروژه Text Background متحرک | پروژه افکت Fill Text | پروژه افکت Smoky Text | پروژه افکت باران در CSS | پروژه افکت تپش قلب | پروژه افکت خلاقانه برای آیکون‌ ها | پروژه تغییر Background در CSS | پروژه ساخت افکت Hover برای Button | تابع Rotate در CSS | تابع Rotate در محیط سه بعدی | تابع Scale در CSS | تابع Skew در CSS | تابع Translate در CSS | تابع Translate در محیط سه بعدی | تحرک در CSS | ترنزیشن‌ ها در CSS | ترنزیشن‌ ها در سی اس اس | ترنسفورم‌ ها در CSS | ترنسفورم‌ ها در سی اس اس | ترنسفورم های دو‌ بعدی در CSS | ترنسفورم‌های سه ‌بعدی در CSS | تعریف ویژگی تزنزیشن در CSS | حرکت در CSS | خاصیت Animation Direction | خاصیت Animation Iteration Count | خاصیت Fill Mode | ساخت Bold Effect | ساخت Hover Effect | ساخت Image Hover Effect | ساخت Loading Effect | ساخت Swipe Effect | ساخت افکت Loading | ساخت افکت بارگذاری | ساخت افکت لودینگ | کاربرد Animation در CSS | کی فریم ها در CSS | کی فریم ها در سی اس اس | مبانی انیمیشن در CSS | مبانی ترنزیشن‌ ها در CSS | مبانی کی فریم ها در CSS | متحرک سازی در CSS | مختصرنویسی در ایجاد انیمیشن
مشاهده بیشتر مشاهده کمتر

×
فهرست جلسات ۱۰ جلسه ویدئویی