Infinite Moving Clouds

by Luca De Nardi

HTML

<script src="https://storage.googleapis.com/minionsvil-templates/resources/slabtext.min.js"></script>
<script src="https://storage.googleapis.com/minionsvil-templates/resources/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/minionsvil-templates/resources/bootstrap.min.css">
<script src="https://storage.googleapis.com/minionsvil-templates/resources/jquery-3.2.1.min.js"></script>
<div id="background-wrap"></div>

CSS

html, body{
				background: #283F50;
				width:100vw;
				height: 100vh;
				overflow: hidden;
			}
			.cloud{
				position: absolute;
				bottom: 0;
				right: 0;
				transform: translateY(60%) translateX(100%);
				border-radius: 50%;

				background: #fff;
				background: -moz-linear-gradient(top,  #fff 5%, #f1f1f1 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#f1f1f1));
				background: -webkit-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
				background: -o-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
				background: -ms-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
				background: linear-gradient(top,  #fff 5%,#f1f1f1 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );
			}

			#plane{
			    width: 10vw;
			    position: absolute;
			    top: 50%;
			    left: 50%;
			    transform: translateX(-50%);
			    transform-origin: 0 50%;
				animation-name: shake-slow;
			  	animation-duration: 8s;
			  	animation-timing-function: linear;
			  	animation-iteration-count: infinite;
			}

JavaScript

function generateCloud(){
				var cloud = $('<div class="cloud"></div>');
				var size = 10 + Math.floor(Math.random() * 40) + "vmin";

				cloud.css('height', size).css('width', size).css('opacity', 0.5 + (Math.random() / 2));
				$('#background-wrap').append(cloud);

				cloud.animate(
					{ right: $(window).width() + $(cloud).width() + "px" },
					Math.floor(7 + Math.random() * 3)* 1000,
					'linear',
					function(){
						cloud.remove();
						generateCloud();
					}
				);
			}
			$(window).on('load', function(){
			var clouds = 0;
			function delay(){
				if(clouds == 30) return;
				setTimeout(function(){
				  clouds++;
				  generateCloud();
				  delay();
				}, 500);
			}
			delay();
		});