This effect has been created with some cool jQuery animation effect. For Smoke effect I have used a png transparent image. I have already updated this for IE too. As we already know transparency of png creates some bad side-effects on IE (png transparency bugs in IE). You can check the demo code and see how it’s done. Basically, the Javascript function creates some div with smoke background in random positions. so, the effect looks more random even though it’s totally deterministic. Each smoke moves in the Y axis with a linear function and fade with a cosine function. Pretty simple effect, but effective.
The CSS
#viewport { position: relative; width: 800px; height: 600px; overflow: hidden; background:url('images/milk_tea.jpg') 0 0 no-repeat } #viewport .smoke { position: absolute; width: 250px; height: 250px; background:url('images/smoke-texture.png') no-repeat; bottom: 150px; margin-left:0px }
The jQuery
Now, We are including jquery library and the easing plugin for creating this affect realistic.
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="http://demo.web3designs.com/jquery-easing.min.js"></script> <script type="text/javascript"> $(function () { if (!$.browser.msie) { var a = 0; for (; a < 15; a += 1) { setTimeout(function b() { var a = Math.random() * 1e3 + 5e3, c = $("
", { "class": "smoke", css: { opacity: 0, left: Math.random() * 200 + 80 } }); $(c).appendTo("#viewport"); $.when($(c).animate({ opacity: 1 }, { duration: a / 4, easing: "linear", queue: false, complete: function () { $(c).animate({ opacity: 0 }, { duration: a / 3, easing: "linear", queue: false }) } }), $(c).animate({ bottom: $("#viewport").height() }, { duration: a, easing: "linear", queue: false })).then(function () { $(c).remove(); b() }) }, Math.random() * 3e3) } } else { "use strict"; var a = 0; for (; a < 15; a += 1) { setTimeout(function b() { var a = Math.random() * 1e3 + 5e3, c = $("
", { "class": "smoke", css: { left: Math.random() * 200 + 80 } }); $(c).appendTo("#viewport"); $.when($(c).animate({}, { duration: a / 4, easing: "linear", queue: false, complete: function () { $(c).animate({}, { duration: a / 3, easing: "linear", queue: false }) } }), $(c).animate({ bottom: $("#viewport").height() }, { duration: a, easing: "linear", queue: false })).then(function () { $(c).remove(); b() }) }, Math.random() * 3e3) } } }())</script>
Update:
I’ve done some changes in my jquery script and fix IE png transparency bug.
Thanks for reading and looking forward to read your thoughts!
Posted by: Dhiraj kumar