effect اثر باند لاستیکی موبایل با trig.js

ek3nk4r 2025-03-22

0 1 خواندن این مطلب 1 دقیقه زمان میبرد

effect اثر باند لاستیکی موبایل با trig.js

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

تا به حال خواسته اید هنگام پیمایش به بالا یا پایین یک صفحه ، به آن اثر باند لاستیکی الاستیک دست یابید؟ 🤯 با trig.js، با پیش فرض امکان پذیر است کلاسهای CSS trig-scroll-top وت trig-scroll-bottomبشر بیایید شیرجه بزنیم! 🔥

فهرست مطالب

🎬 اثر در عمل

در اینجا آنچه ما ایجاد خواهیم کرد:

➡ هنگام پیمایش به بالا، عناصر کشیده شده و به عقب برگشته اند.
➡ هنگام پیمایش به پایین، عناصر قبل از چرت زدن کشیده می شوند.

نسخه ی نمایشی را بررسی کنید: مثال Codepen
<br />

🛠 تنظیم آن (فوق العاده ساده!)

1⃣ شامل trig.js

اگر قبلاً این کار را نکرده اید ، چنگ بزنید trig.js:

"https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js">

یا از طریق NPM نصب کنید:

npm install trig-js

2⃣ اثر باند لاستیکی با CSS

حال ، بیایید چند ساده اضافه کنیم جادوی CSS برای ایجاد اثر کششی:

.trig-scroll-top .pageContainer{
  animation:rubberBandTop 1.5s ease-out;
}
.trig-scroll-bottom .pageContainer{
  animation:rubberBandBottom 1.5s ease-out;
}
@keyframes rubberBandTop {
  10% {
    transform:translateY(0px);
  }

  20% {
    transform:translateY(100px);
  }

  40% {
    transform:translateY(-20px);
  }

  60% {
    transform:translateY(40px);
  }

  100% {
    transform:translateY(0px);
  }
}
@keyframes rubberBandBottom {
  10% {
    transform:translateY(0px);
  }

  20% {
    transform:translateY(-100px);
  }

  40% {
    transform:translateY(20px);
  }

  60% {
    transform:translateY(-40px);
  }

  100% {
    transform:translateY(0px);
  }
}