Hot Tea / Coffee with Animated Smoke Effect – jQuery & CSS

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

Advertisements

25 thoughts on “Hot Tea / Coffee with Animated Smoke Effect – jQuery & CSS

  1. Dhiraj,

    So glad I dropped in here. This is an awesome effect. Seen a similar looking one on a jsfiddle from a stackoverflow question & the smoke looked like cigarette smoke. Granted they werent using an image to aid the animation. Yours is so so good. Thank you.

    Are we alowed to use this code Dhiraj in our projects or is it just for demostration purposes.

    Thank you my friend for making my day.

    Andrew

  2. This is very nice tutorial!! But can You tell me what I have to do, if I want to do this effect when I hover some div? I will be greatful for some info 🙂

  3. I have been exploring for a bit for any high-quality articles or weblog posts in this kind of area .

    Exploring in Yahoo I finally stumbled upon this website.
    Reading this information So i am satisfied to show that I have a very excellent uncanny feeling I came
    upon exactly what I needed. I most surely will make
    certain to do not omit this site and provides it a look regularly.

  4. Hey men, awesome effect! Congratz!
    I know that the CSS must be inside the style.css. But, and the JQuery? Where is it supposed to be? Im a little newbie with this things… Thx for answers! 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s