text

2017-02-17 23:18:52 +01:00 · 2017-02-17 23:18:52 +01:00 · 490ec82c17
commit 490ec82c17
parent e101bf2e5d
1 changed files with 65 additions and 0 deletions
--- a/text.html
+++ b/text.html
@ -0,0 +1,65 @@
+<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>