دوره آموزشی CSS: اسکرول و انطباق
3 ساعت 31 دقیقهمتوسط2022-11-09
مدرسین

Ray Villalobos
Senior Staff Instructor at LinkedIn Learning
جزئیات دوره
Scrolling قبلاً بسیار ابتدایی بود - بالا و پایین و گاهی اوقات در کنار هم. اکنون Scrolling جایگاه بیشتری در پیمایش دارد و CSS به شما امکان میدهد انیمیشنها را به Scrolling متصل کنید و در نتیجه فرصتهای جدیدی برای تعامل ایجاد کنید. این دوره نشان میدهد که چگونه توسعه دهندگان وب و توسعه دهندگان برنامه میتوانند از اسکرول و اختلاف منظر برای برنامه ریزی سبکهای جدید رابط استفاده کنند. مربی Ray Villalobos نحوه سفارشیسازی CSS برای رفتارهای پیمایشی، ایجاد انیمیشنهای CSS، ایجاد انیمیشنهای مبتنی بر پیمایش، استفاده از ScrollMagic، tween و استفاده از (GreenSock Animation Platform (GSAP را نشان میدهد. وی کلاسهای pseudo، عناصر، استفاده از خصوصیات تبدیل، توالی، اختلاف منظر با JavaScript و موارد دیگر را پوشش میدهد.
مهارت ها
CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
سرفصل ها
0. مقدمه
- 01 - چرا انیمیشن های اسکرول مفید هستند
- 02 - استفاده از تمرینات این دوره
- 03 - استفاده از GitHub Codespaces با این دوره
1. اسکرول ساده با CSS
- 04 - موقعیت یابی
- 05 - طبقات و عناصر شبه
- 06 - نمایشگر و فلکس باکس
- 07 - خواص پس زمینه
- 08 - اضافه کردن یک تصویر پس زمینه
- 09 - خواص پس زمینه جایگزین
2. ایجاد انیمیشن های CSS
- 10 - کار با خاصیت transform
- 11 - استفاده از خواص تبدیل
- 12 - درک انتقال
- 13 - استفاده از انتقال برای متحرک سازی
- 14 - خاصیت انیمیشن
- 15 - ایجاد فریم های کلیدی برای انیمیشن
- 16 - فریم های کلیدی جادویی
- 17 - توالی انیمیشن ها
3. انیمیشن مبتنی بر اسکرول
- 18 - بخش هیولاهای جدید خود را بسازید
- 19 - پیمایش روان روی کلیک لینک ها
- 20 - درخواست قاب انیمیشن
- 21 - افزودن کلاس ها هنگام اسکرول
- 22 - حذف نشانه هدر هنگام اسکرول
- 23 - پیمایش اختلاف منظر با جاوا اسکریپت
- 24 - تعیین زمانی که یک شی برای اولین بار ظاهر می شود
- 25 - متحرک سازی هنگام ورود اشیا به صفحه
- 26 - تصادفی کردن ظاهر
4. استفاده از ScrollMagic
- 27 - افزودن HTML نهایی برای انیمیشن
- 28 - دانلود و نصب ScrollMagic
- 29 - تغییر کلاسها
- 30 - پیکربندی صحنه های خود
5. توئینینگ با GSAP
- 31 - نصب GSAP
- 32 - اضافه کردن یک توئین GSAP
- 33 - کاهش توئین با GSAP
- 34 - کنترل انیمیشن ها با اسکرول
- 35 - سنجاق عناصر
6. قرار دادن همه چیز با هم
- 36 - متحرک سازی چتر نجات
- 37 - اضافه کردن یک توئین GSAP مبهم
نتیجه
- 38 - مراحل بعدی
دوره های مرتبط
- دوره آموزشی جعبه ابزار CSS: نکات و روشهای طراحی و چینش صفحه
- دوره آموزشی CSS: طرحبندیهای پیشرفته با Grid
- دوره آموزشی CSS برای توسعهدهندگان
- دوره آموزشی HTML، CSS و جاوااسکریپت: ساخت وب
- دوره آموزشی طرح بندی قابل دسترسی برای وب
- دوره آموزشی فرم های HTML: قابلیت دسترسی
- دوره آموزشی مقدمه ای بر طراحی و توسعه وب
- دوره آموزشی آن را تمرین کن: طرح بندی CSS