ترکیبی عالی برای انیمیشن های اسکرول

کتابخانه های مورد نیاز

برای این آموزش، فراتر از فایل های مورد نیاز fullPage.js و Animate.css، فایل CSS Bootstrap 5 را نیز گنجانده ام. این حیاتی نیست. من آن را فقط به این دلیل اضافه کردم که می خواستم از سبک های بوت استرپ استفاده کنم.

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

فرآیند

صفحه ما شامل چهار بخش است. هر کدام صفحه را پر می کنند (با تشکر از fullPage). کاربران با پیمایش یا پیمایش از طریق پیوندهای صفحه‌بندی در سمت راست به بخش بعدی خواهند رفت. هر بار که این اتفاق می‌افتد، برخی انیمیشن‌ها را فعال می‌کنیم، مثلاً تصاویر را در موقعیت خود قرار می‌دهیم.

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

ابتدا صفحه کامل را کمی سفارشی کنید

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

از onLeave Callback استفاده کنید

ما باید از توابع “بازگشت به تماس” که fullPage ارائه می کند استفاده کنیم. به طور خاص، در مورد ما، می‌خواهیم بخش‌های دوم، سوم و چهارم را متحرک کنیم، بنابراین از onLeave پاسخ به تماس اگر می خواستیم قسمت اول را متحرک کنیم، می توانستیم از آن استفاده کنیم afterLoad پاسخ به تماس به همین ترتیب برای متحرک سازی اسلایدها باید از آن استفاده کنیم afterSlideLoad و onSlideLeave پاسخ به تماس ها

به صورت پویا انیمیشن ها را اضافه کنید

انیمیشن های CSS ارائه شده توسط کتابخانه Animate.css را به صورت پویا اضافه می کنیم.

استفاده کنید animate-delay ویژگی CSS

ما همچنین عناصر را به صورت متوالی با استفاده از متحرک می کنیم animate-delay ویژگی CSS. اکنون، بیایید به ساختار صفحه شیرجه بزنیم!

ساختار بخش ها

تمام بخش های صفحه ساختار مشابهی خواهند داشت.

بیایید نشانه گذاری بخش دوم را در نظر بگیریم که در آن سه تصویر و یک دکمه داریم:

1

<section class="section text-center">

2

  <div class="container">

3

    <div class="row">

4

      <div class="col-sm-4 animate__animated" data-animation="animate__fadeInUpBig" style="--index: 1">

5

        <img width="300" height="350" src="nature.jpeg" class="img-fluid" alt="">

6

      </div>

7

      <div class="col-sm-4 animate__animated" data-animation="animate__fadeInUpBig" style="--index: 2">

8

        <img width="300" height="350" src="people.png" class="img-fluid" alt="">

9

      </div>

10

      <div class="col-sm-4 animate__animated" data-animation="animate__fadeInUpBig" style="--index: 3">

11

        <img width="300" height="350" src="tech.jpeg" class="img-fluid" alt="">

12

      </div>

13

    </div>

14

    <div class="last animate__animated" data-animation="animate__rollIn" style="--index: 6">

15

      <button type="button" class="btn btn-lg">A Simple Button</button>

16

    </div>

17

  </div>

18

</section>

در اینجا ما اضافه می کنیم animate__animated کلاس به عناصری که می خواهیم متحرک سازی کنیم. هر یک از آنها افکت انیمیشن متفاوتی دریافت خواهند کرد. این به ارزش آنها بستگی دارد data-animation صفت. تمام مقادیر ممکن از نام‌های انیمیشن موجودی که Animate.css ارائه می‌کند، می‌آیند.

هر عنصر همچنین یک سبک درون خطی دریافت خواهد کرد. ارزش از index متغیر CSS تعیین خواهد کرد شروع انیمیشن آنها این تکنیک که در آموزش های دیگر دیده ایم، به ما امکان می دهد انیمیشن های خیره کننده ای بسازیم.

در نهایت، آخرین عنصر متحرک (عنصر با بزرگترین index ارزش) را دریافت خواهد کرد last کلاس در یک لحظه خواهید دید که چرا.

