<section class="image-background">
  <div id="wrapper" class="wrapper">
  <div id="container" class="container">
    <div class="photo-grid clearfix">
      <ul class="clearfix">
        <li>
          <div class="cover reveal-2"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-1-final.jpg" />
        </li>
        <li>
          <div class="cover reveal-1"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-22-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-3-final.jpg"  />
        </li>
        <li>
          <div class="cover reveal-2 colorchange-3"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-4-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-5-final.jpg" />
        </li>
        <li>
          <div class="cover reveal-1"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-7-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-6-final.jpg" />
        </li>
        <li>
          <div class="cover reveal-1"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-8-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-29-final.jpg" />
        </li>
        <li>
          <div class="cover reveal-2"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-10-final.jpg" />
        </li>
        <li>
          <div class="cover reveal-2"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-11-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-12-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-13-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-14-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-15-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-16-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-17-final.jpg" a/>
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-18-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-19-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-20-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-21-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-30-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-23-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-24-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-25-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-26-final.jpg"/>
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-27-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-28-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-9-final.jpg" />
        </li>
        <li>
          <div class="cover"></div><img src="http://gatehousenews.com/warrants/wp-content/uploads/sites/85/2018/11/mug-2-final.jpg" />
        </li>
      </ul>
    </div><!-- /photo-grid -->
  </div><!-- /container -->
</div><!-- /wrapper -->
</section>

<div class="scrolling-block">
<section class="intro-fullscroll" id="intro1">
  <h1>5.7 million warrants were found in 27 states that provided data</h1>
</section>

<section class="intro-fullscroll" id="intro2">
  <h1>239,000 of those were for violent crimes</h1>
</section>

<section class="intro-fullscroll" id="intro3">
  <h1>There were 62,381 warrants in Franklin County</h1>
</section>

<section class="intro-fullscroll" id="intro4">
  <h1>That means there was 1 warrant for every 20 people</h1>
</section>

<section class="intro-fullscroll" id="intro5">
  <h1>3,030 of those were for violent crimes</h1>
</section>
</div>

<div class="body">regular copyyyyyy</div>
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.wrapper {
  text-align: center;
}

.container {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.photo-grid {
  position: relative;
  max-width: 100%;
  word-wrap: break-word;
}

.photo-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /*border: 1px solid #bbb;*/
}

.photo-grid li {
  float: left;
  position: relative;
  width: 20%;
/*  border: 1px solid #bbb;
*/}

.scrolling-block {
  position: absolute;
  z-index: 5;
  top: 0;
}

.intro-fullscroll {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
}

.intro-fullscroll h1 {
  font-family: 'Merriweather', serif;
  font-size: 35px;
  font-weight: 300;
  max-width: 60%;
  text-align: center;
  color: #fff;
  text-shadow: 4px 4px 10px #000;
}

.cover {
    background-color: #000;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.reveal-photo {
  background-color: transparent;
}

.colorchange-red {
  background-color: rgba(71,20,0,.5);
}

/*.image-background {
  position: fixed;
  top: 0;
  z-index: 0;
}*/

@media only screen and (max-width: 960px) {
  .container {
    max-width: 960px;
  }
  
  .photo-grid li {
    width: 33.333%;
  }
  
  .photo-grid li:last-child {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .container {
    max-width: 600px;
  }  

  .photo-grid li {
    width: 33.333%;
  }
  
  .photo-grid li:last-child {
    display: inline-block;
  }
}

@media only screen and (max-width: 480px) {

  .photo-grid li {
    width: 33.333%;
  }
  
  .photo-grid li:last-child {
    display: inline-block;
  }

  .intro-fullscroll h1 {
    font-size: 20px;
    text-align: center;
    max-width: 80%;
  }
}
jQuery(document).ready(function() {
	var controller = new ScrollMagic.Controller();

	var backgroundPinScene = new ScrollMagic.Scene({duration: jQuery('.scrolling-block').height()})
							 .setPin('.image-background')
    .on("leave", function(event) {
    jQuery('newParagraphThing').fadeOut();})
							 .addTo(controller);

	// var tween1 = TweenMax.to('.reveal-1', 1, {className: '+=reveal-photo'});

	// var fadeInPics1 = new ScrollMagic.Scene({triggerElement: '#intro2'})
	// 						.setTween(tween1)
	// 						.addTo(controller);

	// var tween2 = TweenMax.to('.reveal-2', 1, {className: '+=reveal-photo'});

	// var fadeInPics2 = new ScrollMagic.Scene({triggerElement: '#intro4'})
	// 						.setTween(tween2)
	// 						.addTo(controller);

	// var tween3 = TweenMax.to('.colorchange-3', 1, {className: '+=colorchange-red'});

	// var fadeInPics2 = new ScrollMagic.Scene({triggerElement: '#intro3'})
	// 						.setTween(tween3)
	// 						.addTo(controller);

	var revealAllImages = TweenMax.to('.cover', 1, {className: '+=reveal-photo'});
	var revealAll = new ScrollMagic.Scene({triggerElement: '#intro2', triggerHook: 'onLeave', offset: 300})
							.setTween(revealAllImages)
							.addTo(controller);
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.js
  4. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js