SCRIPTED RESOURCES

scripted resources scripted.neocities.org

• mf2fm.com/rv/ - more cursor and background effects.
• tholman - more 90s cursors

Cursor

</script>

Image cursor trail

<body>
<script language="JavaScript1.2">
<!--

/*
Submitted by Marcin Wojtowicz [one_spook@hotmail.com] 
Featured on JavaScript Kit (http://javascriptkit.com)
For this and over 400+ free scripts, visit http://javascriptkit.com
*/

var trailLength = 8 // The length of trail (8 by default; put more for longer "tail")
var path = "cursor.gif" // URL of your image

// do NOT modify anything beyond this point
var isIE = false,isNav = false,range = "all.",style = ".style",i,d = 0
var topPix = ".pixelTop",leftPix = ".pixelLeft",images,storage
if (document.layers) { // browser sniffer
	isNav = true,range = "layers.",style = "",topPix = ".top",leftPix = ".left"
} else if (document.all) {
	isIE = true
}
function initTrail() { // prepares the script
	images = new Array() // prepare the image array
	for (i = 0; i < parseInt(trailLength); i++) {
		images[i] = new Image()
		images[i].src = path
	}
	storage = new Array() // prepare the storage for the coordinates
	for (i = 0; i < images.length*3; i++) {
		storage[i] = 0
	}
	for (i = 0; i < images.length; i++) { // make divs for IE and layers for Navigator
		(isIE) ? document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>') : document.write('<layer name="obj' + i + '" width="0" height="0" z-index="100"><img src="' + images[i].src + '"></layer>')
	}
	trail()
}
function trail() { // trailing function
	for (i = 0; i < images.length; i++) { // for every div/layer
		eval("document." + range + "obj" + i + style + topPix + "=" + storage[d]) // the Y-coordinate
		eval("document." + range + "obj" + i + style + leftPix + "=" + storage[d+1]) // the X-coordinate
		d = d+2
	}
	for (i = storage.length; i >= 2; i--) { // save the coordinate for the div/layer that's behind
		storage[i] = storage[i-2]
	}
	d = 0 // reset for future use
	var timer = setTimeout("trail()",10) // call recursively 
}
function processEvent(e) { // catches and processes the mousemove event 
	if (isIE) { // for IE
		storage[0] = window.event.y+document.body.scrollTop+10
		storage[1] = window.event.x+document.body.scrollLeft+10
	} else { // for Navigator
		storage[0] = e.pageY+12
		storage[1] = e.pageX+12
	}
}
if (isNav) {
	document.captureEvents(Event.MOUSEMOVE) // Defines what events to capture for Navigator
}
if (isIE || isNav) { // initiates the script
	initTrail() 
	document.onmousemove = processEvent // start capturing
}
//-->
</script>
<style>
body{
overflow: scroll; overflow-x: hidden;
}
</style>
</body>

Bubble Cursor

