Question

Could you please tell me how this web site managed to do this?

http://weblopedi.net/

There is a Twitter bird floating all around the web page (Not randomly I guess)
When I scroll down, the bird follows me and flies around 🙂

Is there a pllug-in for it?

Update: I just found it’s a WordPress gadget. But how can I use it on my web site (Not blog)?
Anyway, I’m gonna look at the source code.

Answer 1

A quick answer is to set a div or element to absolute position and give it a higher z-index than the rest of the page you want it to float over. Then control it via Javascript on a window scroll event. For example, if using jQuery you could use scrollTop() and have an offset to set the y positioning of the twitter floating bird.

Something like:

<div id="BirdDiv" style="position: absolute; z-index: 999;">
     <img src="twitterbird.png" alt="" />
</div>

Then in Javascript

$(window).scroll(function () {
    var offset = 150;
    var topVal = $(window).scrollTop() + offset;
    $("#BirdDiv").offset({ top: topVal, left: 300 });
});