انیمیشن های وب مدرن

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

CSS انیمیشن ها و انتقال CSS Animations & Transitions

• قبل از تماشای دوره Before Watching the Course

• راه اندازی پوشه پروژه ما Setting Up Our Project Folder

• مقدمه ای بر CSS Transitions Introduction to CSS Transitions

• استفاده از CSS Transition با جاوا اسکریپت Using CSS Transition with JavaScript

• استفاده از رویدادهای انتقال جاوا اسکریپت Using JavaScript Transition Events

• رفتار انتقالی و انیمیشن های گسسته Transition Behavior & Discrete Animations

• متحرک سازی یک عنصر از صفحه نمایش: هیچ کدام برای نمایش: مسدود کردن Animating an Element from display: none to display: block

• با استفاده از قانون شروع به سبک @ Using @starting-style rule

• بیشتر در @starting-style More on @starting-style

• توابع زمان بندی کد دیگ بخار Timing Functions Boilerplate Code

• توابع زمان بندی خطی Linear Timing Functions

• انیمیشن های روان با توابع زمان بندی مکعبی Bezier Smooth Animations with Cubic Bezier Timing Functions

• متحرک سازی در پرش ها با استفاده از تابع زمان بندی مراحل Animating in Jumps Using the Steps Timing Function

• مقدمه ای بر انیمیشن های CSS Introduction to CSS Animations

• ویژگی های انیمیشن های CSS CSS Animations Properties

• اضافه کردن چندین انیمیشن Adding Multiple Animations

• ترکیب بندی انیمیشن Animation Composition

• حالت پر کردن انیمیشن Animation Fill Mode

• اطلاعات بیشتر در مورد @keyframe at-rule More on the @keyframe at-rule

• انیمیشن ها رویدادهای جاوا اسکریپت Animations JavaScript Events

• انیمیشن های گسسته Discrete Animations

• تمرین انیمیشن ها (قسمت 1) Animations Exercise (Part 1)

• تمرین انیمیشن ها (قسمت 2) Animations Exercise (Part 2)

• تمرین انیمیشن ها (قسمت 3) Animations Exercise (Part 3)

• تمرین انیمیشن ها (قسمت 4) Animations Exercise (Part 4)

Web Animations API The Web Animations API

• زمان استفاده از Web Animations API When to use the Web Animations API

• جدول زمانی، اشیاء انیمیشن و جلوه های انیمیشن Timeline, Animation Objects & Animation Effects

• ایجاد اولین انیمیشن ما با استفاده از Web Animations API Creating our First Animation Using the Web Animations API

• راه دیگری برای تعریف فریم های کلیدی Another Way for Defining Keyframes

• یادداشت سریع! Quick Note!

• کامپوزیت تکرار Iteration Composite

• کنترل انیمیشن ما با روش های شیء متحرک Controlling Our Animation with Animation Object Methods

• به روز رسانی جلوه انیمیشن ما (اثر فریم کلیدی) Updating Our Animation Effect (Keyframe Effect)

• دریافت اطلاعات درباره انیمیشن های ما Getting Information About Our Animations

• اطلاعات بیشتر در مورد ویژگی currentTime More on the currentTime Property

• اطلاعات بیشتر در مورد ویژگی startTime More on the startTime Property

• انیمیشن وضعیت معلق و وعده آماده Animation Pending State & Ready Promise

• وعده های تمام شده، پایان و لغو رویدادها Finished Promise, Finish and Cancel Events

• دریافت همه انیمیشن ها در یک سند یا یک عنصر Getting All Animations in the Document or an Element

• پر کردن مداوم سبک های انیمیشن با commitStyles Persisting Filling Animations Styles with commitStyles

• حذف خودکار انیمیشن ها توسط مرورگرها Automatic Animations Removal By Browsers

• Web Animations API Exercise Overview Web Animations API Exercise Overview

• تمرین: متحرک کردن شخصیت Exercise: Animating the Character

• متحرک سازی خیابان، پس زمینه و پیش زمینه Animating the Street, Background and Foreground

• مکث کل صحنه Pausing the Entire Scene

• افزایش سرعت و کاهش سرعت شخصیت ما Speeding Up And Slowing Down Our Character

• اضافه کردن و متحرک کردن یک سایه به شخصیت ما Adding and Animating a Shadow to Our Character

• اضافه کردن یک ماشین تصادفی به صحنه Adding a Random Car to the Scene

• تصادفی کردن سرعت و وقوع ماشین ما Randomizing Our Car's Speed & Occurrence

• متحرک سازی چرخ های ماشین Animating the Car Wheels

انیمیشن های اسکرول رانده شده Scroll Driven Animations

• مروری بر انیمیشن های مبتنی بر اسکرول An Overview to Scroll Based Animations

• به نام جدول زمانی پیشرفت پیمایش Named Scroll Progress Timelines

• جدول زمانی پیشرفت پیمایش ناشناس Anonymous Scroll Progress Timelines

• سفارشی کردن محدوده انیمیشن Customizing the Animation Range

• محدوده زمانی خط زمانی Timeline Scope

• با نام مشاهده جدول زمانی پیشرفت Named View Progress Timelines

• مشاهده درج جدول زمانی View Timeline Inset

• ناشناس مشاهده جدول زمانی پیشرفت Anonymous View Progress Timelines

