<script> //AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE. var context=document.getElementById("canvas"); var canvasWidth=context.width; var canvasHeight= context.height; var fogCount=15; var fog=new Image(); var mountain=new Image(); var fogs=[]; var FPS=20; var maxVel=1;
fog.src = "https://s27.postimg.org/57e6pz0xf/fog.png"; mountain.src="https://s27.postimg.org/4j5c7127n/mac2.jpg" ;
function fogPart(){
this.x=0;
this.y=0;
this.xVel=0;
this.yVel=0;
this.radius=5;
this.draw=function(){
context.drawImage(this.image,this.x-100,this.y-100);
}; this.update=function(){
this.x += this.xVel;
this.y += this.yVel;
if (this.x >= canvasWidth) { this.xVel = -this.xVel; this.x = canvasWidth; } else if (this.x <= 0) { this.xVel = -this.xVel; this.x = 0; }
if (this.y >= canvasHeight) { this.yVel = -this.yVel; this.y = canvasHeight; } else if (this.y <= 0) { this.yVel = -this.yVel; this.y = 0; }
};
this.setImage=function(img){ this.image=img; }; this.setPos = function(x, y) {
this.x = x; this.y = y; };
this.setVel = function(x, y) { this.xVel = x; this.yVel = y; };
};
function random(min, max){
return Math.random() * (max - min) + min;
} function init() {
if (canvas.getContext) { context = canvas.getContext('2d'); for(var i=0; i < fogCount; i++){ var fog = new fogPart();
fog.setPos(random(0, canvasWidth), random(0, canvasHeight)); fog.setVel(random(-maxVel, maxVel), random(-maxVel, maxVel)); fogs.push(fog); } } else { alert("UN-supported browser"); }
};
fog.onload=function(){
fogs.forEach(function(part){ part.setImage(fog); });
}; function draw(){
context.drawImage(mountain,0,0); context.globalAlpha = 0.09; fogs.forEach(function(part) { part.draw(); });
}; function update(){ fogs.forEach(function(part){ part.update(); });
};
init(); if (context) {
setInterval(function() { update();draw(); }, 1000 / FPS);
} </script>
<canvas id="canvas" width="750" height="390"></canvas>