SCRIPTED - Cursor and Background

</script>

Image cursor trail

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

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>

Custom Image Fall 2

Description:
Same as the other one, except it's only on the middle of the carrd and not covering the whole thing.
How to:
Step 1. Copy this code
Step 2. Change the gif in the img src to your liking (I recommend using pixels to not cover your text by making your images too big).
Step 3. Click save & you're done

------

.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;
}

@-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:9999;-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= "IMAGE">
</div>
<div class="snowflake">
<img src= "IMAGE">
</div>
<div class="snowflake">
<img src= "IMAGE">
</div>
<div class="snowflake">
<img src= "IMAGE">
</div>
<div class="snowflake">
<img src= "IMAGE">
</div>
<div class="snowflake">
<img src= "IMAGE">
</div>
<div class="snowflake">
<img src= "IMAGE">
</div>
<div class="snowflake">
<img src= "IMAGE">
</div>
<div class="snowflake">
<img src= "IMAGE">
</div>
<div class="snowflake">
<img src= "IMAGE">
</div>
<div class="snowflake">
<img src= "IMAGE">
</div>
<div class="snowflake">
<img src= "IMAGE">
</div>
</div>

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 Background

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 Background

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