Hierbij de HTML code. Het gaat om een kerstkaart waar sneeuw overheen valt. Vandaar de lange code.
<!DOCTYPE html>
<html>
<head>
<title>Opzet 1</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
}
h1 {
position: absolute;
top: 20%;
height: 50px;
width: 100%;
margin-top: -25px;
color: white;
font-family: 'Croissant One';
font-size: 36px;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#snowglobe {
width: 100%;
height: 100%;
position: relative;
top: 0;
left: 0;
overflow: hidden;
}
#img {
width: 100%;
height:100%;
color: #ffc800;
}
#snowglobe .flake {
position: absolute;
width: 1px;
height: 1px;
color: rgba(0,0,0,0);
text-shadow: 0 0 4px rgba(255,255,255,1);
}
</style>
</head>
<body>
<div id="snowglobe">
<div id="img"><img src="opzet-1.jpg" border="0px" width="100%" /></div>
<h1></h1>
</div>
<script>
function getWidth() {
var x = 0;
if (self.innerHeight) {
x = self.innerWidth;
}
else if (document.documentElement && document.documentElement.clientHeight) {
x = document.documentElement.clientWidth;
}
else if (document.body) {
x = document.body.clientWidth;
}
return x;
}
function getHeight() {
var y = 0;
if (self.innerHeight) {
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
y = document.documentElement.clientHeight;
}
else if (document.body) {
y = document.body.clientHeight;
}
return y;
}
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var width = getWidth();
var height = getHeight();
var flakeCount = 120;
var gravity = 2;
var windSpeed = 50;
var flakes = [];
function doAnimation() {
for (var i = 0; i < flakes.length; i++) {
newX = false;
newY = false;
// Calculate Y position
newY = parseFloat(flakes
.style.top) + (flakes.speed / 100) * gravity;
if (newY > height) {
newY = 0 - parseInt(flakes.style.fontSize);
// If Y is at bottom, randomize X
newX = getRandom(0, width);
}
// Calculate X position if it hasn't been set randomly
if (!newX) newX = parseFloat(flakes.style.left) + Math.sin(newY / windSpeed);
if (newX < -20) newX = width + 20;
if (newX > width + 20) newX = -20;
// Set new position
flakes.style.top = newY + 'px';
flakes.style.left = newX + 'px';
}
}
var currentFlake = 0;
var snowglobe = document.getElementById("snowglobe");
while (currentFlake < flakeCount) {
var flake = document.createElement("div");
flake.className = 'flake';
flake.style.fontSize = getRandom(24, 36) + 'px';
flake.style.top = getRandom(0, height) + 'px';
flake.style.left = getRandom(0, width) + 'px';
flake.innerHTML = "•";
newFlake = snowglobe.appendChild(flake);
newFlake.speed = getRandom(1, 100);
flakes.push(newFlake);
currentFlake++;
}
setInterval(doAnimation, 10);
window.onresize = function(event) {
width = getWidth();
height = getHeight();
}
</script>
</body>
</html>
