2017-02-17 22:18:52 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
html, body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
body {
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
-webkit-box-orient: vertical;
|
2017-03-02 21:09:27 +00:00
|
|
|
overflow: hidden;
|
2017-02-17 22:18:52 +00:00
|
|
|
}
|
|
|
|
|
#top {
|
|
|
|
|
-webkit-box-flex: 1;
|
|
|
|
|
}
|
|
|
|
|
#text {
|
2017-03-02 21:09:27 +00:00
|
|
|
color: #fff;
|
2017-03-15 10:15:45 +00:00
|
|
|
//color: rgb(192, 192, 192);
|
2017-03-02 21:09:27 +00:00
|
|
|
text-align: center;
|
2017-03-05 19:58:21 +00:00
|
|
|
font-family: Menlo;
|
2017-03-15 10:15:45 +00:00
|
|
|
//font-variant: small-caps;
|
|
|
|
|
//text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black;
|
|
|
|
|
|
|
|
|
|
text-shadow: 2px 4px 3px black;
|
|
|
|
|
|
2017-03-02 21:09:27 +00:00
|
|
|
//text-transform: uppercase;
|
2017-03-05 19:58:21 +00:00
|
|
|
//font-weight: bold;
|
2017-03-02 21:09:27 +00:00
|
|
|
}
|
|
|
|
|
#text2 {
|
2017-02-17 22:18:52 +00:00
|
|
|
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() {
|
|
|
|
|
var text = document.getElementById("text");
|
|
|
|
|
text.innerText = webvfx.getStringParameter("title");
|
2017-03-02 21:09:27 +00:00
|
|
|
handleFontSize();
|
2017-02-17 22:18:52 +00:00
|
|
|
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
|
2017-03-15 10:15:45 +00:00
|
|
|
//document.body.style.fontSize = (window.innerHeight * 0.1) + "px";
|
|
|
|
|
//document.body.style.fontSize = (window.innerHeight * 0.05) + "px";
|
|
|
|
|
document.body.style.fontSize = (window.innerHeight * 0.09) + "px";
|
|
|
|
|
|
2017-03-05 19:58:21 +00:00
|
|
|
/*
|
2017-03-02 21:09:27 +00:00
|
|
|
|
|
|
|
|
var fontSize = window.innerHeight * 0.1;
|
|
|
|
|
text.style.position = 'absolute';
|
|
|
|
|
var padding = 48;
|
|
|
|
|
text.style.paddingLeft = padding + 'px';
|
|
|
|
|
do {
|
|
|
|
|
console.log(text.getBoundingClientRect().width, window.innerWidth);
|
|
|
|
|
document.body.style.fontSize = fontSize + 'px';
|
|
|
|
|
fontSize += 4;
|
|
|
|
|
} while (text.getBoundingClientRect().width < (window.innerWidth - padding));
|
|
|
|
|
text.style.position = '';
|
|
|
|
|
text.style.paddingLeft = '0';
|
2017-03-05 19:58:21 +00:00
|
|
|
*/
|
2017-02-17 22:18:52 +00:00
|
|
|
}
|
|
|
|
|
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>
|
