آموزش انیمیشن های CSS با پروژه های خلاقانه در دنیای واقعی

CSS Animations With Creative Real-World Projects

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:

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

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

نیازی به دانستن جاوا اسکریپت یا CSS پیشرفته ندارید، نگران نباشید. اگر اصول اولیه HTML و CSS را بدانید، کاملاً کافی است. پس از دوره، می‌توانید نحوه کار این همه انیمیشن‌های شگفت‌انگیز را درک کنید و بدون هیچ کمکی پروژه‌های خود را ایجاد کنید.

در طول این دوره، شما در حال ساخت پروژه های انیمیشن CSS عالی هستید. دکمه ها، متون، پس زمینه، اجزای متحرک و موارد دیگر. +25 پروژه منحصر به فرد در انتظار شماست.

پس از هر ویدیوی پروژه، فراموش نکنید که آن را با ما به اشتراک بگذارید :) من از شما انتظار دارم که حداقل 3 پروژه انجام دهید. اگر بیشتر به اشتراک بگذارید، شگفت انگیز هستید! می‌توانید آثار خود را با استفاده از اسکرین‌شات، ویدیو یا قطعه کد به اشتراک بگذارید. من نمی توانم صبر کنم!

شماره‌های ویدیوی پروژه‌های دوره: از 12 تا 20 (پروژه‌های انتقال CSS)،  از 23 تا 36 (پروژه‌های فریم کلیدی انیمیشن CSS)

اگر با هر یک از آنها مشکل دارید یا سوالی در ذهن شما وجود دارد، از من و ارتباط ما بپرسید :) 

خوش بگذرانید!


سرفصل ها و درس ها

درس ها Lessons

  • پروژه انیمیشن متن - 14 Text Animation Project - 14

  • پروژه انیمیشن متن نئون - 24 Neon Text Animation Project - 24

  • مقدمه Intro

  • CSS Flexbox CSS Flexbox

  • پروژه دکمه پرداخت - 23 Pay Button Project - 23

  • موقعیت یابی مطلق Absolute Positioning

  • بارگیری انیمیشن ها - پروژه ها (17-20) Loading Animations - Projects (17-20)

  • پروژه انیمیشن پس زمینه آیکون های اجتماعی - 2 Social Icons Background Animation Project - 2

  • پروژه انیمیشن مرزی نمادهای اجتماعی - 1 Social Icons Border Animation Project - 1

  • پروژه انیمیشن ضربان قلب - 13 Heart Beating Animation Project - 13

  • پروژه انیمیشن ماشین رانندگی در شب - 25 Night Drive Car Animation Project - 25

  • چشم انداز Perspective

  • تبدیل Transform

  • درک انیمیشن ها Understanding Animations

  • تبدیل مبدا Transform Origin

  • پروژه دکمه متحرک - 8 Animated Button Project - 8

  • شبه عناصر Pseudo-Elements

  • پروژه دکمه صفحه کلید - 6 Keyboard Button Project - 6

  • تبدیل انواع Transform Types

  • مبانی CSS CSS Basics

  • پروژه منوی متحرک - 9 Animated Menu Project - 9

  • پروژه انیمیشن موج متن - 16 Text Wave Animation Project - 16

  • انتقال CSS CSS Transitions

  • شبه کلاس ها Pseudo-Classes

  • پروژه کارت های کج - 7 Skewed Cards Project - 7

  • پروژه دکمه شناور - 11 Hovered Button Project - 11

  • پروژه انیمیشن موج پوزیدون - 15 Poseidon Wave Animation Project - 15

  • پروژه انیمیشن دراپ - 21 Drop Animation Project - 21

  • نمادهای اجتماعی در پروژه دکمه - 4 Social Icons In a Button Project - 4

  • مینی درس - سایه متن Mini Lesson - Text Shadow

  • پروژه دکمه تماس واتساپ -12 WhatsApp Calling Button Project -12

  • پروژه دکمه فلش - 10 Arrow Button Project - 10

  • پروژه انیمیشن لایه ای پروژه آیکون های اجتماعی - 3 Social Icons Project Layer Animation Project - 3

  • پروژه انیمیشن چرخش نمادهای اجتماعی - 5 Social Icons Rotation Animation Project - 5

  • پیکربندی انیمیشن ها Configuring Animations

  • پروژه انیمیشن متن طراح - 22 Designer Text Animation Project - 22

نمایش نظرات

آموزش انیمیشن های CSS با پروژه های خلاقانه در دنیای واقعی
جزییات دوره
3h 8m
36
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
480
4 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Safak Kocaoglu Safak Kocaoglu

مهندس کامپیوتر. توسعه دهنده Front-end.

سلام، من سافاک هستم. در اینجا چند نکته وجود دارد که ممکن است لازم باشد بدانید :)

من یک توسعه دهنده وب تمام پشته هستم و 5 سال تجربه دارم. کار من ایجاد اپلیکیشن های تعاملی وب و موبایل با طراحی خوب و به اشتراک گذاشتن تجربیاتم با دانش آموزان است. اگر به طراحی وب، انیمیشن سازی وب، توسعه front-end و ایجاد API های وب مفید علاقه دارید، به شما توصیه می کنم دوره های من را بررسی کنید.