آموزش انیمیشن های تعاملی با CSS و JavaScript

Interactive Animations with CSS and JavaScript

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: در دنیای بدون Flash ، انیمیشن حالت مختلط ابزاری قدرتمند برای طراحان وب است. این دوره نشان می دهد که چگونه می توان ترکیبی صحیح از HTML ، JavaScript ، CSS و سایر دارایی ها را برای ارائه انیمیشن های مبتنی بر وب که از نظر تلویزیون های صفحه تخت گرفته تا تلفن های هوشمند بسیار زیبا هستند ، انتخاب کرد. مربی W. W. Scott Means بر این موضوع تمرکز دارد که چگونه می توان از انیمیشن های CSS ، JavaScript و SVG برای تولید جلوه های پیچیده استفاده کرد در حالی که پیچیدگی کد را به حداقل می رساند. همانطور که مراحل ساخت یک نمایش پویا را می پیماید ، او داستانبرداری ، عناصر سفارشی HTML5 ، کار با SVG ، دستکاری DOM و موارد دیگر را پوشش می دهد.
موضوعات شامل:
  • داستانبرداری
  • ایجاد یک طرح پویا با flexbox
  • تعامل با JavaScript
  • پیمایش در DOM
  • افزودن انیمیشن
  • کنترل انیمیشن ها با کلاس
  • دستکاری SVG با جاوا اسکریپت
  • اعمال CSS در SVG

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

مقدمه Introduction

  • Beyond Flash: ایجاد انیمیشن برای وب مدرن Beyond Flash: Creating animations for the modern web

  • آنچه باید بدانید What you should know

1. ساختن یک بنیاد 1. Building a Foundation

  • تخته داستان Storyboarding

  • عناصر صحنه Scene elements

  • استراتژی های انیمیشن Animation strategies

  • محیط خود را تنظیم کنید Set up your environment

2. طرح بندی HTML 2. HTML Layout

  • عناصر سفارشی HTML HTML custom elements

  • پاسخگو CSS با واحدهای مشاهده Responsive CSS with view units

  • یک مربع با CSS vmin ایجاد کنید Create a square with CSS vmin

  • عنصر مرکز با حاشیه CSS Center element with CSS margins

  • Flexbox CSS عنصر مرکز Center element CSS flexbox

  • با flexbox یک طرح پویا ایجاد کنید Create a dynamic layout with flexbox

3. تعامل با JavaScript 3. Interactivity with JavaScript

  • ویژگی انتخاب CSS CSS selector specificity

  • یک کنترل کننده رویداد JavaScript را اضافه کنید Add a JavaScript event handler

  • پیمایش DOM Navigating the DOM

4. اضافه کردن انیمیشن 4. Adding Animation

  • راه اندازی انیمیشن Animation setup

  • CSSkeyframes CSS @keyframes

  • سهولت Easing

  • پیشرفت خودکار با JavaScript Auto-advance with JavaScript

  • انیمیشن ها را با کلاس کنترل کنید Control animations with classes

  • دید تحریک پذیر Animate visibility

  • ما به یک مونتاژ احتیاج داریم We need a montage

  • افزودن یک کنترل کننده رویداد انیمیشن Adding an animationend event handler

  • متحرک سازی با انتقال CSS Animating with CSS transitions

  • انیمیشن های هدفمند با استفاده از شناسه Targeted animations using IDs

  • دستکاری DOM با JavaScript Manipulating DOM with JavaScript

  • نمایش اسلایدها را تصادفی کنید Randomize slide displays

  • تنظیم زمان برای انتقال Set timing for transitions

5. کار با SVG 5. Working with SVG

  • DOM همه چیز است The DOM is everything

  • دستکاری SVG با JavaScript Manipulating SVG with JavaScript

  • اعمال CSS در SVG Applying CSS to SVG

  • متناسب و تمام شود Fit and finish

6. نتیجه گیری 6. Conclusion

  • مراحل بعدی Next steps

نمایش نظرات

Linkedin (لینکدین)

لینکدین: شبکه اجتماعی حرفه‌ای برای ارتباط و کارآفرینی

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

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

آموزش انیمیشن های تعاملی با CSS و JavaScript
جزییات دوره
1h 40m
33
Linkedin (لینکدین) Linkedin (لینکدین)
(آخرین آپدیت)
44,280
- از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

W. Scott Means W. Scott Means

توسعه دهنده نرم افزار ، مشاور ، نویسنده W. Scott Means یک توسعه دهنده ، مشاور و نویسنده نرم افزار است.

او از سال 1988 ، زمانی که در سن 17 سالگی مایکروسافت به مایکروسافت پیوست ، یک توسعه دهنده نرم افزار حرفه ای بوده است. از آن زمان ، وی برای همه چیز کد نوشت ، از دستگاه رانندگان به بازی های کازینو چند نفره. در طول سال ها ، او به تخصص در آتش نشانی نرم افزار رسیده است. او مهلت های ظاهراً غیرممکن را در پیش می گیرد و راه حل هایی ارائه می دهد که بیش از انتظارات مشتریانش باشد. هدف او این است که مشتری های خود را با توانمند سازی در جهت تأمین نیازهای خود با انتخاب دقیق فن آوری ها و سیستم های مناسب برای دستیابی به اهدافشان ، موفق سازد. او توسعه گسترده ای در هر دو سیستم عامل مایکروسافت و منبع باز انجام داده است. علاوه بر این ، او کتابهایی را در زمینه XML نوشته و تحریک کرده و چندین کتابخانه و م componentsلفه متن باز نیز منتشر کرده است.