[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
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.