WebVfx: examples/transition-demo.html

This is an example MLT transition implemented in HTML. It uses all three image types and a string title parameter. The rendered video can be viewed here demo/mlt/mlt_transition_demo_html
<html>
<head>
<style type="text/css">
  body, html {
    width: 100%, height: 100%;
    margin: 0;
  }
  body {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
  }
  #title {
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
    font-size: 120%;
    text-shadow: 0 1px 0 white;
    color: #777;
    position: relative;
  }
  img {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  #targetImg {
    top: 100%;
    left: 100%;
  }
</style>
<script type="text/javascript">
function Transition(sourceImage, targetImage, backgroundImage, titleElement) {
    this.sourceImage = sourceImage;
    this.targetImage = targetImage;
    this.backgroundImage = backgroundImage;
    this.titleElement = titleElement;

    titleElement.innerText = webvfx.getStringParameter('title');
}

Transition.prototype.render = function (time) {
    webvfx.getImage('sourceImage').assignToHTMLImageElement(this.sourceImage);
    webvfx.getImage('targetImage').assignToHTMLImageElement(this.targetImage);
    webvfx.getImage('backgroundImage').assignToHTMLImageElement(this.backgroundImage);

    this.sourceImage.style.top =
        this.sourceImage.style.left = -(time * 100) + "%";
    this.targetImage.style.top =
        this.targetImage.style.left = (100 - (time * 100)) + "%";
    this.titleElement.style.webkitTransform = "rotate(" + (time * 360) + "deg)";
}

function onLoad() {
    onResize();
    var transition = new Transition(document.getElementById("sourceImg"),
                                    document.getElementById("targetImg"),
                                    document.getElementById("backgroundImg"),
                                    document.getElementById("title"));


    webvfx.renderRequested.connect(transition, Transition.prototype.render);
    webvfx.imageTypeMap = {
                              "sourceImage" : webvfx.SourceImageType,
                              "targetImage" : webvfx.TargetImageType,
                              "backgroundImage" : webvfx.ExtraImageType
                          };
    webvfx.readyRender(true)
}
function onResize() {
    // Set base font-size to 10% of window height
    document.body.style.fontSize = (window.innerHeight * 0.1) + "px";
}
window.addEventListener("load", onLoad, false);
window.addEventListener("load", onResize, false);
</script>
</head>
<body>
    <img id="backgroundImg"/>
    <img id="sourceImg"/>
    <img id="targetImg"/>
    <div id="title">title</div>
</body>
</html>