JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div id="wrap">
    <canvas id="canvascurtain" width="613" height="854"></canvas>
</div>

CSS

body {
  margin: 0;
  padding: 0;

}
#wrap {
  width: 100vw;
  height: 100vh;
  background-image: url(http://webentwicklung.ulrichbangert.de/images/2017-12-18-Wolfenbuettel-Weihnachtsmarkt-06.jpg);
  background-size: cover;
}
#canvascurtain {
  width: 100%;
  height: 100%
}

JavaScript

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 = "http://webentwicklung.ulrichbangert.de/images/vorhang-links-3.jpg";