How to disable fade in scrolling effect on mobile with javascript-CodePudding

I am using javascript to create a fade-in and fade-out effect based on scroll position. The scrolling is very jittery on mobile so I am looking to disable it completely. How can I disable this on devices under 767pixels?

I have tried implementing window.matchMedia(): But I cannot figure out how to make it work. Thank you for reading.

const scrollElements = document.querySelectorAll(".fade-up, .fade-in, .reveal");

const elementInView = (el, dividend = 1) => {
  const elementTop = el.getBoundingClientRect().top;

  return (
    elementTop <=
    (window.innerHeight || document.documentElement.clientHeight) / dividend
  );
};

const elementOutofView = (el, dividend = 1) => {
  const elementTop = el.getBoundingClientRect().top;

  return (
    elementTop > (window.innerHeight || document.documentElement.clientHeight) / dividend
  );
};

const displayScrollElement = (element) => {
  element.classList.add("is-visible");
};

const hideScrollElement = (element) => {
  element.classList.remove("is-visible");
};

const handleScrollAnimation = () => {
  scrollElements.forEach((el) => {
    if (elementInView(el, 1.05)) {
      displayScrollElement(el);
    } else if (elementOutofView(el, 1.05)) {
      hideScrollElement(el)
    }
  })
}

window.addEventListener("scroll", () => { 
  handleScrollAnimation();
});

CodePudding user response：

Scroll Reveal works pretty good for free for me.

See simple example below making bootstrap .card elements fade in.

I've changed the fade in animation duration to 2000ms in this example but check out ScrollReveal docs for loads of other cool options.

https://scrollrevealjs.org/api/duration.html

Here is simplest example below of quick usage...

Doesn't work in stack overflow code preview iframe but it works in jsfiddle, see fiddle link below

https://jsfiddle.net/joshmoto/jh18vwpy/14/

// scroll reveal js... job done :-)
ScrollReveal().reveal('.card', {
  duration: 2000 
});

.card {
  margin-bottom: 15px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://unpkg.com/[email protected]/dist/scrollreveal.js"></script>

<header>
  <nav >
    <a  href="https://scrollrevealjs.org/">ScrollReveal in Bootstrap 4</a>
  </nav>
</header>

<main >
  <div >

    <div >
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail"  />
      <div >
        <h5 >Article title</h5>
        <p >Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
        <a href="#" >Go somewhere</a>
      </div>
    </div>

    <div >
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail"  />
      <div >
        <h5 >Article title</h5>
        <p >Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
        <a href="#" >Go somewhere</a>
      </div>
    </div>

    <div >
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail"  />
      <div >
        <h5 >Article title</h5>
        <p >Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
        <a href="#" >Go somewhere</a>
      </div>
    </div>

    <div >
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail"  />
      <div >
        <h5 >Article title</h5>
        <p >Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
        <a href="#" >Go somewhere</a>
      </div>
    </div>

    <div >
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail"  />
      <div >
        <h5 >Article title</h5>
        <p >Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
        <a href="#" >Go somewhere</a>
      </div>
    </div>

    <div >
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail"  />
      <div >
        <h5 >Article title</h5>
        <p >Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
        <a href="#" >Go somewhere</a>
      </div>
    </div>

    <div >
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail"  />
      <div >
        <h5 >Article title</h5>
        <p >Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
        <a href="#" >Go somewhere</a>
      </div>
    </div>

    <div >
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail"  />
      <div >
        <h5 >Article title</h5>
        <p >Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
        <a href="#" >Go somewhere</a>
      </div>
    </div>

    <div >
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail"  />
      <div >
        <h5 >Article title</h5>
        <p >Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
        <a href="#" >Go somewhere</a>
      </div>
    </div>

    <div >
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail"  />
      <div >
        <h5 >Article title</h5>
        <p >Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
        <a href="#" >Go somewhere</a>
      </div>
    </div>

    <div >
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail"  />
      <div >
        <h5 >Article title</h5>
        <p >Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
        <a href="#" >Go somewhere</a>
      </div>
    </div>

    <div >
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail"  />
      <div >
        <h5 >Article title</h5>
        <p >Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
        <a href="#" >Go somewhere</a>
      </div>
    </div>

  </div>
</main>