Image fade in out on scroll

index.html

<style type="text/css">
  

  .article-body p {
  	width: 90%;
  	max-width: 700px;
  	font-size: 17px;
  	font-family: Tiempos Text, serif;
  	margin: 15px auto;
  }

  figure {
  	margin: 20px 0px;
  }

  .article-body figure img {
    opacity: .25;
    transition: opacity 1s linear;
    width: 100%;
  }
  
  .article-body figure img.fade-img--scrolled-into-view { 
    opacity: 1; 
  }
  

</style>

<div class="article-body">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci. Ut ornare lectus sit amet est placerat in egestas. Nisi est sit amet facilisis. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Sed faucibus turpis in eu mi. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus. Dignissim sodales ut eu sem. Vitae elementum curabitur vitae nunc sed velit dignissim sodales. At lectus urna duis convallis convallis tellus. Ut tristique et egestas quis ipsum suspendisse ultrices gravida. Turpis nunc eget lorem dolor sed viverra. Id semper risus in hendrerit gravida rutrum. Augue eget arcu dictum varius duis. Aenean et tortor at risus viverra adipiscing at in. Posuere morbi leo urna molestie at elementum. Enim sit amet venenatis urna cursus eget nunc scelerisque. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Proin fermentum leo vel orci porta. Vestibulum sed arcu non odio.

<p>Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Lacus sed turpis tincidunt id aliquet. Est ullamcorper eget nulla facilisi etiam dignissim. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Sed vulputate odio ut enim. Ornare aenean euismod elementum nisi quis eleifend. Eros donec ac odio tempor. Nec feugiat nisl pretium fusce id velit ut. Quam adipiscing vitae proin sagittis nisl rhoncus mattis. Nunc sed id semper risus. Duis at consectetur lorem donec massa.

	<p>Velit euismod in pellentesque massa placerat duis. Sed risus ultricies tristique nulla. Elementum integer enim neque volutpat ac. Volutpat consequat mauris nunc congue nisi. Nam aliquam sem et tortor consequat. Risus ultricies tristique nulla aliquet enim tortor. Imperdiet massa tincidunt nunc pulvinar sapien et ligula. Vel pharetra vel turpis nunc eget lorem dolor sed. Sed augue lacus viverra vitae congue eu consequat ac felis. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Sed turpis tincidunt id aliquet. Sed adipiscing diam donec adipiscing. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Diam maecenas ultricies mi eget mauris pharetra et ultrices. Et netus et malesuada fames. At tempor commodo ullamcorper a.

<p>Sapien et ligula ullamcorper malesuada proin libero nunc. Sed risus pretium quam vulputate dignissim suspendisse in. Tristique nulla aliquet enim tortor at auctor urna nunc id. Adipiscing elit duis tristique sollicitudin nibh. Augue eget arcu dictum varius duis at. Nibh sed pulvinar proin gravida hendrerit lectus a. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Eu nisl nunc mi ipsum faucibus vitae aliquet. Sit amet cursus sit amet dictum sit amet justo donec. Sed vulputate odio ut enim blandit volutpat maecenas. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Interdum velit euismod in pellentesque massa placerat duis. Tincidunt dui ut ornare lectus sit amet est placerat in.

<p>Pretium lectus quam id leo in vitae turpis massa sed. Magna ac placerat vestibulum lectus mauris ultrices eros in. Felis donec et odio pellentesque diam volutpat commodo sed. Amet mattis vulputate enim nulla aliquet porttitor lacus. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Facilisis sed odio morbi quis commodo odio. Netus et malesuada fames ac turpis. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Lacus suspendisse faucibus interdum posuere lorem. Tellus mauris a diam maecenas sed. Phasellus vestibulum lorem sed risus ultricies tristique. Quis commodo odio aenean sed adipiscing diam. Eu non diam phasellus vestibulum.
	<figure><img src="http://propublica.s3.amazonaws.com/projects/charts/photos/6039256.jpg"></figure>

<p>Velit euismod in pellentesque massa placerat duis. Sed risus ultricies tristique nulla. Elementum integer enim neque volutpat ac. Volutpat consequat mauris nunc congue nisi. Nam aliquam sem et tortor consequat. Risus ultricies tristique nulla aliquet enim tortor. Imperdiet massa tincidunt nunc pulvinar sapien et ligula. Vel pharetra vel turpis nunc eget lorem dolor sed. Sed augue lacus viverra vitae congue eu consequat ac felis. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Sed turpis tincidunt id aliquet. Sed adipiscing diam donec adipiscing. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Diam maecenas ultricies mi eget mauris pharetra et ultrices. Et netus et malesuada fames. At tempor commodo ullamcorper a.

<p>Sapien et ligula ullamcorper malesuada proin libero nunc. Sed risus pretium quam vulputate dignissim suspendisse in. Tristique nulla aliquet enim tortor at auctor urna nunc id. Adipiscing elit duis tristique sollicitudin nibh. Augue eget arcu dictum varius duis at. Nibh sed pulvinar proin gravida hendrerit lectus a. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Eu nisl nunc mi ipsum faucibus vitae aliquet. Sit amet cursus sit amet dictum sit amet justo donec. Sed vulputate odio ut enim blandit volutpat maecenas. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Interdum velit euismod in pellentesque massa placerat duis. Tincidunt dui ut ornare lectus sit amet est placerat in.

<p>Pretium lectus quam id leo in vitae turpis massa sed. Magna ac placerat vestibulum lectus mauris ultrices eros in. Felis donec et odio pellentesque diam volutpat commodo sed. Amet mattis vulputate enim nulla aliquet porttitor lacus. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Facilisis sed odio morbi quis commodo odio. Netus et malesuada fames ac turpis. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Lacus suspendisse faucibus interdum posuere lorem. Tellus mauris a diam maecenas sed. Phasellus vestibulum lorem sed risus ultricies tristique. Quis commodo odio aenean sed adipiscing diam. Eu non diam phasellus vestibulum.
	<figure><img src="http://propublica.s3.amazonaws.com/projects/charts/photos/1119162.jpg"></figure>
</div>


<script>
window.addEventListener("DOMContentLoaded", (event) => {

  const fadeScroll = new IntersectionObserver(
    function (items, observer) {
      items.forEach((item) => {
        if (item.isIntersecting) {
          item.target.classList.add("fade-img--scrolled-into-view");
        } else {
          item.target.classList.remove("fade-img--scrolled-into-view");
        }
      });
    },
    {
      root: null,
      rootMargin: "0px 0px -25% 0px",
      threshold: 0.25,
    }
  );

  document
    .querySelectorAll(
      "figure img"
    )
    .forEach((item) => fadeScroll.observe(item));
});

</script>