انیمیشن سازی برای وب

در این دوره Pace Pace خود، Superhi طراحی و تولید مجموعه ای از پروژه های همه در مورد دستکاری، یک ظاهر طراحی شده و انیمیشن SVGS برای ارائه تصاویر مقیاس پذیر و عملکرد دوستانه به زندگی در مرورگر.
البته شامل 8+ ساعت درس های ویدئویی است که به شما آموزش می دهد که چگونه به انیمیشن های دسته بندی شده با CSS، SVG، جاوا اسکریپت و گرینسوک آموزش دهید.
شما یاد خواهید گرفت که چگونه نقاشی های خود را با کد در فیما انجام دهید و سپس حرکت و سبک خود را تحریک کنید با هر دو انیمیشن CSS و استاندارد صنعت Greensock API API (GSAP).
این یک گام بزرگ بعدی برای دانش آموزانی است که قبلا برخی از دانش های HTML و CSS را دارند، یا پایه گذاری HTML، CSS + جاوا اسکریپت + جاوا اسکریپت را تکمیل کرده اند دوره های طراحان.

عنوان اصلی : Animation for the Web

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

01 به Semstress خوش آمدید
02 ویرایشگر SuperHi
03 ساختار و استایل پایه
04 چیدمان صفحه
05 افزودن تایپوگرافی با استفاده از فونت های وب
06 افزودن چندین تصویر به سایت ما
07 افزودن جاوا اسکریپت به سایت
08 تنظیم یک نمایش اسلاید
09 افزودن چند نمایش اسلاید
10 در هدرهای ما با GSAP محو می شود
11 ایجاد افکت چرخ فلک
12 در حال مرتب کردن چرخ و فلک ما
13 افزودن جلوه اسلایدهای مقدماتی ما
14 ایجاد جدول زمانی برای اسلایدهای بعدی
15 طراحی سازگار با موبایل
16 افزودن جلوه‌های شناور به دکمه‌های ادامه مطلب
17 در انتظار بارگیری تصاویر با imagesLoaded
18 تغییر در GSAP
19 به پروژه خوش آمدید!
20 بیایید صفحه خود را راه اندازی کنیم
21 افزودن یک طرح
22 فریم های کلیدی CSS و انیمیشن های CSS چیست؟
23 افزودن حلقه و تکرار انیمیشن ها
24 نحوه اعمال آسان سازی در انیمیشن CSS
25 ساختن یک تصویر SVG از ابتدا
26 استفاده از CSS در تگ های SVG
27 Viewbox SVG و ReserveAspectRatio
28 حالت شناور با SVG
29 با صادرات SVG از Figma زندگی خود را آسان‌تر می‌کنیم
30 حالت پر کردن صفحه و ترکیب
31 استفاده از انیمیشن های CSS با برچسب های SVG
32 افزودن فیلتر CSS
33 استفاده از جاوا اسکریپت برای محو کردن هدر در اسکرول
34 افزودن آسان‌سازی جاوا اسکریپت
35 گره زدن رویدادهای اسکرول به حباب های ما
36 تغییر مقیاس لکه در هر بخش
37 افزودن چندین حباب در هر بخش
38 نوار پیمایش CSS سفارشی
39 تکلیف: فلش روی پیمایش را محو کنید
40 راه حل تکلیف
41 به 4th Kind خوش آمدید!
42 بیایید صفحه خود را راه اندازی کنیم
43 افزودن تایپوگرافی و پیوندهای ما
44 افزودن حالت تاریک با درخواست رسانه
45 متغیر CSS برای تم
46 در حال به روز رسانی حالت تاریک ما
47 حالت تاریک فعال شده توسط کاربر
48 در حال افزودن پیمایش ما
49 تغییر مسیریابی ما
50 افزودن SVGهای خام به سایت ما
51 افزودن انیمیشن نماد منو
52 پویانمایی تغییر حالت تاریک
53 افزودن یک انیمیشن سه گانه
54 جلوه برف پاک کن حالت تاریک
55 افزودن انیمیشن مرکزی ما
56 تغییر سایت ما در منوی باز است
57 پلاگین MorphSVG
58 به خانه Home Planet خوش آمدید
59 تنظیم سرصفحه ما
60 شناسه های SVG چیست؟
61 حرکت کره چشم
62 افزودن جدول زمانی کلاه
63 حرکت بازوهای چپ و راست
64 راه اندازی انیمیشن خانه ما
65 افزودن SVG خام به خانه
66 سوسو زدن تلویزیون با خط زمانی
67 افزودن پیوندها به SVG ما
68 افزودن یک برچسب به پیوندهای ما
69 در حال به روز رسانی متن در شناور
70 محو شدن سایر پیوندها در شناور
71 تنظیم جدول زمانی داستان
72 افزودن صحنه ما
73 افزودن اختلاف منظر به طومار ما
74 جدول زمانی خود را کنار می زنیم
75 تنظیم جدول زمانی بر اساس اسکرول
76 طراحی سایت ریسپانسیو
77 به استودیوی عکس خیابان مهر خوش آمدید!
78 تنظیم محتوا و سبک صفحه ما
79 موقعیت چسبنده
80 ناظر تقاطع چیست؟
81 اعمال یک ظاهر طراحی شده برای ناظر ما
82 پرس و جو رسانه ای با حرکت کاهش یافته ترجیح می دهد
83 Scroll-jacking با CSS Scroll Snap
84 در حال افزودن شرح‌های ما
85 مسیر کلیپ CSS
86 Variation: افزودن مسیر کلیپ به انیمیشن CSS
87 افزودن تایپوگرافی و لایه ها
88 افزودن یک لایه چرخشی
89 تغییر چرخش در حرکت ماوس
90 افزودن یک درخواست رسانه برای کاهش حرکت
91 در حال تنظیم توالی مقدمه ما
92 متحرک کردن صندوق ورودی ما
93 افزودن اصلاحات و بهینه سازی ها
94 به Wakefast خوش آمدید
95 راه اندازی صفحه ما
96 شروع یک پیمایش صاف
97 انتقال CSS به جاوا اسکریپت
98 تکرار یک اسکرول صفحه معمولی
99 افزودن یک فاکتور tween
100 افزودن پرسش‌های رسانه به جاوا اسکریپت
101 در میوه ها محو می شوند
102 نسبت ابعاد و لایه بندی تصاویر
103 افزودن افکت طومار اختلاف منظر به میوه هایمان
104 جعل مکان نما
105 جابجایی مکان نما
106 افزودن مکان‌نمای دنباله‌ای کندتر
107 افزودن چرخش به مکان نما
108 متحرک سازی بر روی پیوندها
109 اضافه کردن زیر خط‌های تصویر با مسیر کلیپ
110 افزودن یک درخواست رسانه addListener
111 از شما برای شرکت در دوره ما سپاسگزاریم!