Configuring a html page from an original demo page
- by Wold
I forked into rainyday.js through github, an awesome javascript program made by maroslaw at this link: https://github.com/maroslaw/rainyday.js. Basically I tried taking his demo page and my own photo city.jpg and changed the applicable fields so that I could run it on my own site, but only the picture loads and the script itself doesn't start to run. I'm pretty new to html and javascript so I'm probably omitting something very simple, but here is the script for the demo code:
<script src="rainyday.js"></script>
<script>
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,''])[1].replace(/\+/g, '%20'))||null;
}
function demo() {
var image = document.getElementById('background');
image.onload = function () {
var engine = null;
var preset = getURLParameter('preset') || '1';
if (preset === '1') {
engine = new RainyDay({
element: 'background',
blur: 10,
opacity: 1,
fps: 30,
speed: 30
});
engine.rain([ [1, 2, 8000] ]);
engine.rain([ [3, 3, 0.88], [5, 5, 0.9], [6, 2, 1] ], 100);
} else if (preset === '2') {
engine = new RainyDay({
element: 'background',
blur: 10,
opacity: 1,
fps: 30,
speed: 30
});
engine.VARIABLE_GRAVITY_ANGLE = Math.PI / 8;
engine.rain([ [0, 2, 0.5], [4, 4, 1] ], 50);
} else if (preset === '3') {
engine = new RainyDay({
element: 'background',
blur: 10,
opacity: 1,
fps: 30,
speed: 30
});
engine.trail = engine.TRAIL_SMUDGE;
engine.rain([ [0, 2, 0.5], [4, 4, 1] ], 100);
}
};
image.crossOrigin = 'anonymous';
if (getURLParameter('imgur')) {
image.src = 'http://i.imgur.com/' + getURLParameter('imgur') + '.jpg';
} else if (getURLParameter('img')) {
image.src = getURLParameter('img') + '.jpg';
}
var youtube = getURLParameter('youtube');
if (youtube) {
var div = document.getElementById('sound');
var player = document.createElement('iframe');
player.frameborder = '0';
player.height = '1';
player.width = '1';
player.src = 'https://youtube.com/embed/' + youtube + '?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1';
div.appendChild(player);
}
}
</script>
This is where I am naming my background and specifying the photo from within the directory.
<body onload="demo();">
<div id="sound" style="z-index: -1;"></div>
<div id="parent">
<img id='background' alt="background" src="city.jpg" />
</div>
</body>
The actual code for the whole entire rainyday.js script can be found here: https://github.com/maroslaw/rainyday.js/blob/master/rainyday.js
Thanks in advance for any help and advice!
