بهعنوان یک دولوپر فرانت اند شاید خیلی وقتها که سایتهای معروف را نگاه میکنید عاشق حالت انیمیشنی و اکشنهای صفحه شوید و با خودتان فکر کنید که اینها چطور درست شدهاند؟ شاید با جاوااسکریپت طراحی شدهاند یا شاید آپدیت جدید بوت استرپ چنین ویژگیهایی داشته است؟ در این دوره با 100 پروژه عملی، این انیمیشنهای جذاب و ساده را فقط و فقط با CSS آموزش میدهیم. اگر آموزش ui ux بدانید به شما برای ساخت یک انیمشن به جا و مناسب کمک میکند. با این دوره شما دانش CSS خود را چند درجه بالا میبرید و با یادگرفتن این 100 پروژه و همین طور خلاقیت خود، به خلق انیمشنهای زیبا در سایت میپردازید. در این دوره از صفر تا صد ساخت انیمیشن را کار میکنیم و با هم نمونههایی طراحی میکنیم، به این شکل ایدههای زیادی به دست میآورید که الهامبخش شما خواهد بود و از پس هر انیمیشن پیچیدهای برخواهید آمد. در آموزش انیمیشن با CSS علاوه بر طراحیهای دوبعدی به طراحیهای سهبعدی هم میپردازیم. از اصول ساده و اساسی اکشنهای CSS شروع میکنیم و سپس به ترکیب این اصول و خلق انیمیشن میپردازیم و سراغ ساخت دکمههایی که با حرکت ماوس تغیر حالت میدهند میرویم و سپس همین حرکات رو روی عکس پیاده میکنیم و با کیفریم ها آشنا میشویم که نقطهی کلیدی برای ساخت انیمشن است. این دوره مقدماتی نیست و اگر هیچ تجربهای از CSS ندارید، از دوره کاملCSS و html شروع کنید و سپس سراغ این دوره بیایید.
CSS انیمیشن چیست؟
CSS انیمیشن تکنیکی است که برای ایجاد جلوههای بصری و انیمیشن در صفحات وب با (Cascading Style Sheets) CSS استفاده میشود. این به توسعهدهندگان اجازه می دهد تا عناصر HTML را بدون نیاز به جاوا اسکریپت یا فلش متحرک کنند. انیمیشنهای CSS را میتوان برای ویژگیهای مختلف یک عنصر، مانند موقعیت، اندازه، رنگ و کدورت (opacity) آن، برای ایجاد تجربههای پویا و جذاب کاربر اعمال کرد. افکتهای انیمیشن را میتوان با رویدادهای مختلف، مانند کلیکهای ماوس، شناور کردن (hover) یا بارگذاری صفحه فعال کرد.
CSS انیمیشن چه کاری انجام میدهد؟
CSS انیمیشن امکان متحرکسازی و انتقال از یک پیکربندی سبک CSS به پیکربندی دیگر را ممکن میکند. انیمیشنها از دو جزء تشکیل شدهاند، سبکی که CSS انیمیشن را توصیف میکند، و مجموعهای از فریمهای کلیدی که حالتهای شروع و پایان سبک انیمیشن را نشان میدهند و همچنین نقاط میانی احتمالی.
آیا CSS انیمیشن به JS نیاز دارد؟
انیمیشنهای CSS امکان انجام انیمیشنهای ساده را بدون جاوا اسکریپت فراهم میکنند. جاوا اسکریپت میتواند برای کنترل انیمیشنهای CSS و حتی بهترکردن آنها با کد کمی استفاده شود، ولی این دوره نیازی به جاوا اسکریپت ندارد.
آیا CSS بهتر از جاوا اسکریپت است؟
اگر نیاز به تعامل کاربر دارید (چیزهایی مانند شناور کردن (hover)، فوکوس کردن، کلیک کردن و غیره) از جاوا اسکریپت استفاده کنید، چرا که جاوااسکریپت زبان تعاملی کاربر و سایت است؛ ولی اگر آیتم نیاز به تغییر در نمایش دارد، باید متحرک شود، یا هر تغییر بصری دیگری در آن ایجاد شود، از CSS استفاده کنید، چرا که هم سبکتر است و هم برای استایلدهی صفحات استفاده میشود.
در پایان دورهی طراحی صد پروژهی انیمیشن و افکت حرکتی با CSS چه چیزی یاد میگیرید؟
- هر حرکت و انیمیشنی در هر سایتی را میشناسید.
- صد پروژه یاد خواهید گرفت که میتوانید بهعنوان تمپلیت هم استفاده کنید.
- به طراحی انیمشن با CSS و ایدههای آن مسلط خواهید شد.
پیشنیازهای دوره:
آشنایی به html و CSS