<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() {
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>
