JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div id="screens">
    <div id="no" class="screen">
        <div class="q">is it?</div>
        <div class="a">No!</div>
    </div>
    <div id="yes" class="screen">
        <div class="q">is it?</div>
        <div class="a">Yes!
            <div class="b2"></div>
        </div>
        
    </div>
    <div id="api" class="screen">
        <div class="q">is it?</div>
        <div class="a">Who knows!</div>
    </div>
</div>

CSS

* {box-sizing:border-box;}
html, body {margin:0; height:100%; min-height:100%;}
#screens {background:#eee; 
    height:100%; 
    font-size:20px;
}
#screens .screen {background:red; color:white; 
    height:100%;
    position:relative;
}
#screens .screen .q {
    height:30%; padding:20px;
    background:#333 url('http://www.placekitten.com/200/200') center center fixed;
}
#screens .screen .a {
    position:relative;
    height:70%; padding:20px;
}


#screens #yes {
    background:green url('http://www.placekitten.com/300/200') center bottom no-repeat fixed;
}
#screens #yes .q {
    background-image:url('http://www.placekitten.com/220/220');
}
#screens #yes .b2 {
    height:100%; width:100px; 
    position:absolute; top:0; right:0; bottom:0;
    background:transparent url('http://www.placekitten.com/100/100') left bottom no-repeat scroll;
}


#screens #api {background:purple;}
#screens #api .q {
    background-image:url('http://www.placekitten.com/888/888');
}

JavaScript

//note to self - take a look at http://store.makerbot.com/replicator2
//http://ianlunn.co.uk/plugins/jquery-parallax/
//http://www.fontsquirrel.com/fonts/oxygen

/*
Plugin: jQuery Parallax
Version 1.1.3
Author: Ian Lunn
Twitter: @IanLunn
Author URL: http://www.ianlunn.co.uk/
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/

Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/

(function( $ ){
	var $window = $(window);
	var windowHeight = $window.height();

	$window.resize(function () {
		windowHeight = $window.height();
	});

	$.fn.parallax = function(xpos, speedFactor, outerHeight) {
		var $this = $(this);
		var getHeight;
		var firstTop;
		var paddingTop = 0;
		
		//get the starting position of each element to have parallax applied to it		
		$this.each(function(){
		    firstTop = $this.offset().top;
		});

		if (outerHeight) {
			getHeight = function(jqo) {
				return jqo.outerHeight(true);
			};
		} else {
			getHeight = function(jqo) {
				return jqo.height();
			};
		}
			
		// setup defaults if arguments aren't specified
		if (arguments.length < 1 || xpos === null) xpos = "50%";
		if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
		if (arguments.length < 3 || outerHeight === null) outerHeight = true;
		
		// function to be called whenever the window is scrolled or resized
		function update(){
			var pos = $window.scrollTop();				

			$this.each(function(){
				var $element = $(this);
				var top = $element.offset().top;
				var height = getHeight($element);

				// Check if totally above or totally below viewport
				if (top + height < pos || top > pos + windowHeight) {
					return;
				}

				$this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
			});
		}		

		$window.bind('scroll', update).resize(update);
		update();
	};
})(jQuery);


$(document).ready(function(){
	$('#no .q').parallax("50%",...