Breaking News: Grepper is joining You.com. Read the official announcement!

scroll box animation

Sasuke Khan answered on September 22, 2022 Popularity 3/10 Helpfulness 1/10

answer scroll box animation

scroll box animation

Comment

<div class="box show">content</div>
    <div class="box">content</div>
    <div class="box">content</div>
    <div class="box">content</div>
    <div class="box">content</div>

    <script>
      const boxes = document.querySelectorAll('.box');
      window.addEventListener('scroll', checkboxes);

      checkboxes();

      function checkboxes() {
        const triggerBottom = (window.innerHeight / 5) * 4;

        boxes.forEach((box) => {
          const boxTop = box.getBoundingClientRect().top;

          if (boxTop < triggerBottom) {
            box.classList.add('show');
          } else {
            box.classList.remove('show');
          }
        });
      }
    </script>

Popularity 3/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: animation box scroll whatever

Link to this answer
Share Copy Link

Contributed on Sep 22 2022

Sasuke Khan

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

scroll box animation

Contents

More Related Answers

scroll box animation

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.