2467 days ago

How To Make A Cool Laboratory Tube With Animated Bubbles

Have you ever been in a real chemistry laboratory, surrounded by wonders of modern science and human ingenuity at it’s peek? No? Well, then you didn’t lose anything - it’s actually all about some bald guys running around in white dresses poking each other and trying to flex at each other about who’s smarter. But there’s one cool thing about chemistry - lab tubes containing some bubbling liquids. Quite nifty, eh? This little tutorial shows how to create a tasty looking tube using HTML 5 canvas to decorate your website, dummy page or dads car.

View the demo

What we want to achieve here is a not fully filled lab tube with bubbles traveling a bit further than the end of the tube. Furthermore, we want those bubbles to come out of the middle bottom of the tube and stick to the center while they travel to the top. For the sake of tutorial clarity, instead of some creepy essay-like tutorial, let’s put everything in these simple steps:

First we’ll need jQuery library and a fine piece of jquery plugin created by Mikey Hogarth - Bubblr. Download both scripts and place them, for example, in your_project_folder/js directory. Save jQuery as jquery.js and the modified Bubblr as bubblr.js.
Put following code between <head> ... </head> section or just before </body> (I recommend the second solution - websites tend to load faster when you put javascript at the end of the document):
```
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/bubblr.js”></script>
```

We’ll need to create some nice and properly formated nodes for that. Put the code below anywhere between <body> and </body> tags:

<div class="test-tube">
    <div class="test-tube-bg">
        <canvas id="test-tube" class="substance" width="25" 
                       height="230" style=""></canvas>
    </div>
</div>

Now it’s time to add some style to that sweet little tube of ours. Put the following code in your css styles file - if you’re not using any, then put the following code between <style> ..code goes here.. </style> tags and place it in the <head> ... </head> section of the document:

.test-tube {
    width: 25px;
    height: 180px;
    border-left: 5px solid #949494;
    border-right: 5px solid #949494;
    border-bottom: 5px solid #949494;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-bottom-left-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -ms-border-bottom-left-radius: 10px;
    -ms-border-bottom-right-radius: 10px;
}
.test-tube .test-tube-bg {
    background: #e8e8e8;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    -moz-border-bottom-left-radius: 6px;
    -moz-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -ms-border-bottom-left-radius: 6px;
    -ms-border-bottom-right-radius: 6px;
    height: 170px;
    top: 10px;
    position: relative;
}
.test-tube .substance {
    top: -60px;
    position: relative
}

We got ourselves a nice little tube here - all we need now is to launch the animation. Place the following code just before </head> or </body> tag (it must be preceded by jQuery and Bubbler script attachments that we added during step 2):

$(document).ready(function () {
    $('#test-tube').bubblr({
        backgroundColor: '',
        bubbleColor: "#bfbfbf",
        bubbleMinSize: 3,
        bubbleMaxSize: 5,
        bubbleMaxSpeed: 2,
        bubbleMinSpeed: 1,
        animationSpeed: 20,
        // bubbleXposMultiplier allows us to position bubbles on the x-axis 
        bubbleXposMultiplier: 2,
        // bubbleYpopLimit determines how far in pixels from the canvas's 
        // top edge bubbles will disappear
        bubbleYpopLimit: 10
    });
});

Save everything, check the outcome and bang - now you may call yourself a mad scientist. Not because of the tube of course - you had the patience to reach this part of the post which indeed puts you at the edge of sanity. Don’t go out for a while.

Remember that a world-famous text browser called Internet Explorer, which miraculously can parse html in some grotesque way, supports canvas starting from version 9. If you want this animation to be displayed properly in older IE releases, you can experiment with ExplorerCanvas. But it’s like beating a dead horse - smelly stuff should be buried two feet under.

Back

How To Make A Cool Laboratory Tube With Animated Bubbles

Categories