gabwebdesign
7/19/2016 - 4:59 PM

Smoke effect

Smoke effect

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Steam</title>
    <style type="text/css">
        *{ margin:0; padding:0;}

        #banner{
            position: absolute;
            width:300px;
            height: 250px;
            overflow: hidden;
            background: #000; 
            background: url(coffee-background.jpg) no-repeat;
        }

        #container{
            position:absolute;
            margin: 0 auto;
            top:0;
            left:0;
            right:0;
            width:190px;
            height:153px;
            overflow: hidden;
        }
        .smoke{
            position: absolute;
            margin: 0 auto;
            left:0;
            right:0;
            background: url(steam.svg) no-repeat;
            width:10px;
            height:10px;
            opacity: .15;
            top:450px;
        }
    </style>
	</head>
    <body>
    <div id='banner'>
    <div id="container"></div>
    </div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
	<script type="text/javascript">

    var _timer = setInterval(update, 800)
    var _box = document.getElementById('container');

    function update(){
        var _smokeDiv = document.createElement('div');
        _smokeDiv.className = 'smoke';
        _box.appendChild(_smokeDiv);
        TweenMax.to(_smokeDiv,25,{ scale:20, top:((Math.random() * 30)-500)+"px", left:(Math.random() * 200)+"px",opacity:0, rotation:180, onComplete:function(){_smokeDiv.remove()}
              });
        console.log(document.getElementsByClassName('smoke').length)
        }

    </script>
	</body>
</html>