Scroll Horizontal and Fade In Elements

"Stack" blocks/sections horizontally and fade in elements as they enter the viewport.

HTML

<script src="https://raw.githubusercontent.com/imakewebthings/waypoints/master/lib/noframework.waypoints.js"></script>
<div id="container">
	<section>
		<h1>1</h1>
		<div class="fader">text</div>
	</section>
	<section>
		<h1>2</h1>
		<div class="fader">text</div>
	</section>
	<section>
		<h1>3</h1>
		<div class="fader">text</div>
	</section>
	<section>
		<h1>4</h1>
		<div class="fader">text</div>
	</section>
</div>

CSS

body {
	margin: 0;
	height: 100vh;
	width: 100vw;
	overflow-y: hidden;
	position: relative;
}

#container
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: max-content;
}

section
{
	width:100vw;
	height:100vh;
	font-size: 3em;
	background:red;
	color:#fff;
	float: left;
}

section:nth-child(even) {
	background: blue;
}

section .fader {
	opacity:.2;
	transition: all 2s ease;
}

section.show .fader {
	opacity:1;
}

JavaScript

jQuery(function() {

	jQuery("section").each(function(){
  var waypoint = new Waypoint({
  element: jQuery(this),
  handler: function() {
    jQuery(this).addClass('show');
  },
  offset: '75%',
	horizontal: true
})

	});    

});