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

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

مقدمه 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