Love Hearts Cursor Javascript :: RV's free DHTML effects

FLOATING LOVE HEARTS EFFECT

This script has been tested on and shown to work with the following browsers: Internet Explorer version 6 and above Google Chrome version 1 and above Mozilla Firefox version 2 and above Apple Safari version 5 and above Opera version 7 and above (including Opera mobile) Android Browser version 2 and above

15-Dec-2013: First release.
STEP 1: Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page: <script type="text/javascript"> // <![CDATA[ var colours=new Array('#f00', '#f06', '#f0f', '#f6f', '#f39', '#f9c'); // colours of the hearts var minisize=16; // smallest size of hearts in pixels var maxisize=28; // biggest size of hearts in pixels var hearts=66; // maximum number of hearts on screen var over_or_under="over"; // set to "over" for hearts to always be on top, or "under" to allow them to float behind other objects /***************************** JavaScript Love Heart Cursor * (c)2013+ mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var herz=new Array(); var herzx=new Array(); var herzy=new Array(); var herzs=new Array(); var kiss=false; if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addRVLoadEvent(mwah); function mwah() { if (document.getElementById) { var i, heart; for (i=0; i<hearts; i++) { heart=createDiv("auto", "auto"); heart.style.visibility="hidden"; heart.style.zIndex=(over_or_under=="over")?"1001":"0"; heart.style.color=colours[i%colours.length]; heart.style.pointerEvents="none"; if (navigator.appName=="Microsoft Internet Explorer") heart.style.filter="alpha(opacity=75)"; else heart.style.opacity=0.75; heart.appendChild(document.createTextNode(String.fromCharCode(9829))); document.body.appendChild(heart); herz[i]=heart; herzy[i]=false; } set_scroll(); set_width(); herzle(); }} function herzle() { var c; if (Math.abs(x-ox)>1 \|\| Math.abs(y-oy)>1) { ox=x; oy=y; for (c=0; c<hearts; c++) if (herzy[c]===false) { herz[c].firstChild.nodeValue=String.fromCharCode(9829); herz[c].style.left=(herzx[c]=x-minisize/2)+"px"; herz[c].style.top=(herzy[c]=y-minisize)+"px"; herz[c].style.fontSize=minisize+"px"; herz[c].style.fontWeight='normal'; herz[c].style.visibility='visible'; herzs[c]=minisize; break; } } for (c=0; c<hearts; c++) if (herzy[c]!==false) blow_me_a_kiss(c); setTimeout("herzle()", 40); } document.onmousedown=pucker; document.onmouseup=function(){clearTimeout(kiss);}; function pucker() { ox=-1; oy=-1; kiss=setTimeout('pucker()', 100); } function blow_me_a_kiss(i) { herzy[i]-=herzs[i]/minisize+i%2; herzx[i]+=(i%5-2)/5; if (herzy[i]<sdown-herzs[i] \|\| herzx[i]<sleft-herzs[i] \|\| herzx[i]>sleft+swide-herzs[i]) { herz[i].style.visibility="hidden"; herzy[i]=false; } else if (herzs[i]>minisize+2 && Math.random()<.5/hearts) break_my_heart(i); else { if (Math.random()<maxisize/herzy[i] && herzs[i]<maxisize) herz[i].style.fontSize=(++herzs[i])+"px"; herz[i].style.top=herzy[i]+"px"; herz[i].style.left=herzx[i]+"px"; } } function break_my_heart(i) { var t; herz[i].firstChild.nodeValue=String.fromCharCode(9676); herz[i].style.fontWeight='bold'; herzy[i]=false; for (t=herzs[i]; t<=maxisize; t++) setTimeout('herz['+i+'].style.fontSize="'+t+'px"', 60(t-herzs[i])); setTimeout('herz['+i+'].style.visibility="hidden";', 60*(t-herzs[i])); } document.onmousemove=mouse; function mouse(e) { if (e) { y=e.pageY; x=e.pageX; } else { set_scroll(); y=event.y+sdown; x=event.x+sleft; } } window.onresize=set_width; function set_width() { var sw_min=999999; var sh_min=999999; if (document.documentElement && document.documentElement.clientWidth) { if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth; if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight; } if (typeof(self.innerWidth)=='number' && self.innerWidth) { if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth; if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight; } if (document.body.clientWidth) { if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth; if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight; } if (sw_min==999999 \|\| sh_min==999999) { sw_min=800; sh_min=600; } swide=sw_min; shigh=sh_min; } window.onscroll=set_scroll; function set_scroll() { if (typeof(self.pageYOffset)=='number') { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body && (document.body.scrollTop \|\| document.body.scrollLeft)) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop \|\| document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height; div.style.width=width; div.style.overflow="hidden"; div.style.backgroundColor="transparent"; return (div); } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: If you want to change the colours of the hearts, change the colours at the start of the script you just copied to the settings you require (these can be in the form 'magenta' or 'rgb(255,0,255)' or '#f0f').
THAT'S IT When your page loads hearts will float up from wherever your cursor wanders. Also, if you hold your mouse button down, lots of hearts will be produced. And like true love, the path of hearts does not always run the course and sadly some hearts will be broken before they reach their target!

Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this page is: http://www.mf2fm.com/rv/dhtmlheartcursor.php.

This page has been viewed 853 times. It was last viewed on Sat 21 Dec, 2024 at 12:50