• محدوده های خط زمانی نامگذاری شده است Named Timeline Ranges

• خلاصه محدوده های تایم لاین نامگذاری شده Named Timeline Ranges Summary

• ایجاد جدول زمانی پیشرفت اسکرول با استفاده از Web Animations JS API Creating Scroll Progress Timelines using the Web Animations JS API

• ایجاد جدول زمانی View Progress با استفاده از Web Animations JS API Creating View Progress Timelines using the Web Animations JS API

• بررسی اجمالی ورزش Exercise Overview

• اعتبار دارایی ها Assets Credits

• [تمرین] متحرک کردن مسیر لوگوی SVG [Exercise] Animating the SVG Logo Path

• [تمرین] متحرک سازی پس زمینه هدر [Exercise] Animating the Header Backgroud

• [تمرین] متحرک سازی بخش قهرمان (قسمت 1) [Exercise] Animating the Hero Section (Part 1)

• [تمرین] متحرک سازی بخش قهرمان (قسمت 2) [Exercise] Animating the Hero Section (Part 2)

• [تمرین] متحرک سازی بخش ویژگی ها [Exercise] Animating the Features Section

• [تمرین] متحرک سازی بخش اعضای تیم (قسمت 1) [Exercise] Animating the Team Members Section (Part 1)

• [تمرین] متحرک سازی بخش اعضای تیم (قسمت 2) [Exercise] Animating the Team Members Section (Part 2)

• [تمرین] متحرک سازی بخش خدمات (قسمت 1) [Exercise] Animating the Services Section (Part 1)

• [تمرین] متحرک سازی بخش خدمات (قسمت 2) [Exercise] Animating the Services Section (Part 2)

• [تمرین] خاموش کردن انیمیشن ها بر اساس ترجیح کاربر [Exercise] Turning off the Animations According to the User Preference

• [تمرین] اصلاح سبک‌های مرورگرهای پشتیبانی نشده [Exercise] Fixing Styles for Unsupported Browsers

مشاهده API Transitions View Transitions API

• برنامه معرفی و نسخه ی نمایشی Introduction & Demo App

• اعتبار دارایی ها Assets Credits

• شروع به کار با View Transitions API Getting Started with the View Transitions API

• سفارشی کردن انیمیشن Crossfade پیش فرض Customizing the Default Crossfade Animation

• جداسازی عناصر برای کنترل بیشتر بر روی انیمیشن انتقال ما Isolating Elements For More Control on Our Transition Animation

• افزودن نام انتقال مشاهده به صورت پویا Adding View Transition Name Dynamically

• روش‌ها و وعده‌های شیء انتقالی ViewTransition ViewTransition Object Methods & Promises

• استفاده از View Transition Promises برای اسکرول یک مورد به نمای Using View Transition Promises to Scroll an Item Into View

• تبدیل تصویر بند انگشتی به تصویر بزرگ Transforming the Thumbnail Image Into the Large Image

• تبدیل تصویر بند انگشتی به تصویر بزرگ (ادامه) Transforming the Thumbnail Image Into the Large Image (Cont.)

• متحرک سازی آیتم های گرید با نام های انتقال نمای پویا Animating Grid Items with Dynamic View Transition Names

• تغییر انیمیشن های انتقال برای کاربرانی که حرکت کاهش یافته را ترجیح می دهند Changing Transition Animations For Users Who Prefers Reduced Motion

• متحرک سازی عناصر کاذب View Transitions با Web Animations API Animating the View Transitions Pseudo Elements with the Web Animations API

• یادداشت برای سخنرانی های بعدی Note for the Next Lectures

• [تمرین بازی کلمات] مقدمه [Words Game Exercise] Introduction

• [تمرین بازی کلمات] اعتبارات دارایی [Words Game Exercise] Assets Credits

• [تمرین بازی کلمات] متحرک کردن حروف [Words Game Exercise] Animating the Letters

• [تمرین بازی کلمات] متحرک سازی زندگی ها و سکه ها [Words Game Exercise] Animating the lives & coins

• [تمرین بازی کلمات] مدیریت حروف تکراری [Words Game Exercise] Handling Duplicate Letters

• [تمرین بازی کلمات] متحرک سازی مدال [Words Game Exercise] Animating the Modal

• استفاده از View Transitions با JS Frameworks [ReactJS & Svelte Example] Using View Transitions with JS Frameworks [ReactJS & Svelte Example]

• استفاده از نمایش انتقال با برنامه های کاربردی یک صفحه Using View Transitions with Single Page Applications

• [مثال SvelteKit] مقدمه [SvelteKit Example] Introduction

• [SvelteKit] استفاده از onNavigate برای راه‌اندازی انتقال نمایش بین مسیرها [SvelteKit] Using onNavigate to Initialize a View Transition Between Routes

• [SvelteKit] متحرک کردن تصویر [SvelteKit] Animating the Image

• [SvelteKit] انیمیشن انتقال متفاوت برای صفحه نمایش موبایل [SvelteKit] Different Transition Animation for Mobile Screens

• [به‌روزرسانی] انتقال‌های نمای سند متقابل [Update] Cross Document View Transitions

• [به‌روزرسانی] انتقال‌های نمای متقابل اسناد (ادامه) [Update] Cross Document View Transitions (Cont.)