/****************************
* JavaScript Bubble Cursor  *
*(c)2010-13 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 bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
var sploosh=false;

function addLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addLoadEvent(buble);

function buble() { if (document.getElementById) {
  var i, rats, div;
  for (i=0; i<bubbles; i++) {
    rats=createDiv("3px", "3px");
    rats.style.visibility="hidden";
	rats.style.zIndex=(over_or_under=="over")?"1001":"0";

div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.top="1px";
    div.left="0px";
    div.bottom="1px";
    div.right="0px";
    div.borderLeft="1px solid "+colours[3];
    div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.top="0px";
    div.left="1px";
    div.right="1px";
    div.bottom="0px"
    div.borderTop="1px solid "+colours[0];
    div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.left="1px";
    div.right="1px";
    div.bottom="1px";
    div.top="1px";
    div.backgroundColor=colours[4];
    if (navigator.appName=="Microsoft Internet Explorer") div.filter="alpha(opacity=50)";
    else div.opacity=0.5;
    document.body.appendChild(rats);
    bubb[i]=rats.style;
  }
  set_scroll();
  set_width();
  bubble();
}}

document.onmousedown=splash;
document.onmouseup=function(){clearTimeout(sploosh);};

function splash() {
  ox=-1;
  oy=-1;
  sploosh=setTimeout('splash()', 100);
}

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;
  }
}

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>

Music Note Cursor

/*****************************
*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);

document.onmousedown=pucker;
document.onmouseup=function(){clearTimeout(kiss);};

function pucker() {
ox=-1;
oy=-1;
kiss=setTimeout('pucker()', 100);
}

function break_my_heart(i) {
var t;
herz[i].firstChild.nodeValue=String.fromCharCode(9835);
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;
}
}

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>

Question Mark Cursor

/*****************************
*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);

document.onmousedown=pucker;
document.onmouseup=function(){clearTimeout(kiss);};

function pucker() {
  ox=-1;
  oy=-1;
  kiss=setTimeout('pucker()', 100);
}

function break_my_heart(i) {
  var t;
  herz[i].firstChild.nodeValue=String.fromCharCode(63);
  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;
  }
}

Flower Cursor

addRVLoadEvent(mwah);

document.onmousedown=pucker;
document.onmouseup=function(){clearTimeout(kiss);};

function pucker() {
ox=-1;
oy=-1;
kiss=setTimeout('pucker()', 100);
}

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;
}
}

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 Explosion
Change click explosion symbol tutorial

/****************************
*   Clicksplosion Effect    *
*(c)2012-3 mf2fm web-design *
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var intensity=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var timers=new Array();
var swide=800;
var shigh=600;
var sleft=sdown=0;
var count=0;

addLoadEvent(clicksplode);

function createDiv(char, size) {
  var div, sty;
  div=document.createElement('div');
  sty=div.style;
  sty.font=size+'px monospace';
  sty.position='absolute';
  sty.backgroundColor='transparent';
  sty.visibility='hidden';
  sty.zIndex='101';
  div.appendChild(document.createTextNode(char));
  return (div);
}

function eksplode(e) { 
  var x, y, i, M, Z, N;
  set_scroll();
  y=(e)?e.pageY:event.y+sdown;
  x=(e)?e.pageX:event.x+sleft;
  N=++count%bangs;
  M=Math.floor(Math.random()*3*colours.length);
  intensity[N]=5+Math.random()*4;
  for (i=N*sparks; i<(N+1)*sparks; i++) {
    Xpos[i]=x;
    Ypos[i]=y-5;
    dY[i]=(Math.random()-0.5)*intensity[N];
    dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
    decay[i]=16+Math.floor(Math.random()*16);
    Z=stars[i].style;
    if (M<colours.length) Z.color=colours[i%2?count%colours.length:M];
    else if (M<2*colours.length) Z.color=colours[count%colours.length];
    else Z.color=colours[i%colours.length];
    Z.fontSize='13px';
    Z.visibility='visible';
  }
  clearTimeout(timers[N]);
  bang(N);
}

Love Hearts Cursor
Change love hearts cursor into any symbol tutorial

/*****************************
*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);

document.onmousedown=pucker;
document.onmouseup=function(){clearTimeout(kiss);};

function pucker() {
  ox=-1;
  oy=-1;
  kiss=setTimeout('pucker()', 100);
}

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;
  }
}

Background

Butterfly Image Fall 1

@-webkit-keyframes snowflakes-fall {
    0% {
      top: -10%
    }

100% {
      top: 100%
    }
  }

@-webkit-keyframes snowflakes-shake {

0%,
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0)
    }

50% {
      -webkit-transform: translateX(80px);
      transform: translateX(80px)
    }
  }

@keyframes snowflakes-fall {
    0% {
      top: -10%
    }

100% {
      top: 100%
    }
  }

@keyframes snowflakes-shake {

0%,
    100% {
      transform: translateX(0)
    }

50% {
      transform: translateX(80px)
    }
  }

.snowflake {
    position: fixed;
    top: -10%;
    z-index: -1000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    -webkit-animation-name: snowflakes-fall, snowflakes-shake;
    -webkit-animation-duration: 10s, 3s;
    -webkit-animation-timing-function: linear, ease-in-out;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-play-state: running, running;
    animation-name: snowflakes-fall, snowflakes-shake;
    animation-duration: 10s, 3s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running
  }

.snowflake:nth-of-type(0) {
    left: 1%;
    -webkit-animation-delay: 0s, 0s;
    animation-delay: 0s, 0s
  }

.snowflake:nth-of-type(1) {
    left: 10%;
    -webkit-animation-delay: 1s, 1s;
    animation-delay: 1s, 1s
  }

.snowflake:nth-of-type(2) {
    left: 20%;
    -webkit-animation-delay: 6s, .5s;
    animation-delay: 6s, .5s
  }

.snowflake:nth-of-type(3) {
    left: 30%;
    -webkit-animation-delay: 4s, 2s;
    animation-delay: 4s, 2s
  }

.snowflake:nth-of-type(4) {
    left: 40%;
    -webkit-animation-delay: 2s, 2s;
    animation-delay: 2s, 2s
  }

.snowflake:nth-of-type(5) {
    left: 50%;
    -webkit-animation-delay: 8s, 3s;
    animation-delay: 8s, 3s
  }

.snowflake:nth-of-type(6) {
    left: 60%;
    -webkit-animation-delay: 6s, 2s;
    animation-delay: 6s, 2s
  }

.snowflake:nth-of-type(7) {
    left: 70%;
    -webkit-animation-delay: 2.5s, 1s;
    animation-delay: 2.5s, 1s
  }

.snowflake:nth-of-type(8) {
    left: 80%;
    -webkit-animation-delay: 1s, 0s;
    animation-delay: 1s, 0s
  }

.snowflake:nth-of-type(9) {
    left: 90%;
    -webkit-animation-delay: 3s, 1.5s;
    animation-delay: 3s, 1.5s
  }

.snowflake:nth-of-type(10) {
    left: 25%;
    -webkit-animation-delay: 2s, 0s;
    animation-delay: 2s, 0s
  }

.snowflake:nth-of-type(11) {
    left: 65%;
    -webkit-animation-delay: 4s, 2.5s;
    animation-delay: 4s, 2.5s
  }
</style>
<div class="snowflakes" aria-hidden="true">
  <div class="snowflake">
    <img src="https://i.imgur.com/Anpva1L.png">
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/Anpva1L.png">
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/Anpva1L.png">
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/Anpva1L.png">
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/Anpva1L.png">
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/Anpva1L.png">
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/Anpva1L.png">
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/Anpva1L.png">
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/Anpva1L.png">
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/Anpva1L.png">
  <div class="snowflake">
    <img src="https://i.imgur.com/Anpva1L.png">
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/Anpva1L.png">
  </div>
  <div class="snowflake">
    <img src="https://i.imgur.com/Anpva1L.png">
  </div>
  </div>
</div>

Symbol Fall

Floating Hearts Background
Change the floating hearts into any symbol tutorial

/***************************\
* Blobs in a Jar Effect *
* (c)2012 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/

window.onload=fill_the_jar;
var div;
var xpos=new Array();
var ypos=new Array();
var zpos=new Array();
var dx=new Array();
var dy=new Array();
var dz=new Array();
var blob=new Array(); 
var swide=800;
var shigh=600;
function fill_the_jar() {
var i, dvs;
div=document.createElement('div');
dvs=div.style;
dvs.position='fixed';
dvs.left='0px';
dvs.top='0px';
dvs.width='1px';
dvs.height='1px';
document.body.appendChild(div);
set_width();
for (i=0; i<blobs; i++) {
 add_blob(i);
 jamjar(i);
}
}

Falling Sakura Leaves

100% {
opacity: 0.2;
top: 100%
}
}

@keyframes fall {
0% {
opacity: 0.9;
top: 0
}

100% {
opacity: 0.2;
top: 100%
}
}

@-webkit-keyframes blow-soft-left {
0% {
margin-left: 0
}

100% {
margin-left: -50%
}
}

@keyframes blow-soft-left {
0% {
margin-left: 0
}

100% {
margin-left: -50%
}
}

@-webkit-keyframes blow-medium-left {
0% {
margin-left: 0
}

100% {
margin-left: -100%
}
}

@keyframes blow-medium-left {
0% {
margin-left: 0
}

100% {
margin-left: -100%
}
}

@-webkit-keyframes blow-soft-right {
0% {
margin-left: 0
}

100% {
margin-left: 50%
}
}

@keyframes blow-soft-right {
0% {
margin-left: 0
}

100% {
margin-left: 50%
}
}

@-webkit-keyframes blow-medium-right {
0% {
margin-left: 0
}

100% {
margin-left: 100%
}
}

@keyframes blow-medium-right {
0% {
margin-left: 0
}

100% {
margin-left: 100%
}
}

@-webkit-keyframes sway-0 {
0% {
-webkit-transform: rotate(-5deg)
}

40% {
-webkit-transform: rotate(28deg)
}

100% {
-webkit-transform: rotate(3deg)
}
}

@keyframes sway-0 {
0% {
-ms-transform: rotate(-5deg);
transform: rotate(-5deg)
}

40% {
-ms-transform: rotate(28deg);
transform: rotate(28deg)
}

100% {
-ms-transform: rotate(3deg);
transform: rotate(3deg)
}
}

@-webkit-keyframes sway-1 {
0% {
-webkit-transform: rotate(10deg)
}

40% {
-webkit-transform: rotate(43deg)
}

100% {
-webkit-transform: rotate(15deg)
}
}

@keyframes sway-1 {
0% {
-ms-transform: rotate(10deg);
transform: rotate(10deg)
}

40% {
-ms-transform: rotate(43deg);
transform: rotate(43deg)
}

100% {
-ms-transform: rotate(15deg);
transform: rotate(15deg)
}
}

@-webkit-keyframes sway-2 {
0% {
-webkit-transform: rotate(15deg)
}

40% {
-webkit-transform: rotate(56deg)
}

100% {
-webkit-transform: rotate(22deg)
}
}

@keyframes sway-2 {
0% {
-ms-transform: rotate(15deg);
transform: rotate(15deg)
}

40% {
-ms-transform: rotate(56deg);
transform: rotate(56deg)
}

100% {
-ms-transform: rotate(22deg);
transform: rotate(22deg)
}
}

@-webkit-keyframes sway-3 {
0% {
-webkit-transform: rotate(25deg)
}

40% {
-webkit-transform: rotate(74deg)
}

100% {
-webkit-transform: rotate(37deg)
}
}

@keyframes sway-3 {
0% {
-ms-transform: rotate(25deg);
transform: rotate(25deg)
}

40% {
-ms-transform: rotate(74deg);
transform: rotate(74deg)
}

100% {
-ms-transform: rotate(37deg);
transform: rotate(37deg)
}
}

@-webkit-keyframes sway-4 {
0% {
-webkit-transform: rotate(40deg)
}

40% {
-webkit-transform: rotate(68deg)
}

100% {
-webkit-transform: rotate(25deg)
}
}

@keyframes sway-4 {
0% {
-ms-transform: rotate(40deg);
transform: rotate(40deg)
}

40% {
-ms-transform: rotate(68deg);
transform: rotate(68deg)
}

100% {
-ms-transform: rotate(25deg);
transform: rotate(25deg)
}
}

@-webkit-keyframes sway-5 {
0% {
-webkit-transform: rotate(50deg)
}

40% {
-webkit-transform: rotate(78deg)
}

100% {
-webkit-transform: rotate(40deg)
}
}

@keyframes sway-5 {
0% {
-ms-transform: rotate(50deg);
transform: rotate(50deg)
}

40% {
-ms-transform: rotate(78deg);
transform: rotate(78deg)
}

100% {
-ms-transform: rotate(40deg);
transform: rotate(40deg)
}
}

@-webkit-keyframes sway-6 {
0% {
-webkit-transform: rotate(65deg)
}

40% {
-webkit-transform: rotate(92deg)
}

100% {
-webkit-transform: rotate(58deg)
}
}

@keyframes sway-6 {
0% {
-ms-transform: rotate(65deg);
transform: rotate(65deg)
}

40% {
-ms-transform: rotate(92deg);
transform: rotate(92deg)
}

100% {
-ms-transform: rotate(58deg);
transform: rotate(58deg)
}
}

@-webkit-keyframes sway-7 {
0% {
-webkit-transform: rotate(72deg)
}

40% {
-webkit-transform: rotate(118deg)
}

100% {
-webkit-transform: rotate(68deg)
}
}

@keyframes sway-7 {
0% {
-ms-transform: rotate(72deg);
transform: rotate(72deg)
}

40% {
-ms-transform: rotate(118deg);
transform: rotate(118deg)
}

100% {
-ms-transform: rotate(68deg);
transform: rotate(68deg)
}
}

@-webkit-keyframes sway-8 {
0% {
-webkit-transform: rotate(94deg)
}

40% {
-webkit-transform: rotate(136deg)
}

100% {
-webkit-transform: rotate(82deg)
}
}

@keyframes sway-8 {
0% {
-ms-transform: rotate(94deg);
transform: rotate(94deg)
}

40% {
-ms-transform: rotate(136deg);
transform: rotate(136deg)
}

100% {
-ms-transform: rotate(82deg);
transform: rotate(82deg)
}
}

.sakura {
background: -webkit-linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9));
background: linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9));
pointer-events: none;
position: absolute
}

</style>

// requestAnimationFrame Polyfill
var lastTime = 0;
var vendors = ['webkit', 'o', 'ms', 'moz', ''];
var vendorCount = vendors.length;

for (var x = 0; x < vendorCount && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}

if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));

var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;

return id;
};
}

if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}

// Prefixed event check
$.fn.prefixedEvent = function(type, callback) {
for (var x = 0; x < vendorCount; ++x) {
if (!vendors[x]) {
type = type.toLowerCase();
}

el = (this instanceof jQuery ? this[0] : this);
el.addEventListener(vendors[x] + type, callback, false);
}

return this;
};

// Test if element is in viewport
function elementInViewport(el) {

if (el instanceof jQuery) {
el = el[0];
}

var rect = el.getBoundingClientRect();

return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}

// Random array element
function randomArrayElem(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

// Random integer
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

/** Actual plugin code **/
$.fn.sakura = function(event, options) {

// Target element
var target = this.selector == "" ? $('body') : this;

// Defaults for the option object, which gets extended below
var defaults = {
blowAnimations: ['blow-soft-left', 'blow-medium-left', 'blow-soft-right', 'blow-medium-right'],
className: 'sakura',
fallSpeed: 1,
maxSize: 14,
minSize: 10,
newOn: 300,
swayAnimations: ['sway-0', 'sway-1', 'sway-2', 'sway-3', 'sway-4', 'sway-5', 'sway-6', 'sway-7', 'sway-8']
};

var options = $.extend({}, defaults, options);

// Default or start event
if (typeof event === 'undefined' || event === 'start') {

// Set the overflow-x CSS property on the target element to prevent horizontal scrollbars
target.css({
'overflow-x': 'hidden'
});

// Function that inserts new petals into the document
var petalCreator = function() {
if (target.data('sakura-anim-id')) {
setTimeout(function() {
requestAnimationFrame(petalCreator);
}, options.newOn);
}

// Get one random animation of each type and randomize fall time of the petals
var blowAnimation = randomArrayElem(options.blowAnimations);
var swayAnimation = randomArrayElem(options.swayAnimations);
var fallTime = ((document.documentElement.clientHeight * 0.007) + Math.round(Math.random() * 5)) * options.fallSpeed;

// Build animation
var animations =
'fall ' + fallTime + 's linear 0s 1' + ', ' +
blowAnimation + ' ' + (((fallTime > 30 ? fallTime : 30) - 20) + randomInt(0, 20)) + 's linear 0s infinite' + ', ' +
swayAnimation + ' ' + randomInt(2, 4) + 's linear 0s infinite';

// Create petal and randomize size
var petal = $('<div class="' + options.className + '" />');
var height = randomInt(options.minSize, options.maxSize);
var width = height - Math.floor(randomInt(0, options.minSize) / 3);

// Apply Event Listener to remove petals that reach the bottom of the page
petal.prefixedEvent('AnimationEnd', function() {
if (!elementInViewport(this)) {
$(this).remove();
}
})
// Apply Event Listener to remove petals that finish their horizontal float animation
.prefixedEvent('AnimationIteration', function(ev) {
if (
(
$.inArray(ev.animationName, options.blowAnimations) != -1 ||
$.inArray(ev.animationName, options.swayAnimations) != -1
) &&
!elementInViewport(this)
) {
$(this).remove();
}
})
.css({
'-webkit-animation': animations,
animation: animations,
'border-radius': randomInt(options.maxSize, (options.maxSize + Math.floor(Math.random() * 10))) + 'px ' + randomInt(1, Math.floor(width / 4)) + 'px',
height: height + 'px',
left: (Math.random() * document.documentElement.clientWidth - 100) + 'px',
'margin-top': (-(Math.floor(Math.random() * 20) + 15)) + 'px',
width: width + 'px'
});

target.append(petal);
};

// Finally: Start adding petals
target.data('sakura-anim-id', requestAnimationFrame(petalCreator));

}
// Stop event, which stops the animation loop and removes all current blossoms
else if (event === 'stop') {

// Cancel animation
var animId = target.data('sakura-anim-id');

if (animId) {
cancelAnimationFrame(animId);
target.data('sakura-anim-id', null);
}

// Remove all current blossoms
setTimeout(function() {
$('.' + options.className).remove();
}, (options.newOn + 50));

}
};
}(jQuery));

