Animate cloud graphics on scroll

by Jesse M

HTML

<div class="cloud-01"></div>
		<div class="cloud-02"></div>
		<div class="cloud-03"></div>
		<div class="cloud-04"></div>

CSS

body {
  overflow-x: clip;
  /* position: relative; */
}

/***** Clouds *****/
[class^="cloud"] {
	display: none;
	position: absolute;
}

.cloud-01, .cloud-04 {
	background: red;
	height: 273px;
	left: -160px;
	top: -40px;
	width: 598px;
}

.cloud-02, .cloud-03 {
	background: yellow;
	height: 353px;
	right: -285px;
	top: -122px;
	width: 693px;
}

.cloud-03 {
	left: -460px;
	top: 545px;
}

.cloud-04 {
	left: auto;
	right: -230px;
	top: 765px;
}

JavaScript

jQuery(function($){


	$(window).on('load', function(){
		$('[class^="cloud"]').each(function(index){
			if(!$(this).hasClass('done')){
				$(this).delay(100*index).fadeIn().addClass('done');
			}
		});
	});

	$(window).on('scroll', function(){
		$('.cloud-01').css('left', -150 + ($(window).scrollTop() * .8));
		$('.cloud-02').css('right', -285 - ($(window).scrollTop() * .8));
		$('.cloud-03').css('left', -460 - ($(window).scrollTop() * .5));
		$('.cloud-04').css('right', -230 + ($(window).scrollTop() * .5));
	});


});