• پست الکترونیک
    • گفتگو کنید
    • نماد پر
    • ابزارک ها

    • شما 3 اعلان دارید 4

    • پردازش تحویل

      10 دقیقه ی قبل

    • سفارش کامل شد

      1 ساعت پیش

    • بلیط های تولید شده

      3 ساعت پیش

    • تحویل کامل

      6 ساعت پیش
    • عین چاوز

      لورم ایپسوم به سادگی ساختگی است...

      32 دقیقه پیش

    • اریکا هیوز

      لورم ایپسوم به سادگی ساختگی است...

      58 دقیقه پیش

    • کوری توماس

      لورم ایپسوم به سادگی ساختگی است...

      1 ساعت قبل

    • همه را ببین
جدید
ایمی والتر

اداره منابع انسانی

  • 19.8 هزار

    دنبال کننده

  • 2 سال

    تجربه

  • 95.2 هزار

    دنبال کرده

اسکرول آشکار

  1. صفحه اصلی
  2. انیمیشن
  3. اسکرول آشکار
مثال اسکرول آشکار
نحوه استفاده از اسکرول آشکار (سفارشی کردن گزینه ها با توجه به نیازها)
.revealکلاس را به هر برچسبی برای انیمیشن Archive مانند این اضافه کنید
// تابع زیر نمونه ای از نحوه شروع به کار کردن آشکار است
if (Modernizr.csstransforms3d) {
window.sr = ScrollReveal();
sr.reveal('.reveal', {
duration: 800,
delay: 400,
reset: true,
easing: 'linear',
scale: 1
});
}
گزینه های Reveal Settings را اسکرول کنید
// 'پایین'، 'چپ'، 'بالا'، 'راست'
origin: 'bottom'
// می تواند هر فاصله CSS معتبری باشد، به عنوان مثال '5rem'، '10%'، '20vw'، و غیره.
distance: '20px'
// زمان بر حسب میلی ثانیه.
duration: 500 delay: 0
// زوایای شروع بر حسب درجه، از این مقادیر به 0 در همه محورها تغییر می کند.
rotate: { x: 0, y: 0, z: 0 }
// شروع مقدار کدورت، قبل از انتقال به کدورت محاسبه شده.
opacity: 0
// مقدار مقیاس شروع، از این مقدار به 1 تغییر می کند
scale: 0.9
// هر گونه ساده سازی معتبر CSS را می پذیرد، به عنوان مثال 'ease'، 'ease-in-out'، 'linear'، و غیره.
easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)'
// محفظه آشکار پیش فرض است. شما می توانید یکی از این موارد را ارسال کنید:
// گره DOM، به عنوان مثال document.querySelector('.fooContainer')
// انتخابگر، به عنوان مثال '.fooContainer'
easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)'
// true/false برای کنترل انیمیشن های آشکار در موبایل.
mobile: true
// true: آشکار می شود هر بار که عناصر قابل مشاهده می شوند
// false: آشکار می شود یک بار به عنوان عناصر قابل مشاهده هستند
reset: false
// 'همیشه' — تأخیر برای همه انیمیشن های آشکار
// 'یک بار' — تأخیر فقط اولین باری که آشکار می
شود // 'onload' - تأخیر فقط برای انیمیشن هایی که با بار اول راه اندازی می شوند
useDelay: 'always'
// زمانی که یک عنصر در viewport در نظر گرفته می شود تغییر دهید. مقدار پیش فرض
// از 0.20 به این معنی است که 20٪ از یک عنصر باید قابل مشاهده باشد تا آشکار شود.
viewFactor: 0.2
// مقادیر پیکسلی که مرزهای ظرف را تغییر می دهند.
// مثلاً «{ top: 48 }» را تنظیم کنید، اگر یک نوار ابزار ثابت با ارتفاع 48 پیکسل دارید.
// --
// کمک بصری: https://scrollrevealjs.org/assets/viewoffset.png
viewOffset: { top: 0, right: 0, bottom: 0, left: 0 }
// تماس‌هایی که برای هر عنصر راه‌اندازی فعال می‌شوند، آشکار و بازنشانی می‌شوند.
beforeReveal: function (domEl) {}
BeforeReset: تابع (domEl) {}،
// تماس‌هایی که برای هر عنصر تکمیل‌شده شلیک می‌شوند، آشکار و بازنشانی می‌شوند.
afterReveal: function (domEl) {},
afterReset: تابع (domEl) {}