JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
	<title>111</title>
	<link href="style/style.css" rel="stylesheet" type="text/css">
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
	<script>!window.jQuery && document.write('<script src="/js/jquery-1.6.1.min.js"><\/script>')</script>
	<script src="js/parallax.js"></script>
</head>
<body>
	<!-- Первый слой -->

	<div id="wrapper" >
				<div id="parallax-bg3">
				<img id="bg3-1" src="http://beloweb.ru/demo/jquery_parallax/img/balloon.png" width="529" height="757" alt="Montgolfier hot air balloon"/>
				<img id="bg3-2" src="http://beloweb.ru/demo/jquery_parallax/img/balloon2.png" width="529" height="757" alt="Frameless parachute"/>
				<img id="bg3-3" src="http://beloweb.ru/demo/jquery_parallax/img/balloon3.png" width="446" height="713" alt="Blanchard's air balloon"/>
				<img id="bg3-4" src="http://beloweb.ru/demo/jquery_parallax/img/ground.png" width="1104" height="684" alt="Landscape with trees and cows"/>
		</div>
		
		<div id="parallax-bg2">
				<img id="bg2-1" src="http://beloweb.ru/demo/jquery_parallax/img/cloud-lg2.png" alt="cloud"/>
				<img id="bg2-2" src="http://beloweb.ru/demo/jquery_parallax/img/cloud-lg2.png" alt="cloud"/>
				<img id="bg2-3" src="http://beloweb.ru/demo/jquery_parallax/img/cloud-lg2.png" alt="cloud"/>
				<img id="bg2-4" src="http://beloweb.ru/demo/jquery_parallax/img/cloud-lg2.png" alt="cloud"/>
				<img id="bg2-5" src="http://beloweb.ru/demo/jquery_parallax/img/cloud-lg2.png" alt="cloud"/>
		</div>
		
		<!-- 3 слой -->
		<div id="parallax-bg1">
		<img id="bg1" src="http://beloweb.ru/demo/jquery_parallax/img/cloud-lg1.png" alt="Landscape with trees and cows"/>
		</div>
		
		
		
		<div id="header">
		
			<div id="logo"></div>
			
			<div id="contacts">
				<span class="code">8(3666)</span><span class="number"><b>666-666</b></span><br>
				<span class="adress">г.Ангарск, ул....

CSS

body{
	margin:0 auto;
	padding:0 auto;
    background-color: #3366CC; /* Цвет фона веб-страницы */
   
}

#wrapper{
	outline:1px solid #cc0000;
	width:100%;
	height:3500px;
	position:relative;
	background-color: #3366CC;
}

#header{
	outline:1px solid #cc0000;
	width:100%;
	height:240px;
	position:relative;
	background:linear-gradient(180deg, #061f55 0%, #0c2b77 100%);
}

#logo{
	width:300px;
	height:65px;
	position:absolute;
	top:80px;
	left:495px;
	background:url(../images/logo.png) no-repeat;
}

#contacts{
	width:200px;
	height:50px;
	position:absolute;
	top:85px;
	left:885px;
}

.code{
	color:#fff;
	font-size:25px;
}

.number{
	color:#fff;
	font-size:25px;
}

.adress{
	color:#fff;
	font-size:12px;
	line-height:30px;
}

.call{
	display:block;
	position:absolute;
	background-color:#0b2f6c;
	color:#5880bc;
	top:90px;
	left:1100px;
	text-decoration:none;
	padding:3px 10px 3px 10px;
}

.way{
	display:block;
	position:absolute;
	font-size:12px;
	color:#92f157;
	top:120px;
	left:1100px;
}

#topNav{
	width:1000px;
	height:60px;
	position:absolute;
	top:208px;
	left:300px;
	background:url(../images/top_nav_desk.png) no-repeat;
}

.nav_top{
	display:block;
	color:#839abb;
	margin-left:45px;
}

.nav_top li{
	display:block;
	float:left;
	padding:10px 10px 10px 10px;
	text-transform:uppercase;
	font-size:13px;
	margin-left:10px;
}

.nav_top li a{
	text-decoration:none;
	color:#fff;
}

.nav_top li:hover{
	background-color:#041930;
}

.nav_top li a:hover{
	border-bottom:2px solid #727e8b;
}

.home{
	position:absolute;
	top:22px;
	left:45px;
}


#parallax-bg3 {
	z-index: 3;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 940px;
	margin-left: -470px; /* move left by half element's width */
	}
	/* balloon */
	#bg3-1 {
		position: absolute;
		top: -111px;
		left: 355px;
		}
	#bg3-2 {
		position: absolute;
		top: 812px;
		left: 321px;
		}
	#bg3-3 {
		position: absolute;
		top: 1628px;
		left: 403px;
		}
	#bg3-4 {
		position:...

JavaScript

$(document).ready(function() {
	
	redrawDotNav();
	
	/* Scroll event handler */
    $(window).bind('scroll',function(e){
    	parallaxScroll();
		redrawDotNav();
    });
    
	/* Next/prev and primary nav btn click handlers */
	$('a.manned-flight').click(function(){
    	$('html, body').animate({
    		scrollTop:0
    	}, 1000, function() {
	    	parallaxScroll(); // Callback is required for iOS
		});
    	return false;
	});
    $('a.frameless-parachute').click(function(){
    	$('html, body').animate({
    		scrollTop:$('#frameless-parachute').offset().top
    	}, 1000, function() {
	    	parallaxScroll(); // Callback is required for iOS
		});
    	return false;
    });
    $('a.english-channel').click(function(){
    	$('html, body').animate({
    		scrollTop:$('#english-channel').offset().top
    	}, 1000, function() {
	    	parallaxScroll(); // Callback is required for iOS
		});
    	return false;
    });
	$('a.about').click(function(){
    	$('html, body').animate({
    		scrollTop:$('#about').offset().top
    	}, 1000, function() {
	    	parallaxScroll(); // Callback is required for iOS
		});
    	return false;
    });
    
    /* Show/hide dot lav labels on hover */
    $('nav#primary a').hover(
    	function () {
			$(this).prev('h1').show();
		},
		function () {
			$(this).prev('h1').hide();
		}
    );
    
});

/* Scroll the background layers */
function parallaxScroll(){
	var scrolled = $(window).scrollTop();
	$('#parallax-bg1').css('top',(0-(scrolled*.25))+'px');
	$('#parallax-bg2').css('top',(0-(scrolled*.5))+'px');
	$('#parallax-bg3').css('top',(0-(scrolled*.75))+'px');
}

/* Set navigation dots to an active state as the user scrolls */
function redrawDotNav(){
	var section1Top =  0;
	// The top of each section is offset by half the distance to the previous section.
	var section2Top =  $('#frameless-parachute').offset().top - (($('#english-channel').offset().top - $('#frameless-parachute').offset().top) / 2);
	var section3Top = ...