JavaScript Learning Series – Web Landing Page with Flying balloons

I am thinking how to let my client find my profile…

As one of my idea, I created specific landing page, like cover letter for each my client.

I would like to share with you how to make a moving landing page using flying balloon images.

Contents

What you will make
JS code of flying balloons on the landing page
1. HTML + JS
2. CSS
Related articles

What you will make

Please see a small movie below to know what you will make.

JS code of flying balloons on the landing page

Here is the source of the flying balloons JavaScript.

HTML + JS

<!doctype html>
<html lang="ja">
<head>
....bla  bla bla...
<title>Promotion Page</title>

<styletype="text/css">
html{
	background:url(images/back.jpg) no-repeat center center fixed; 
	margin-top: -500px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	overflow:hidden;
	}	
</style>    
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="container">
...bla bla bla....

<div id="zon"></div>
<scripttype="text/javascript">
(function (){  

var ga=["images/baroonred.png","images/baroongreen.png","images/baroonyellow.png","images/baroonred.png"];
var num=5;      
var imgw=1000;    
var imgh=1000;       
var Sca=0.8;   
var maxOp=0.9;  
var miniOp=0.5; 
var yure=20; 
var spd=15; 
var hidesnowtime=0;
var snowtimer=null; 
var i=0; 
var zonw=zon.clientWidth, zonh=zon.clientHeight;
var dx=[], xp=[], yp=[], am=[], stx=[], sty=[], opa=[];
var w=zonw+imgw*Sca, h=zonh+imgh*Sca;
var sss='<div style="position:absolute;width:'+zonw+'px;height:'+zonh+'px;">';
for (i=0; i<num; ++i) {
dx[i] = 0;                         
xp[i] = Math.random()*w;           
yp[i] = Math.random()*h;
am[i] = Math.random()*yure;        
stx[i] = 0.02 + Math.random()/10;  
sty[i] = 0.7 + Math.random();     
opa[i]=Math.random()*(maxOp-miniOp)+miniOp;
var randomGa=ga[Math.floor(Math.random()*ga.length)];
sss +='<img src='+randomGa+' id="dot'+i+'">';
}
sss +='</div>';
document.getElementById("zon").innerHTML=sss;

function Snow(){  
for (i=0; i<num; ++i) {    
yp[i] -=sty[i];               
if (yp[i] <0) {
xp[i]=Math.random()*(w-am[i]); 
yp[i]=h;
}
dx[i] +=stx[i];
var ob=document.getElementById("dot"+i).style;
ob.top=-imgh*Sca+yp[i]+"px";
ob.left=-imgw*Sca+xp[i]+am[i]*Math.sin(dx[i])+"px";
ob.position="absolute"; ob.opacity=opa[i]; ob.transform="scale("+Sca+")";
}
snowtimer=setTimeout(Snow,spd);
}

function hidesnow(){
if (window.snowtimer){clearTimeout(snowtimer);}
for (i=0; i<num; i++){document.getElementById("dot"+i).style.visibility="hidden";}
}
Snow();
if (hidesnowtime>0){ setTimeout(hidesnow, hidesnowtime*1000)}
}());

</script>
</div>
<!-- Main Container Ends -->
<div class="footer_column">&#9400; 2018 ExDesign <div>
</body>
</html>

CSS

@charset "UTF-8";
h1{
	color: #2F2B2B;
	position:fixed; 
	top:20%;
	margin-left: 5%;
	margin-right: 40%;
	text-align: left;
	font-size: 1.5em;
}
.message{
	color: #2F2B2B;
	position:fixed; 
	top:36%;
	margin-left: 5%;
	margin-right: 60%;
	text-align: justify;
	font-size: 0.9em;
}
.container {
	position:fixed;
}
.footer_column {
	position:absolute; 
	bottom:0;
	height: 40px;
	text-align: center;
	 width: 100%;
	font-size: 0.8em;
}
#zon{
position:fixed;
border:none;
left:1000px;
height: 1000px;
overflow: none;
}