RickyH – Halloween Logo

[UPDATE 02/07/2013]

I found this kicking around since 2009. What was I thinking:
Caution flashing images:
Stars DEMO Click [FUTURE] to freak out.
Follow cursor DEMO

Original article

So its Halloween again and to celebrate I decided to create a new logo. I have to begin by apologizing to people using Internet Explorer because the Logo simply won’t work; this is partially to do with me being too lazy to port it over and partly because IE stinks and doesn’t support the CANVAS element.

The following steps show how i made my Halloween Logo:

Step 1: Turn your logo into a mask

New Design Of RickyH.co.uk

To change a logo into a mask simply select the outline of your logo shape. Photoshop: (cmd/ctrl click layer); and remove the selection from a solid square of slightly bigger size. Set the mask-image’s background-color to the background-color of your website (In my case my #141414). Now save the image with a transparent background as .png (or .gif if you care about IE6). View my image

Step 2: The HTML

<div id="headerimg">
     <canvas id="bloodyMess" />
     <a href="http://www.rickyh.co.uk/"/>
</div>

So we have three elements: The holder div, the canvas element and an anchor element.

Step 3: The CSS

#headerimg {
     position:absolute;
     background-color:#141414;
     width:157px;
     height:188px;
     left:45px;
     top:30px;
}

#bloodyMess {
     position:absolute;
     background-color:#141414;
     width:157px;
     height:188px;
     z-index:1;
     left: 0;
     top: 0;
}

#headerimg a {
     position:absolute;
     background-image:url(images/logoIn.png);
     display:block;
     width:157px;
     height:188px;
     left:0;
     top:0;
     z-index:1001;
}

As you can see from the css, all the elements are positioned absolute. This is to take advantage of using z-index to position the anchor element above the canvas element. The anchor element uses the image-mask we created earlier as the background-image.

Step 3: The JavaScript

This example uses a stripped down version of Christophe Résigné amazing Starfield experiment. I also use Mootools version 1.2.4.

var blood_x_save,blood_y_save;
var drip_speed= 0.01;
var blood_drops = 500;
var star=new Array(blood_drops);
var context;
var bloodtimeout = 0;
var bloodfps= 25;

var Page = {
     initialize: function(){
     initBlood();
     doLogo();
     }
}

window.addEvent("domready", Page.initialize);

function doLogo(){
     $("headerimg").getElement("a").addEvents({
          'mouseover': function(){
               $("bloodyMess").fade(1);
               animBlood();
          },
          'mouseout': function(){
               $("bloodyMess").fade(0);
               clearTimeout(bloodtimeout);
          }
     });
} 

function initBlood()
{
     $("bloodyMess").setStyle("opacity", "0");
     var a=0;
     for(var i=0;i<blood_drops;i++)
     {
          star[i]=new Array(5);
          star[i][0]=Math.random()*157*2-78*2;
          star[i][1]=Math.random()*188*2-89*2;
          star[i][2]=Math.round(Math.random()*172.5);
          star[i][3]=0;
          star[i][4]=0;
     }
     var bloodyMess=$('bloodyMess');
     context=bloodyMess.getContext('2d');
     bloodyMess.width = 157;
     bloodyMess.height = 188;
     context.fillStyle='rgb(149,4,4)';
     context.strokeStyle='rgb(0,0,0)';
}

function animBlood()
{
     context.fillRect(0,0,157,188);
     for(var i=0;i<blood_drops;i++)
     {
          test=true;
          blood_x_save=star[i][3];
          blood_y_save=star[i][4];
          star[i][0]+=11>>4;
          if(star[i][0]>78<<1){
               star[i][0]-=157<<1;
               test=false;
          }
          if(star[i][0]<-78<<1){
               star[i][0]+=157<<1;
               test=false;
          }
          star[i][1]+=31>>4;
          if(star[i][1]>89<<1) {
               star[i][1]-=188<<1;
               test=false;
          }
          if(star[i][1]<-89<<1) {
               star[i][1]+=188<<1;
               test=false;
          }
          star[i][2]-=drip_speed;
          if(star[i][2]>172.5) {
               star[i][2]-=172.5;
               test=false;
          }
          if(star[i][2]<0) {
               star[i][2]+=172.5;
               test=false;
          }
          star[i][3]=78+(star[i][0]/star[i][2])*300;
          star[i][4]=89+(star[i][1]/star[i][2])*300;
if(blood_x_save>0&&blood_x_save<157&&blood_y_save>0&&blood_y_save<188&&test)
          {
               context.fillStyle='rgba(149, 4, 4, 0.5)';
               context.lineWidth=(1-0.005*star[i][2])*5;
               context.beginPath();
               context.moveTo(blood_x_save,blood_y_save);
               context.lineTo(star[i][3],star[i][4]);
               context.stroke();
               context.closePath();
          }
     }
     bloodtimeout=setTimeout('animBlood()',bloodfps);
}

This is the most complicated part. First I fire two functions: initBlood() and doLogo() using Mootools domready event.

initBlood() initializes the CANVAS element and the array to handle the blood. It also sets the CANVAS elements opacity to 0 because I didn’t want to view the blood until you hover over it.

doLogo() handles the hover of the anchor element. On mouseover I fade-in the CANVAS element and begin the blood effects. On mouseout I fade out the CANVAS element and stop the effects using clearTimout(); This saves on the clients CPU when the effects not in use.

initBlood() This is used to handle the blood effects. It should run at 25fps given you’re using a browser with a good JavaScript engine and that your CPU isn’t from before the millennium. The function will loop until the clients mouse leaves the anchor element.

Step 4: View the beast

To view my example simply roll your mouse over my logo. Its positioned in the top-left-hand corner.

6 Responses :)
  1. very nice

  2. hi, such an amazing effect :) . i tried this tutorial but it DIDN’T work :( ..apart from the above css, javascipt and mootools1.2.4, is there any thing else i require ? Thanks in advance

  3. @ Drew,
    Drew you are correct. Using the elements provided results in a tutorial that does not work. You posted this last September and still no response. Most of the articles on this BLOG are incomplete and none of them are maintained. Pity, because the logo is pretty slick.

  4. Hi guys, i’ll upload a working example soon to a demo page and release the code.

    Just too busy atm :(

Leave a Comment