My Parallax

by Tyler N.

HTML

<header></header>
<div class="parallax-container">
    
    <ul class="parallax">
        <li class="one">
            Here is some content for the FIRST list-item
        </li>
        <li class="two">
            Here is some content for the SECOND list-item
        </li>
        <li class="three">
            Here is some content for the THIRD list-item
        </li>
    </ul>
</div>

CSS

html * {
	box-sizing: border-box;
}
body {
	margin: 0;
}

.parallax-container {
    position: relative;
}

.parallax-container ul {
    height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.parallax-container ul li {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    color: #FFF;
    padding-top: 25%;
}

.parallax-container ul li:first-child {
    background-color: red;
    position: fixed;
	background: url(http://placekitten.com/g/500/500) no-repeat center center;
	background-size: cover;
}

.parallax-container ul li:nth-child(2) {
    background-color: green;
	padding-top: 30%;
	background: url(http://placekitten.com/g/800/800) no-repeat center center;
	background-size: cover;
}

.parallax-container ul li:last-child {
    background-color: blue;
	padding-top: 35%;
	background: url(http://placekitten.com/g/300/300) no-repeat center center;
	background-size: cover;
}

JavaScript

$(function() {

    var $body				= $('body');
	var $header				= $('header');
	var headerHeight		= $header.outerHeight();
	var $slide				= $('.parallax-container ul li');
	var slideH				= $slide.outerHeight();
	var homepage			= $('body').hasClass('home');
	var wSt					= $(window).scrollTop();
	var winHeight			= $(window).outerHeight();
	var carouselSlide		= $slide.length;
	var slides;
	var lastScrollTop		= 0;
	var triggerThisEvent	= 0;

	function isMobile() {
		var a = navigator.userAgent || navigator.vendor || window.opera;
		if ((/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|p     ...