چگونه با GSAP جلوه های افقی را بسازیم

اجازه دهید به شما نشان دهم که چگونه با کتابخانه انیمیشن جاوا اسکریپت GSAP، خیمه های بی نهایت ایجاد کنید. این یک الگوی UX رایج است که مطمئنم در بسیاری از سایت ها دیده اید.

آموزش های قبلی GSAP

در گذشته، من به شما نشان داده‌ام که چگونه از GSAP برای ایجاد جلوه‌های مختلف مانند جلوه‌های شناور مکان‌نما، افکت انیمیشن بارگذاری صفحه و گالری تصاویر قابل کشیدن استفاده کنید.

فرآیند

مطمئناً می‌توانید با متحرک کردن آن، خیمه‌های فقط CSS ایجاد کنید transform ویژگی. با این حال، در این آموزش، نحوه ساخت آنها با استفاده از GSAP را مورد بحث قرار خواهیم داد تا بتوانیم از تمام خوبی های اضافی این کتابخانه استفاده کنیم.

در ساده ترین شکل آن، تنها چیزی که برای ایجاد یک حاشیه افقی و عمودی با GSAP نیاز داریم، استفاده از آن است horizontalLoop() و verticalLoop() توابع کمکی

در مورد ما، ما فقط بر روی خیمه های افقی تمرکز می کنیم زیرا محبوبیت بیشتری دارند.

پایه افقی پایه

در ساده ترین پیاده سازی، نسخه ی نمایشی زیر را در نظر بگیرید که در آن ما بی نهایت برخی از لوگوها را متحرک می کنیم:

جاوا اسکریپت مورد نیاز به شرح زیر است:

1

window.addEventListener("load", function () {

2

  horizontalLoop(".marquee-item", {

3

    repeat: -1,

4

    paddingRight: 40,

5

    speed: 0.5,

6

  });

7

});

بیایید توجه کنیم paddingRight ویژگی پیکربندی ما از مقداری استفاده می کنیم که با فاصله (40px) بین آیتم های خیمه ای مطابقت دارد. ما این کار را برای جلوگیری از همپوشانی بین عناصر اول و آخر انجام می دهیم و فضایی متناسب با فضای عناصر دیگر به آنها می دهیم. گفت، اگر قرار دهید paddingRight: 0، در نهایت به این نتیجه خواهید رسید:

خیمه شب بازی افقی با توقف

در این مورد، هر آیتم خیمه شب بازی حاوی همان متن و یک انیمیشن Lottie است. برای جلوگیری از متورم شدن HTML خود، آیتم‌های marquee را با استفاده از جاوا اسکریپت تولید می‌کنیم. البته، در یک سناریوی واقعی، می‌توانیم ویژگی‌های ARIA را برای بهبود دسترسی به صفحه نیز قرار دهیم.

هر بار که ماوس را روی یک آیتم نگه می‌داریم، خیمه شب بازی مکث می‌کند. برای رسیدن به این هدف، از pause() و play() روش هایی که در جدول زمانی GSAP در دسترس هستند. برای دیدن جلوه در این نسخه نمایشی به پایین صفحه بروید:

خیمه های افقی با جهت معکوس

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

جهت آنها توسط مقدار تعیین می شود data-reversed ویژگی HTML.

چیزی که این دمو را جالب می کند این است که ما از GSAP استفاده می کنیم matchmedia() روشی برای اعمال متفاوت paddingRight و speed مقادیر ویژگی بسته به اندازه صفحه نمایش. حتما آن را با تغییر اندازه پنجره مرورگر خود تست کنید.

هنگام نمایش، خیمه های افقی را پخش کنید

در نسخه ی نمایشی زیر، پلاگین ScrollTrigger GSAP را وارد بازی می کنیم و مارکی ها را فقط زمانی که در معرض دید هستند پخش می کنیم. به این ترتیب ما تمام تلاش خود را می کنیم تا اطمینان حاصل کنیم که بازدیدکنندگان سایت همه موارد متحرک ما را خواهند دید.

مجدداً، از بازرس مرورگر خود استفاده کنید تا نحوه توقف انیمیشن ها را در هنگام خروج مارکی مربوطه از viewport آزمایش کنید.

افقی مانند لغزنده

در این مثال، خیمه شب بازی ما مانند یک نوار لغزنده رفتار می کند. به طور خودکار پخش می شود و فلش هایی برای پیمایش به جلو و عقب وجود دارد. علاوه بر این، ما از GSAP استفاده می کنیم قابل کشیدن پلاگین برای فعال کردن قابلیت کشیدن با عبور از draggable: true ویژگی پیکربندی به horizontalLoop() تابع.

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

یک بار دیگر، اندازه پنجره مرورگر خود را تغییر دهید تا نحوه تغییر طرح را آزمایش کنید

نتیجه

امیدواریم از خیمه‌های GSAP که ما ساخته‌ایم لذت برده باشید و دانش و الهام کافی برای شروع ساختن خود کسب کرده باشید!

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

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