Javascript und Userscript
Ich habe so eine Vision, Frage ist, ob man sowas umsetzen kann.
1. Ich möchte, dass es in meinen Browser schneit. Ist ja Winter.
2. Sowas wie ein Vorhang oder Schiebetür, wenn ich eine Seite betrete ,dass dann die Tür/Vorhang dann aufgeht.
Ist sowas möglich?
Gibt es sowas schon?
Der hier verwendete Code
<h1>Lösung von Sempervivum,</h1>
<style>
body {
margin: 0;
padding: 0;
}
#wrap {
width: 100vw;
height: 450px;
background-image: url(image/Weihnachtsmarkt.jpg);
background-size: cover;
}
#canvascurtain {
width: 100%;
height: 100%
}
</style>
<div id="wrap">
<canvas id="canvascurtain" width="613" height="854"></canvas>
</div>
<script>
var cv = document.getElementById("canvascurtain");
var ctx = cv.getContext("2d");
var img = new Image();
function imgload() {
var img = this;
var wimg = this.width, himg = this.height;
cv.width = 2 * this.width;
cv.height = this.height;
var time = 0, duration = 20000, intv = 15, counter = 0;
var m = 200, v = 0, deltabottom = 0;
function update() {
counter++;
if (true/*counter % 2*/) {
ctx.clearRect(0, 0, wimg, himg);
var deltatop = time / duration * 10;
if (deltatop > 0.8) deltatop = 0.8;
v += (deltabottom - deltatop) / m - v / 40;
deltabottom -= v;
for (var y = 0, i = 0, inewbase = 0; y < himg; y++) {
var inewbasenew = inewbase + wimg * 4;
var factor1 = y / himg;
var delta = (deltatop * (1 - factor1) + deltabottom * factor1);
var factor = 1 - delta;
var currentwidth = wimg * factor;
ctx.drawImage(img, 0, y, currentwidth, 1);
ctx.translate(2 * wimg, 0);
ctx.scale(-1, 1);
ctx.drawImage(img, 0, y, currentwidth, 1);
ctx.scale(1, 1);
}
}
time += intv;
if (time < duration) requestAnimationFrame(update);
}
requestAnimationFrame(update);
}
img.onload = imgload;
img.src = "image/vorhang-links.jpg";
</script>