سفارشی سازی تمام صفحه

بیایید در مورد دو سفارشی سازی fullPage که قرار است انجام دهیم بحث کنیم.

اول، fullPage چند ویژگی برای مشخص کردن رفتار اسکرول بخش هایی مانند scrollOverflow یکی که به طور پیش فرض روی آن تنظیم شده است true. این یک اسکرول برای آن بخش خاص در صورتی که محتوای آن بزرگتر از ارتفاع آن باشد ایجاد می کند. با این حال، این می تواند مشکل ایجاد کند. در صورتی که عناصر متحرک از دید خارج شوند، نوارهای اسکرول فوراً در طول جلوه های انیمیشن ظاهر می شوند. این چیزی است که در مورد ما اتفاق می افتد!

برای جلوگیری از این رفتار، ابتدا پیمایش بخش را غیرفعال می‌کنیم و تنها زمانی که آخرین عنصر متحرک (یکی با last class) بخش هدف انیمیشن خود را به پایان می رساند.

ثانیا، در صفحه نمایش های بزرگ (این امر زمانی منطقی است که ارتفاع نیز به اندازه کافی بزرگ باشد) جایی که ما عناصر را متحرک می کنیم، می خواهیم fp-overflow عنصری که ارتفاع کامل بخش را اشغال کند و فقط در مرکز بخش نباشد.

برای غلبه بر این مشکل چیدمان، از مزایای آن استفاده خواهیم کرد حاشیه های خودکار!

روش دیگر، به جای افزودن این سفارشی سازی، می توانیم از رویکرد و مجموعه داخلی fullPage استفاده کنیم scrollOverflow به false. با این حال، این کار از نمایش محتوای مملو از بخش‌ها جلوگیری می‌کند و در مواردی که کنترل کامل محتوای بخش‌ها را نداریم ممکن است خطرناک باشد.

در مجموع، در اینجا سبک های مهم وجود دارد:

1

/*CUSTOM VARIABLES HERE*/

2

3

.fp-overflow {

4

  display: flex;

5

  height: 100vh;

6

}

7

8

.fp-overflow > * {

9

  padding-top: 5vh;

10

  padding-bottom: 5vh;

11

  margin-top: auto;

12

  margin-bottom: auto;

13

}

14

15

.animate__animated {

16

  animation-delay: calc(var(--index) * 0.3s);

17

}

18

19

@media (min-width: 1300px) {

20

  .fp-is-overflow > .fp-overflow {

21

    overflow: hidden;

22

  }

23

}

جاوا اسکریپت: مقداردهی اولیه صفحه کامل

با در نظر گرفتن تمام موارد فوق، در اینجا مقدار اولیه پلاگین آمده است:

1

new fullpage("#fullpage", {

2

  navigation: true,

3

  licenseKey: "gplv3-license",

4

  onLeave: function (origin, destination, direction, trigger) {

5

    handleAnimations(destination);

6

  }

7

});

8

9

const handleAnimations = (destination) => {

10

  if (window.matchMedia("(min-width: 1300px)").matches) {

11

    const destinationAnimatedEls = destination.item.querySelectorAll(

12

      ".animate__animated"

13

    );

14

    for (const el of destinationAnimatedEls) {

15

      const dataset = el.dataset;

16

      el.classList.add(dataset.animation);

17

      if (el.classList.contains("last")) {

18

        el.addEventListener("animationend", () => {

19

          destination.item.querySelector(".fp-overflow").style.overflow =

20

            "auto";

21

        });

22

      }

23

    }

24

  }

25

};

توجه کنید به animationend رویدادی که برای تعیین زمان آزاد شدن نوار اسکرول بخش ها استفاده می کنیم.

در این مرحله، ما روی چیزهایی که در مورد تغییر اندازه هستند نیز تمرکز نمی کنیم.

نتیجه

انجام شد، مردمی! در این آموزش، یاد گرفتیم که چگونه می‌توانیم کتابخانه‌های fullpage.js و Animate.css را برای ساخت انیمیشن‌های مبتنی بر اسکرول ترکیب کنیم.

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

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