How to make a snow fall on web page text?

Question

I have this JavaScript code for snow falling effect. It's working really nice, but I decided to create a snow falling on web page text. I have tried, but not getting how to do it.

How to make snow fall on that "I love you" text? http://jsfiddle.net/DgrxX/22/

I have already seen in VB6 code where snow fall on text. If it is possible in Visual Basic 6 seven years ago, why not today in JavaScript or CSS3 or jQuery?

function vp(woh)
{
    var viewportwidth;
    var viewportheight;

    if (typeof window.innerWidth != 'undefined')
    {
         viewportwidth = window.innerWidth,
         viewportheight = window.innerHeight
     }

     else if (typeof document.documentElement != 'undefined'
         && typeof document.documentElement.clientWidth !=
         'undefined' && document.documentElement.clientWidth != 0)
     {
         viewportwidth = document.documentElement.clientWidth,
         viewportheight = document.documentElement.clientHeight
     }

     else
     {
           viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
           viewportheight = document.getElementsByTagName('body')[0].clientHeight
     }
        if (woh == 'w')
        {
            return viewportwidth;
        }
        else if (woh == 'h')
        {
            return viewportheight;
        }
        else
        {
            return false;
        }

    }
function snowflake()
{
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.radius = Math.random()*2;
    this.color = "white";
    var tobefallingSpeed = Math.random() * 100;
    this.fallingSpeed = tobefallingSpeed + 30;
}
function render()
{
    ctx.clearRect(0,0,canvas.width, canvas.height);
    for (b=0;b<snowflakes;b++)
    {  
        sf[b].y+=0.4;
        if(sf[b].y> canvas.height){
         sf[b].y = 0;   
        }
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(sf[b].x,sf[b].y,sf[b].radius,sf[b].radius);
    }
}
function main()
{
    now = Date.now();
    delta = now - then;
    render();
    then = now;
}
then = Date.now();
var int = self.setInterval(main,1);
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = vp('w');
canvas.height = vp('h');
document.body.appendChild(canvas);

var numberofSnowflakes = 100;
var sf = [];

for (i=0;i<numberofSnowflakes;i++)
{
    sf[i] = new snowflake();
    snowflakes = i;
}

Answer 1

Okay so I have seen a few answers but the asker wants the snow to be exclusively piling up on the text . Exact piling (according to the snow in background) would be really very difficult but I would like to suggest a (maybe complex) working method.

Make images.

A lots of them. With the text 'I love You' and contents of snow different in each. This maybe similar to creating picture frames from a video.

Define a div . Change your picture every x seconds, where x depends on number of images you have made.

You can use the following code for changing image:

function change_background( new_image_source ) {

  var myimage = $( '#myimage' );

  myimage.attr( 'src', new_image_source );

  setTimeout( function () {

    change_background( 'new image source here' );

  }, 100);

}

This code will change the image after 0.1 . This can hopefully give you the required effect but you will need to make a lot of pictures that differ slightly. I would make lots of pictures for my gf (if I had one).