Make your website romantic butterfly

Written by @kerixa 21 August 2012

By using special styles, you can make the appearance of your website more beautiful and unique. In the following code, a red butterfly rotates around the webpage and makes the website more beautiful. You can change the color of the butterfly to suit the other contents.

Code Snippet:

                                                
                                                <!-- this script is provided by www.javascriptfreecode.com coded by: Kerixa Inc. -->
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title></title>
</head>

<body>

<p>
<script language="JavaScript1.2">


//specify path to cursor image
var cursorpath="http://www.javascriptfreecode.com/images/fly2.gif"

if (document.layers)
{document.write("<LAYER NAME='PoInTeRs' LEFT=800 TOP=10><img src='"+cursorpath+"' width=17 height=22></LAYER>")}
else if (document.all){document.write("<div id='pOiNtErS' style='position:absolute;top:10px;left:10px;width:17px;height:22px;z-index:50'><img src='"+cursorpath+"' width=40 height=40></div>")}

count=-1;                                                     
move=1;

function Curve(){
abc=new Array(0,1,1,1,2,3,4,0,6,-1,-1,-1,-2,-3,-4,0,-6)
for (i=0; i < abc.length; i++)
{var C=Math.round(Math.random()*[i])}
howbend=abc[C];
setTimeout('Curve()',1900);
return howbend;
}
ypos=100;
xpos=100;

degree = 600;
function MoveRandom(){
PathBend=degree+=howbend;//ok!
y = 4*Math.sin(PathBend*Math.PI/180);
x = 6*Math.cos(PathBend*Math.PI/180);
if (document.layers){
ypos+=y;
xpos+=x;
document.PoInTeRs.top=ypos+window.pageYOffset;
document.PoInTeRs.left=xpos+window.pageXOffset;
}
else if (document.all){
ypos+=y;
xpos+=x;
document.all.pOiNtErS.style.top=ypos+document.body.scrollTop;
document.all.pOiNtErS.style.left=xpos+document.body.scrollLeft;
}
T=setTimeout('MoveRandom()',50);
}
function edges(){
if (document.layers){
if (document.PoInTeRs.left >= window.innerWidth-40+window.pageXOffset)degree=Math.round(Math.random()*45+157.5);
if (document.PoInTeRs.top >= window.innerHeight-30+window.pageYOffset)degree=Math.round(Math.random()*45-112.5);
if (document.PoInTeRs.top <= 2+window.pageYOffset) degree = Math.round(Math.random()*45+67.5);//OK!
if (document.PoInTeRs.left <= 2+window.pageXOffset) degree = Math.round(Math.random()*45-22.5);//OK!
}
else if (document.all)
{
if (document.all.pOiNtErS.style.pixelLeft >= document.body.offsetWidth-45+document.body.scrollLeft)degree=Math.round(Math.random()*45+157.5);
if (document.all.pOiNtErS.style.pixelTop >= document.body.offsetHeight-35+document.body.scrollTop)degree=Math.round(Math.random()*45-112.5);
if (document.all.pOiNtErS.style.pixelTop <= 2+document.body.scrollTop) degree = Math.round(Math.random()*45+67.5);//OK!
if (document.all.pOiNtErS.style.pixelLeft <= 2+document.body.scrollLeft) degree = Math.round(Math.random()*45-22.5);//OK!
}
setTimeout('edges()',100);
}
function starteffect(){
Curve();
MoveRandom();// onUnload="opener.gO()"
edges();
}

if (document.all||document.layers)
window.onload=starteffect
</script>
</p>
<br />

</body>

</html>

<a target='_blank' href='www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: gech, ben.reed@laingbuisson.com, javaboy, Estevan Belo, Shahmeer
advertisement 2