Sunday, February 10, 2008

JavaScript: Falling Objects (Images)

This code allows for one to enable a picture to "fall". 
It works by using the image as a background (so make sure to have plenty of padding in the image itself). 
It can use any image, and can make it fall as the background for any tag specified.  This code is
free for all to use.

NOTE, this script requires the href="http://www.prototypejs.org/" target="_blank">Prototype Framework.



valign="top">

/**
* @author Navarr
*
* Requires ProtoType

*/
     // Don't Touch This!
       
window.snowflake = new Array;
    // Active?
       
window.snowflake["active"]    = true;
   
// Image to use?
       
window.snowflake["image"]    = "/temp/img/hearts.png";

    // Div to put it in?
       
window.snowflake["div"]       
= "htmlBody";
    // Speed (Higher the Number, the
Slower it is)
       
window.snowflake["speed"]    = 7;

if
(window.snowflake["active"])
{
   
Event.observe(window,'load',function()
    {
       
window.setInterval('startFalling()',window.snowflake["speed"]*10);
   
});
}
function startFalling()
{
   
if (!window.y) { window.y = 0; }
    window.y = window.y+10;
   
if (window.y > window.innerHeight)
    {
       
window.y = 10 + (window.innerHeight%10);
    }
   
ele = $(window.snowflake["div"]);
   
ele.style.backgroundImage = "url('" + window.snowflake["image"] + "')";

    ele.style.backgroundRepeat = "repeat";
   
ele.style.backgroundPosition = "0px " + window.y + "px";
   
ele.style.backgroundAttachment = "fixed";
}


3 comments:

  1. Hi,

    I get an error:

    "ele has no properties"


    How can I solve this?

    ReplyDelete
  2. Make sure that you are setting window.snowflake["div"] to the ID of a div tag on your
    page, and that you have the Prototype JS framework included on the page.

    ReplyDelete
  3. how do i make the object fall random over the stage?

    ReplyDelete