JSFiddle - React, Tailwind, and code Playground

by Antério Vieira

HTML

<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<!DOCTYPE html>
<html>
	<head>
		<title>Meu projeto jquery</title>
	</head>
	<body>
			
		<header class="fazenda">
			<div class="text">
				Meu projeto JQuery
			</div>
			<div class="passaro"></div>

		</header>
		
	
		<div style="height: 800px"></div>
		
	</body>
</html>

CSS

.fazenda {
	background-image:url('http://mapadecultura.rj.gov.br/wp-content/uploads/2012/06/Itaperuna_Fazenda-S%C3%A3o-Domingos_MG_2261.jpg');
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	width: 100%;
	position: relative;
	height: 600px;
	overflow: hidden;
}

.passaro {
	background-image: url('http://www.ciaeco.org/uploads/beijaflor-07.png');
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 0;
	height: 400px;
	width: 500px;
	position: absolute;
	top: 200px;
}

.text {
	position: relative;
	background-color: #0057A9;
	width: 300px;
	text-align: center;
	color: #fff;
	padding: 20px;
	display: block;
	left: 50%;
	font-weight: bold;
	margin-left: -150px;
	opacity: 0.8;
	top: 300px;
	font-size: 30px;
}

JavaScript

$(window).scroll(function(){
	var scroll = $(this).scrollTop();
	
	$('.passaro').css({
		'transform' : 'translate(' + scroll/5 + '%, 0px)',
		'background-size': (scroll/8 ) + '%'
	});
	
	$('.text').css({
		'transform' : 'translate(0px, '+scroll/2+'%)'
	});
});