یادگیری پیشرفته انیمیشن، ترنزیشن و ترانسفورم CSS و جاوا اسکریپت با بیش از ۱۵۰ پروژه خلاقانه
استاد انیمیشن، ترنزیشن و ترانسفورم CSS و جاوا اسکریپت شوید.
با استفاده از انیمیشنها، ترنزیشنها و ترانسفورمهای CSS بیش از ۱۵۰ مثال متنوع بسازید.
ایجاد دکمهها، تصاویر، کارتها، لودرها، منوها، افکتهای خلاقانه و موارد دیگر.
توانایی ایجاد هرگونه انیمیشن خلاقانه CSS که در ذهن دارید.
تسلط بر خصوصیت CSS clip-path و یادگیری نحوه استفاده از آن در متحرکسازی عناصر HTML.
پیشنیازها:
- اتصال به اینترنت
- درک اولیه از HTML، CSS و جاوا اسکریپت
- هر ویرایشگر کدی که انتخاب میکنید
تا به حال انیمیشنی را در Codepen یا هر وبسایت دیگری دیدهاید و با خود فکر کردهاید "اوه، چقدر عالی است! میخواهم این کار را انجام دهم!" اما سپس فکر کردهاید که پیچیده و فراتر از مهارتهای شماست؟
خب، من اینجا هستم تا به شما بگویم: خیر، اصلاً اینطور نیست! من احمد صادق، توسعهدهنده وب فول استک و فریلنسر با بیش از ۷ سال تجربه هستم و میخواهم شما را به دوره انیمیشنهای CSS و جاوا اسکریپت من خوش آمد بگویم.
انیمیشنهای CSS و جاوا اسکریپت به سرعت به ابزارهای طراحی ضروری تبدیل میشوند که به طور فزایندهای برای کمک به کاربران در درک و تعامل با وبسایتهای ما استفاده میشوند. آنها قطعاً گام بزرگ بعدی در طراحی وب هستند! کارهای شگفتانگیزی با آنها قابل انجام است. عملاً به تخیل شما بستگی دارد! آنها به وبسایت شما جان میبخشند و تجربه کاربری را بهبود میبخشند و شما بهتر میدانید که تجربه کاربری بهتر به معنای اعتبار بالاتر و بازدیدکنندگان راضیتر است. بنابراین، انیمیشنهای CSS و جاوا اسکریپت امروزه مهارتهای حیاتی برای هر توسعهدهنده وب هستند و من اینجا هستم تا مطمئن شوم که آنها را به درستی یاد میگیرید.
بنابراین، در این دوره شما انیمیشنها، ترنزیشنها و ترانسفورمهای CSS را از صفر استاد خواهید شد و نه تنها این، بلکه دستهایمان را کثیف میکنیم و مثالهای زیادی را با هم میسازیم تا ایدههای فراوان و الهامبخشی کسب کنید تا به شما در ایجاد هر انیمیشن پیچیدهای که در ذهن دارید کمک کند.
با بررسی خصوصیت CSS transition شروع میکنیم و یاد میگیریم که چیست و چگونه میتواند به عناصر HTML جان بخشد.
سپس به CSS transforms میپردازیم که درها را به روی گزینههای خلاقانه بسیاری باز میکند، از جابجایی عناصر در صفحه گرفته تا تغییر اندازه و چرخش آنها. بنابراین، درباره تمام توابع transform که میتوانیم در محیطهای دو بعدی و سه بعدی استفاده کنیم، صحبت خواهیم کرد.
پس از آن، به بخش هیجانانگیز میرسیم! از تمام تکنیکها و خصوصیات یادگرفته شده در مورد ترانسفورمها و ترنزیشنهای CSS استفاده میکنیم و شروع به ساختن مثالهای خلاقانه میکنیم که به شما الهام میبخشد و به شما کمک میکند تا از آنچه آموختهاید حداکثر استفاده را ببرید!
این بخش را با ایجاد افکتهای هاور دکمه، افکتهای هاور تصویر، افکتهای منو، افکتهای کارت و چند مثال جالب دیگر شروع میکنیم!
سپس به انیمیشنهای CSS و keyframes میپردازیم و همه چیز را در مورد آنها و تمام خصوصیاتشان یاد میگیریم.
پس از آن به بخش دیگری از دوره میرویم که در آن مثالهای متعددی از انیمیشنهای CSS خواهیم ساخت که تخیل شما را جرقه میزند و به شما کمک میکند تا هر انیمیشنی را که در ذهن دارید ایجاد کنید!
سپس به بخش افکتهای clip-path میپردازیم، جایی که همه چیز را درباره خصوصیت CSS clip-path و نحوه استفاده از آن برای ایجاد برخی مثالها و افکتهای واقعاً خلاقانه یاد میگیریم.
و در نهایت، با رفتن به بخش افکتهای جاوا اسکریپت، مهارتهای خود را به سطح بعدی میبریم و با استفاده از قدرت جاوا اسکریپت، افکتهای پیچیدهتری خواهیم ساخت.
در پایان این دوره، شما قادر خواهید بود نحوه کار هر انیمیشن وب را درک کنید و بیش از ۱۵۰ پروژه مختلف با ایدههای متنوع ساختهاید که به شما در افزایش خلاقیت و برجسته شدن از سایر توسعهدهندگان وب کمک میکند. بنابراین، اگر به اندازه من هیجانزده هستید، دکمه ثبت نام را بزنید و بیایید با این دوره خلاقیت انیمیشنها، ترنزیشنها و ترانسفورمهای CSS و جاوا اسکریپت شیرجه بزنیم!
Ahmed Sadek
نمایش نظرات