Horizontal Scroll with Mousewheel and Fade in

Fade in elements as they enter the viewport horizontally, and also allow mousewheel to scroll horizontally.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="l-canvas">
	<div class="l-main">
		<div class="l-main-h">
			<div class="l-content">
				<section>
					hello
					<div class="heading-text"><h1>Yes</h1></div>
				</section>
				<section>
					hello
					<div class="heading-text"><h1>Yes</h1></div>
				</section>
				<section>
					hello
					<div class="heading-text"><h1>Yes</h1></div>
				</section>
				<section>
					hello
					<div class="heading-text"><h1>Yes</h1></div>
				</section>
				<section>
					hello
					<div class="heading-text"><h1>Yes</h1></div>
				</section>
				<section>
					hello
					<div class="heading-text"><h1>Yes</h1></div>
				</section>
				<section>
					hello
					<div class="heading-text"><h1>Yes</h1></div>
				</section>
			</div>
		</div>
	</div>
</div>

CSS

body {
	margin: 0;
	/*overflow-x: hidden;*/
    min-width: 0 !important;
}

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*.l-canvas {
    overflow: hidden;
    margin: 0 auto;
}*/


.l-content {
	background: #eee;
	width: max-content;
	margin: 0 auto;
	width: 700vw !important;
	width: -moz-max-content !important;
	width: -webkit-max-content !important;
	width: -o-max-content !important;
	width: -ms-max-content !important;
	width: max-content !important;
}

section {
	overflow-y: hidden;
    float: left;
    width: 100vw;
	height: 100vh;
    position: relative;
	background: green;
}

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

section.come-in .heading-text h1 {
	transform: translateX(200px);
	opacity: 0;
	animation: come-in 1.5s ease forwards;
}

section.already-visible .heading-text h1 {
	transform: translateX(0);
	opacity: 1;
	animation: none;
}

@keyframes come-in {
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

JavaScript

(function(jQuery) {

	/**
   * Copyright 2012, Digital Fusion
   * Licensed under the MIT license.
   * http://teamdf.com/jquery-plugins/license/
   *
   * @author Sam Sehnert
   * @desc A small plugin that checks whether elements are within
   *     the user visible viewport of a web browser.
   *     only accounts for vertical position, not horizontal.
   */

	jQuery.fn.visible = function(partial) {

		var pickme       = jQuery(this),
			thewindow    = jQuery(window),
			viewLeft     = thewindow.scrollLeft(),
			viewRight    = viewLeft + thewindow.width(),
			_left        = pickme.offset().left,
			_right       = _left + pickme.width(),
			compareLeft  = partial === true ? _right : _left,
			compareRight = partial === true ? _left : _right;

		return ((compareRight <= viewRight) && (compareLeft >= viewLeft));

	};

})(jQuery);

var win = jQuery(window);

var allMods = jQuery("section");

allMods.each(function(i, el) {
	var el = jQuery(el);
	if (el.visible(true)) {
		el.addClass("already-visible"); 
	} 
});

win.scroll(function(event) {

	allMods.each(function(i, el) {
		var el = jQuery(el);
		if (el.visible(true)) {
			el.addClass("come-in"); 
		} 
	});

});

/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
 * Licensed under the MIT License (LICENSE.txt).
 *
 * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 * Thanks to: Seamus Leahy for adding deltaX and deltaY
 *
 * Version: 3.0.6
 * 
 * Requires: 1.2.2+
 */

(function($) {

	var types = ['DOMMouseScroll', 'mousewheel'];

	if ($.event.fixHooks) {
		for ( var i=types.length; i; ) {
			$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
		}
	}

	$.event.special.mousewheel = {
		setup: function() {
			if ( this.addEventListener ) {
				for ( var i=types.length; i; ) {
					this.addEventListener( types[--i], handler, false );
				}
			} else {
				this.onmousewheel = handler;
			}
		},

		teardown:...