Scribd
Upload
34 views

XML Version

The document contains code for creating sparkling stars and tiny particles that move around the screen when the user moves their mouse. It defines variables and functions for initializing, updating, and drawing the stars and particles.

Uploaded by

combi_lola
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
34 views

XML Version

The document contains code for creating sparkling stars and tiny particles that move around the screen when the user moves their mouse. It defines variables and functions for initializing, updating, and drawing the stars and particles.

Uploaded by

combi_lola
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 24

<?xml version="1.0" encoding="UTF-8" ?

>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'


xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>

<script type='text/javascript'>

</script>

<script type='text/javascript'>

// <![CDATA[

var colour="pink";

var sparkles=100;

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="3px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="3px";

document.body.appendChild(star[i]=rats);

set_width();

sparkle();

}}

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;
oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);

setTimeout("sparkle()", 40);

function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";

else {
star[i].style.visibility="hidden";

starv[i]=0;

return;

else {

tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*3;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";
}

else {

tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;

else tiny[i].style.visibility="hidden";

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

else if (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;

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";
div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

// ]]>

</script>

<head>

<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name: Minima Black

Date: 26 Feb 2004

Updated by: Blogger Team

----------------------------------------------- */

/* Variable definitions

====================

<Variable name="bgcolor" description="Page Background Color"

type="color" default="#000" value="#000000">

<Variable name="textcolor" description="Text Color"

type="color" default="#ccc" value="#f29ea2">

<Variable name="linkcolor" description="Link Color"

type="color" default="#9ad" value="#f20a7d">

<Variable name="pagetitlecolor" description="Blog Title Color"


type="color" default="#ccc" value="#ff0685">

<Variable name="descriptioncolor" description="Blog Description Color"

type="color" default="#777" value="#e9036b">

<Variable name="titlecolor" description="Post Title Color"

type="color" default="#ad9" value="#fce5cd">

<Variable name="bordercolor" description="Border Color"

type="color" default="#333" value="#f00067">

<Variable name="sidebarcolor" description="Sidebar Title Color"

type="color" default="#777" value="#e9287b">

<Variable name="sidebartextcolor" description="Sidebar Text Color"

type="color" default="#999" value="#fce5cd">

<Variable name="visitedlinkcolor" description="Visited Link Color"

type="color" default="#a7a" value="#f24ca2">

<Variable name="bodyfont" description="Text Font"

type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif"


value="normal bold 16px Crafty Girls">

<Variable name="headerfont" description="Sidebar Title Font"

type="font"

default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal


bold 20px Chewy">

<Variable name="pagetitlefont" description="Blog Title Font"

type="font"

default="normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal


bold 70px Crafty Girls">

<Variable name="descriptionfont" description="Blog Description Font"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal


bold 8px Cherry Cream Soda">

<Variable name="postfooterfont" description="Post Footer Font"


type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"


value="normal bold 12px Covered By Your Grace">

<Variable name="startSide" description="Start side in blog language"

type="automatic" default="left" value="left">

<Variable name="endSide" description="End side in blog language"

type="automatic" default="right" value="right">

*/

/* Use this with templates/template-twocol.html */

body {

background:$bgcolor;

margin:0;

color:$textcolor;

font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

a:link {

color:$linkcolor;

text-decoration:none;

a:visited {

color:$visitedlinkcolor;

text-decoration:none;

}
a:hover {

color:$titlecolor;

text-decoration:underline;

a img {

border-width:0;

/* Header

-----------------------------------------------

*/

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

#header-inner {

background-position: center;

margin-$startSide: auto;

margin-$endSide: auto;

#header {

margin: 5px;

border: 1px solid $bordercolor;


text-align: center;

color:$pagetitlecolor;

#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

#header a {

color:$pagetitlecolor;

text-decoration:none;

#header a:hover {

color:$pagetitlecolor;

#header .description {

margin:0 5px 5px;

padding:0 20px 15px;

max-width:700px;

text-transform:uppercase;
letter-spacing:.2em;

line-height: 1.4em;

font: $descriptionfont;

color: $descriptioncolor;

#header img {

margin-$startSide: auto;

margin-$endSide: auto;

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

#main-wrapper {

width: 410px;

float: $startSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {

width: 220px;

float: $endSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

/* Headings

----------------------------------------------- */

h2 {

margin:1.5em 0 .75em;

font:$headerfont;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color:$sidebarcolor;

/* Posts

-----------------------------------------------

*/

h2.date-header {
margin:1.5em 0 .5em;

.post {

margin:.5em 0 1.5em;

border-bottom:1px dotted $bordercolor;

padding-bottom:1.5em;

.post h3 {

margin:.25em 0 0;

padding:0 0 4px;

font-size:140%;

font-weight:normal;

line-height:1.4em;

color:$titlecolor;

.post h3 a, .post h3 a:visited, .post h3 strong {

display:block;

text-decoration:none;

color:$titlecolor;

font-weight:bold;

.post h3 strong, .post h3 a:hover {

color:$textcolor;

}
.post-body {

margin:0 0 .75em;

line-height:1.6em;

.post-body blockquote {

line-height:1.3em;

.post-footer {

margin: .75em 0;

color:$sidebarcolor;

text-transform:uppercase;

letter-spacing:.1em;

font: $postfooterfont;

line-height: 1.4em;

.comment-link {

margin-$startSide:.6em;

.post img, table.tr-caption-container {

padding:4px;

border:1px solid $bordercolor;

.tr-caption-container img {
border: none;

padding: 0;

.post blockquote {

margin:1em 20px;

.post blockquote p {

margin:.75em 0;

/* Comments

----------------------------------------------- */

#comments h4 {

margin:1em 0;

font-weight: bold;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color: $sidebarcolor;

#comments-block {

margin:1em 0 1.5em;

line-height:1.6em;

#comments-block .comment-author {

margin:.5em 0;
}

#comments-block .comment-body {

margin:.25em 0 0;

#comments-block .comment-footer {

margin:-.25em 0 2em;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.1em;

#comments-block .comment-body p {

margin:0 0 .75em;

.deleted-comment {

font-style:italic;

color:gray;

.feed-links {

clear: both;

line-height: 2.5em;

#blog-pager-newer-link {

float: $startSide;

}
#blog-pager-older-link {

float: $endSide;

#blog-pager {

text-align: center;

/* Sidebar Content

----------------------------------------------- */

.sidebar {

color: $sidebartextcolor;

line-height: 1.5em;

.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

.sidebar li {

margin:0;

padding-top:0;

padding-$endSide:0;

padding-bottom:.25em;

padding-$startSide:15px;

text-indent:-15px;
line-height:1.5em;

.sidebar .widget, .main .widget {

border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

.main .Blog {

border-bottom-width: 0;

/* Profile

----------------------------------------------- */

.profile-img {

float: $startSide;

margin-top: 0;

margin-$endSide: 5px;

margin-bottom: 5px;

margin-$startSide: 0;

padding: 4px;

border: 1px solid $bordercolor;

.profile-data {

margin:0;
text-transform:uppercase;

letter-spacing:.1em;

font: $postfooterfont;

color: $sidebarcolor;

font-weight: bold;

line-height: 1.6em;

.profile-datablock {

margin:.5em 0 .5em;

.profile-textblock {

margin: 0.5em 0;

line-height: 1.6em;

.profile-link {

font: $postfooterfont;

text-transform: uppercase;

letter-spacing: .1em;

/* Footer

----------------------------------------------- */

#footer {

width:660px;
clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

]]></b:skin>

</head>

<body>

<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->

<span id='skiplinks' style='display:none;'>

<a href='#main'>skip to main </a> |

<a href='#sidebar'>skip to sidebar</a>

</span>

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='combilola (Header)' type='Header'/>

</b:section>

</div>

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol'>

<b:widget id='HTML23' locked='false' title='' type='HTML'/>

<b:widget id='HTML17' locked='false' title='' type='HTML'/>

<b:widget id='Image2' locked='false' title='' type='Image'/>

<b:widget id='HTML12' locked='false' title='' type='HTML'/>

<b:widget id='HTML7' locked='false' title='' type='HTML'/>

<b:widget id='HTML14' locked='false' title='' type='HTML'/>

</b:section>

</div>

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

</div>

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML20' locked='false' title='' type='HTML'/>

<b:widget id='HTML19' locked='false' title='' type='HTML'/>

<b:widget id='HTML16' locked='false' title='klik nuffnang saya ;p' type='HTML'/>

<b:widget id='HTML11' locked='false' title='' type='HTML'/>

<b:widget id='Profile1' locked='false' title='Diri saye' type='Profile'/>

<b:widget id='HTML10' locked='false' title='' type='HTML'/>

<b:widget id='Image1' locked='false' title='sayang sahabat' type='Image'/>


<b:widget id='Image3' locked='false' title='si kacak ;)' type='Image'/>

<b:widget id='Image9' locked='false' title='aqish .' type='Image'/>

<b:widget id='Image10' locked='false' title='anna ;p' type='Image'/>

<b:widget id='Image4' locked='false' title='si comel;)' type='Image'/>

<b:widget id='Image5' locked='false' title='si cantex .;)' type='Image'/>

<b:widget id='Image6' locked='false' title='si sweet ;)' type='Image'/>

<b:widget id='Image7' locked='false' title='si cute;)' type='Image'/>

<b:widget id='Image8' locked='false' title='si maneh ;)' type='Image'/>

<b:widget id='HTML2' locked='false' title='muke buku saya ;)' type='HTML'/>

<b:widget id='Followers1' locked='false' title='kawan2 Saye' type='Followers'/>

<b:widget id='HTML5' locked='false' title='' type='HTML'/>

<b:widget id='HTML4' locked='false' title='' type='HTML'/>

<b:widget id='HTML6' locked='false' title='together' type='HTML'/>

<b:widget id='HTML21' locked='false' title='' type='HTML'/>

<b:widget id='Image11' locked='false' title='pujaan hati ;p' type='Image'/>

<b:widget id='HTML3' locked='false' title='' type='HTML'/>

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>

<b:widget id='HTML8' locked='false' title='' type='HTML'/>

<b:widget id='HTML15' locked='false' title='FaceBlog saya.' type='HTML'/>

</b:section>

</div>

<!-- spacer for skins that want sidebar and main to be the same height-->

<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->


<div id='footer-wrapper'>

<b:section class='footer' id='footer'>

<b:widget id='HTML22' locked='false' title='' type='HTML'/>

<b:widget id='HTML18' locked='false' title='' type='HTML'/>

<b:widget id='HTML1' locked='false' title='muzik hati' type='HTML'/>

<b:widget id='HTML13' locked='false' title='' type='HTML'/>

<b:widget id='HTML9' locked='false' title='' type='HTML'/>

</b:section>

</div>

</div></div> <!-- end outer-wrapper -->

</body>

</html>

You might also like