dela v osnovi

2018-03-13 22:24:34 +01:00 · 2018-03-13 22:24:34 +01:00 · 012487bf64
commit 012487bf64
4 changed files with 137 additions and 0 deletions
--- a/žogo).mp4
+++ b/žogo).mp4
--- a/animacija.js
+++ b/animacija.js
@ -0,0 +1,108 @@
+var zaporedje = [
+    {
+        tip: "tekst",
+        vsebina: "neprekinjeno",
+        len: 0.5,
+        pavza: 0.1
+    },
+    {
+        tip: "tekst",
+        vsebina: "nizanje",
+        len: 0.5,
+        pavza: 0.1
+    },
+    {
+        tip: "tekst",
+        vsebina: "istih",
+        len: 0.5,
+        pavza: 0.1
+    },
+    {
+        tip: "tekst",
+        vsebina: "glasov",
+        len: 0.5,
+        pavza: 0.5
+    },
+    {
+        tip: "tekst",
+        vsebina: "je",
+        len: 0.2,
+        pavza: 0.1
+    },
+    {
+        tip: "tekst",
+        vsebina: "dobesedno",
+        len: 0.666,
+        pavza: 0.1
+    },
+    {
+        tip: "tekst",
+        vsebina: "slušni",
+        len: 0.5,
+        pavza: 0.1
+    },
+    {
+        tip: "tekst",
+        vsebina: "dražljaj",
+        len: 0.666,
+        pavza: 0.3
+    },
+    {
+        tip: "strobe",
+        len: 4,
+        interval: 0.05,
+        pavza: 3
+    }
+];
+
+document.addEventListener('DOMContentLoaded', function () {
+    stevec = 0;
+    barva = true;
+    crka_el = document.getElementById("crka");
+    body_el = document.body;
+
+    function zamenjajBarve() {
+        if (barva) {
+            body_el.style.backgroundColor = "white";
+            crka_el.style.color = "black";
+        } else {
+            body_el.style.backgroundColor = "black";
+            crka_el.style.color = "white";
+        }
+        barva = !barva;
+    }
+
+    function predvajajKos(kos) {
+        if (kos.tip === "tekst") {
+            var crka_interval = kos.len / kos.vsebina.length;
+            kos.vsebina.split("").map(function(crka) {
+                setTimeout(function () {
+                    zamenjajBarve();
+                    crka_el.innerHTML = crka;
+                }, stevec * 1000);
+                stevec += crka_interval;
+            });
+        } else if (kos.tip === "strobe") {
+            setTimeout(function () {
+                crka_el.innerHTML = "";
+            }, stevec * 1000);
+
+            for (i = 0; i < kos.len; i += kos.interval) {
+                setTimeout(function () {
+                    zamenjajBarve();
+                }, stevec * 1000);
+                stevec += kos.interval;
+            }
+        }
+
+        stevec += kos.pavza;
+    }
+
+    function zacetek () {
+        zaporedje.map(predvajajKos);
+
+        setTimeout(zacetek, stevec);
+    }
+
+    setTimeout(zacetek, 2000);
+});
--- a/index.html
+++ b/index.html
@ -0,0 +1,29 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Fingernails on a chalkboard</title>
+        <style type="text/css">
+         html,body {
+             height: 100%;
+         }
+         body {
+             margin: 0;
+             background-color: black;
+             display: flex;
+             align-items: center;
+             justify-content: center;
+             user-select: none;
+             cursor: none;
+         }
+         #crka {
+             color: white;
+             font-family: Courier;
+             font-size: 12rem;
+         }
+        </style>
+        <script src="animacija.js" type="text/javascript"></script>
+    </head>
+    <body>
+        <span id="crka"></span>
+    </body>
+</html>
--- a/zvok.oga
+++ b/zvok.oga