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.

css-jquery-smoke-animation-effect-of-coffee-tea

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>

view demo

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

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsHTMLJAVASCRIPTjQueryMobile Web TechnologyPhotoshopTutorialsadvance web technology,angle brackets,animate coffee,animated smoke,animation delay,animation direction,animation effect,coffee,configurable settings,core code,CSS,CSS 3,CSS 4,CSS framework,css namespaces,css opacity,css3,css3 box shadow,demo code,doctype html,elements,enterprise-it,free open source,gaming,graphical user interface,grid,grid system,hot,hot coffee,hot coffee with smoke,hot smoke,html and xhtml,html basics,interactive web applications,javascript,javascript functions,javascript programmers,jquery,jQuery animation,line tag,mobile,open source javascript,page elements,paragraph text,plugin,png transparency,programming,project workflow,random positions,settimeout function,smoke,software,software-development,style,tea,technology,transparent background image,visual transitionThis 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...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.