با GSAP و ScrollTrigger انیمیشن های اسکرول افقی ایجاد کنید

در سراسر دموهای آتی که برای مبتدیان مناسب هستند، نشانه گذاری و مفهوم کمابیش یکسان باقی خواهد ماند. یک گالری از تصاویر وجود خواهد داشت که در ابتدا تنها عکس اول قابل مشاهده خواهد بود. با اسکرول کردن، گالری چسبناک می شود و در آن نقطه، تمام تصاویر آن به روش های مختلف ظاهر می شوند.

برای همه دموها، من تنظیم کرده ام end ارزش به +=500% که باعث طولانی تر شدن انیمیشن می شود. به این ترتیب، گالری برای 500٪ پیمایش اضافی پس از شروع اولیه، چسبناک خواهد بود. به عنوان مثال، اگر موقعیت شروع 1000 پیکسل باشد، موقعیت پایان حدود 6000 پیکسل خواهد بود. برای مشاهده این عمل، موقعیت های اسکرول شروع و پایان نمونه ScrollTrigger خود را چاپ کنید. اگر جلوه چسبناک سریعتر را ترجیح می دهید، مقدار کوچکتری را انتخاب کنید.

1. انیمیشن افقی راست به چپ

در این مورد اول، ما تعدادی اسلاید تمام صفحه داریم. همانطور که پیمایش می کنیم، همه اسلایدها را جابه جا می کنیم به طور همزمان با دادن یک مقدار X ترجمه منفی به سمت چپ.

2. انیمیشن افقی چپ به راست

اما اگر بخواهیم انیمیشن قبلی را معکوس کنیم و به حرکت راست به چپ دست پیدا کنیم، چه؟

در چنین حالتی، ما را تعیین می کنیم dir="rtl" به ظرف اسلایدها و یک مقدار X ترجمه مثبت به همه اسلایدها نسبت داده شود.

3. انیمیشن افقی راست به چپ (تودرتو)

در این مثال کمی پیچیده تر، ما بر روی اولین نسخه آزمایشی ساخته شده و از ScrollTrigger استفاده می کنیم containerAnimation تکنیک ایجاد nScrollTriggers را ارزیابی کرد. گفته می شود، در طول حرکت افقی اسلایدهای ما، ما این کار را انجام خواهیم داد تماشا کنید که زیرنویس های آنها در معرض دید قرار می گیرد و سپس محتوای آنها را متحرک کنید.

4. انیمیشن افقی راست به چپ (جایگزین)

در ادامه، اجازه دهید عرض اسلاید را بسته به اندازه صفحه نمایش، حداکثر 50 ولت وات تغییر دهیم. این بار به جای جابجایی اسلایدها، لفاف آنها را جابه جا می کنیم.

مقدار حرکتی که باید پیمایش کنیم از کم کردن عرض ظرف اسلایدها (شامل محتوای غیر قابل مشاهده) از عرض پنجره حاصل می شود.

آخرین اما نه کم اهمیت ترین، برای پاسخگو بودن افکت، از مقادیر مبتنی بر تابع استفاده می کنیم (این صفحه را نیز ببینید) و اعمال می کنیم invalidateOnRefresh: true از طریق تنظیمات پیکربندی ScrollTrigger.

5. انیمیشن افقی بالا به پایین (بخش های پشته ای)

در این سناریو، اسلایدها را روی هم قرار می دهیم و زیرنویس آنها را پنهان می کنیم. همانطور که پیمایش می کنیم، هر اسلاید در بالای اسلاید قبلی ظاهر می شود در حالی که عنوان آن محو می شود. همانطور که اسلایدها روی هم چیده می شوند، آنها را به صورت متوالی با تکان دادن آنها نشان خواهیم داد.

به استفاده از نماد "<" توجه کنید که باعث می شود انیمیشن زیرنویس ها در ابتدای انیمیشن اسلاید مرتبط اتفاق بیفتد.

به همین ترتیب، می توانیم یک انیمیشن از پایین به بالا اعمال کنیم.

6. انیمیشن افقی راست به چپ (بخش های پشته ای)

به دنبال نسخه ی نمایشی قبلی، در اینجا ما همان مفهوم انیمیشن را داریم. این بار، حرکت انیمیشن از راست به چپ رخ می دهد در حالی که زیرنویس ها به سمت چپ می مانند.

به همین ترتیب، می توانیم یک انیمیشن از چپ به راست اعمال کنیم.

7. انیمیشن افقی مسیر کلیپ (بخش های پشته ای)

در آخرین نسخه نمایشی، اسلایدها روی هم قرار می گیرند اما با یک انیمیشن مسیر کلیپ چشمگیر از پایین به بالا ظاهر می شوند.

برای این نوع انیمیشن ابتدا مناسب را اختصاص می دهیم z-index مقادیر به اسلایدها

البته، ما می توانیم جهت انیمیشن مسیر کلیپ را به دلخواه تغییر دهیم.

نتیجه گیری

این به پایان می رسد یک آموزش GSAP، مردم! امیدوارم از بخش های چسبنده مبتنی بر اسکرول که امروز ساختیم لذت برده باشید و الهام گرفته باشید! ادامه دهید، در اسناد ScrollTrigger شیرجه بزنید، خلاق باشید و چیزهای شگفت انگیزتری بسازید!

آخرین اما نه کم اهمیت، من تمام دموهای این آموزش را به مجموعه CodePen اضافه کرده ام. حتما آن را بررسی کنید و کمی به آن عشق بورزید!

مثل همیشه، خیلی ممنون که خواندید!