آموزش CSS: پیمایش و اختلاف منظر

مقدمه Introduction

• چرا پیمایش انیمیشن ها مفید هستند؟ Why are scrolling animations useful?

• استفاده از تمرینات این دوره Using the exercises for this course

1. پیمایش ساده با CSS 1. Simple Scrolling with CSS

• تثبیت موقعیت Positioning

• کلاس ها و عناصر شبه Pseudo classes and elements

• نمایش و flexbox Display and flexbox

• ویژگی های پس زمینه Background properties

• اضافه کردن تصویر پس زمینه Adding a background image

• ویژگی های پس زمینه جایگزین Alternative background properties

2. ایجاد انیمیشن های CSS 2. Creating CSS Animations

• کار با خاصیت تبدیل Working with the transform property

• با استفاده از ویژگی های تبدیل Using transform properties

• درک انتقالات Understanding transitions

• با استفاده از انتقال برای تحریک کردن Using transitions to animate

• خاصیت انیمیشن The animation property

• ایجاد کلیدهای کلیدی برای انیمیشن Creating keyframes for animation

• کلیدهای جادویی Magic keyframes

• دنباله های انیمیشن Sequencing animations

3. انیمیشن مبتنی بر پیمایش 3. Scroll-Based Animation

• بخش جدید هیولا خود را بسازید Building your new monsters section

• پیمایش صاف در کلیک روی پیوند Smooth scrolling on link clicks

• Requestanimationframe Request animation frame

• هنگام پیمایش کلاس اضافه کنید Adding classes when scrolling

• هنگام پیمایش ، نشانه سر را حذف کنید Removing the header cue when scrolling

• پیمایش اختلاف منظر با JavaScript Parallax scrolling with JavaScript

• تعیین زمان ظاهر شدن یک شی Determining when an object first appears

• هنگام ورود اشیاء به صفحه متحرک Animating when objects enter the screen

• تصادفی کردن ظاهر Randomizing the appearance

4- با استفاده از ScrollMagic 4. Using ScrollMagic

• اضافه کردن HTML نهایی برای انیمیشن Adding final HTML for animation

• ScrollMagic را بارگیری و نصب کنید Downloading and installing ScrollMagic

• کلاس های تعدیل Toggling classes

• پیکربندی صحنه های شما Configuring your scenes

5- اتصال با GSAP 5. Tweening with GSAP

• نصب GSAP Installing GSAP

• افزودن فاصله بین GSAP Adding a GSAP tween

• سهولت توییت با GSAP Easing tweens with GSAP

• کنترل انیمیشن ها با پیمایش Controlling animations with scroll

• عناصر پین کردن Pinning elements

6. قرار دادن آن همه با هم 6. Putting It All Together

• متحرک کردن چتر نجات Animating the parachute

• افزودن یک اتصال GSAP مبهم Adding a staggered GSAP tween

نتیجه Conclusion

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