66 lines
1.6 KiB
HTML
66 lines
1.6 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<style type="text/css">
|
||
|
|
html, body {
|
||
|
|
margin: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
}
|
||
|
|
#top {
|
||
|
|
-webkit-box-flex: 1;
|
||
|
|
}
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Roboto Medium';
|
||
|
|
src: url(../ttf/Roboto-Medium.ttf);
|
||
|
|
}
|
||
|
|
#text {
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
font-family: 'Roboto Medium';
|
||
|
|
//font-size: 18pt;
|
||
|
|
//font-family: Helvetica, Arial, sans-serif;
|
||
|
|
//font-weight: bold;
|
||
|
|
}
|
||
|
|
#bottom {
|
||
|
|
-webkit-box-flex: 1;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function Producer(textStyle) {
|
||
|
|
this.textStyle = textStyle;
|
||
|
|
}
|
||
|
|
Producer.prototype.render = function(time) {
|
||
|
|
// Use em units which are proportional to font-size,
|
||
|
|
// which is being set to proportional to page render size.
|
||
|
|
// Vary x offset from -0.2 to 0.2.
|
||
|
|
//this.textStyle.textShadow = ((time * 0.4) - 0.2) + "em -0.2em 0.3em black";
|
||
|
|
//var text = document.getElementById("text");
|
||
|
|
//text.innerText = time;
|
||
|
|
}
|
||
|
|
function onLoad() {
|
||
|
|
handleFontSize();
|
||
|
|
var text = document.getElementById("text");
|
||
|
|
text.innerText = webvfx.getStringParameter("title");
|
||
|
|
var producer = new Producer(text.style);
|
||
|
|
webvfx.renderRequested.connect(producer, Producer.prototype.render);
|
||
|
|
webvfx.readyRender(true);
|
||
|
|
}
|
||
|
|
function handleFontSize() {
|
||
|
|
// 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("resize", handleFontSize, false);
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="top"></div>
|
||
|
|
<div id="text"></div>
|
||
|
|
<div id="bottom"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|