دوره آموزشی انیمیشن های تعاملی با CSS و جاوا اسکریپت
1 ساعت 41 دقیقهمتوسط2018-09-04
مدرسین

W. Scott Means
Software Developer, Consultant, Author
جزئیات دوره
در دنیای بدون فلش، انیمیشن با حالت ترکیبی ابزار قدرتمندی برای طراحان وب است. این دوره نحوه انتخاب ترکیب صحیح HTML، جاوا اسکریپت، CSS و سایر داراییها را برای ارائه انیمیشنهای مبتنی بر وب که در همه چیز از تلویزیونهای صفحهتخت گرفته تا گوشیهای هوشمند عالی به نظر میرسند را نشان میدهد. مدرس W. Scott Means بر این تمرکز می کند که چگونه انیمیشن های CSS، جاوا اسکریپت و SVG می توانند برای تولید جلوه های پیچیده و در عین حال که پیچیدگی کد را به حداقل می رساند، استفاده شوند. همانطور که او مراحل ساخت یک ارائه پویا را انجام می دهد، استوری بردینگ، عناصر سفارشی HTML5، کار با SVG، دستکاری DOM و موارد دیگر را پوشش می دهد.
اهداف یادگیری
داستان بازی
ایجاد یک طرح بندی پویا با flexbox
تعامل با جاوا اسکریپت
پیمایش در DOM
افزودن انیمیشن
کنترل انیمیشن ها با کلاس ها
دستکاری SVG با جاوا اسکریپت
استفاده از CSS در SVG
اهداف یادگیری
داستان بازی
ایجاد یک طرح بندی پویا با flexbox
تعامل با جاوا اسکریپت
پیمایش در DOM
افزودن انیمیشن
کنترل انیمیشن ها با کلاس ها
دستکاری SVG با جاوا اسکریپت
استفاده از CSS در SVG
مهارت ها
CSSWeb Standards3D AnimationJavaScriptWeb DesignOracleFront-End Web DevelopmentVisualization and Real-TimeAnimation and IllustrationWeb DevelopmentProgramming LanguagesOpen SourceSoftware DevelopmentOne-Off
سرفصل ها
0. مقدمه
- 01 - Beyond Flash - ایجاد انیمیشن برای وب مدرن
- 02 - آنچه باید بدانید
1. ساختن یک بنیاد
- 03 - داستان بازی
- 04 - عناصر صحنه
- 05 - استراتژی های انیمیشن
- 06 - محیط خود را تنظیم کنید
2. HTML Layout
- 07 - عناصر سفارشی HTML
- 08 - CSS پاسخگو با واحدهای مشاهده
- 09 - یک مربع با CSS vmin ایجاد کنید
- 10 - عنصر مرکزی با حاشیه های CSS
- 11 - عنصر مرکزی CSS flexbox
- 12 - با flexbox یک طرح پویا ایجاد کنید
3. تعامل با جاوا اسکریپت
- 13 - ویژگی انتخابگر CSS
- 14 - یک کنترل کننده رویداد جاوا اسکریپت اضافه کنید
- 15 - پیمایش در DOM
4. اضافه کردن انیمیشن
- 16 - راه اندازی انیمیشن
- 17 - CSS @keyframes
- 18 - آسان کردن
- 19 - پیشرفت خودکار با جاوا اسکریپت
- 20 - انیمیشن ها را با کلاس ها کنترل کنید
- 21 - قابلیت مشاهده متحرک
- 22 - ما به مونتاژ نیاز داریم
- 23 - اضافه کردن یک کنترل کننده رویداد animationend
- 24 - متحرک سازی با انتقال CSS
- 25 - انیمیشن های هدفمند با استفاده از شناسه ها
- 26 - دستکاری DOM با جاوا اسکریپت
- 27 - نمایش اسلایدها را تصادفی کنید
- 28 - تعیین زمان برای انتقال
5. کار با SVG
- 29 - DOM همه چیز است
- 30 - دستکاری SVG با جاوا اسکریپت
- 31 - اعمال CSS در SVG
- 32 - تناسب و تکمیل
6. نتیجه گیری
- 33 - مراحل بعدی
دوره های مرتبط
- دوره آموزشی جعبه ابزار CSS: نکات و روشهای طراحی و چینش صفحه
- دوره آموزشی CSS: طرحبندیهای پیشرفته با Grid
- دوره آموزشی CSS برای توسعهدهندگان
- دوره آموزشی HTML، CSS و جاوااسکریپت: ساخت وب
- دوره آموزشی طرح بندی قابل دسترسی برای وب
- دوره آموزشی فرم های HTML: قابلیت دسترسی
- دوره آموزشی مقدمه ای بر طراحی و توسعه وب
- دوره آموزشی آن را تمرین کن: طرح بندی CSS