$(document).ready(function() {
$('body').sakura();
});

</script>

Bubble Bath

/****************************
*   JavaScript Bubble Bath  *
*(c)2010-13 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/

var swide=800;
var shigh=600;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
var boddie;
var ie_version=(navigator.appVersion.indexOf("MSIE")!=-1)?parseFloat(navigator.appVersion.split("MSIE")[1]):false;

addLoadEvent(bubba);

function bubba() { if (document.getElementById) {
  var i, rats, div;
  boddie=document.createElement("div");
  boddie.style.position="fixed";
  boddie.style.top="0px";
  boddie.style.left="0px";
  boddie.style.overflow="visible";
  boddie.style.width="1px";
  boddie.style.height="1px";
  boddie.style.backgroundColor="transparent";
  boddie.style.zIndex="0";
  document.body.appendChild(boddie);
  set_width();
  for (i=0; i<bubbles; i++) {
    rats=createDiv("3px", "3px");

div=createDiv("auto", "auto");
    rats.appendChild(div);
	div=div.style;
    div.top="1px";
    div.left="0px";
	div.bottom="1px";
	div.right="0px";
	div.borderLeft="1px solid "+colours[3];
	div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");
	rats.appendChild(div);
	div=div.style;
    div.top="0px";
    div.left="1px";
	div.right="1px";
	div.bottom="0px"
	div.borderTop="1px solid "+colours[0];
	div.borderBottom="1px solid "+colours[2];

boddie.appendChild(rats);
	bubb[i]=rats.style;
	bubb[i].zIndex=(over_or_under=="over")?"1001":"0";
  }
  bubble();
}}

function bubble() {
  var c;
  for (c=0; c<bubbles; c++) if (!bubby[c] && Math.random()<0.333) {
    bubb[c].left=(bubbx[c]=Math.floor(swide/6+Math.random()*swide/1.5)-10)+"px";
    bubb[c].top=(bubby[c]=shigh)+"px";
    bubb[c].width="3px";
	bubb[c].height="3px"
	bubb[c].visibility="visible";
	bubbs[c]=3;
    break;
  }
  for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
  setTimeout("bubble()", 40);
}