diff --git a/animacija.js b/animacija.js index 7c1d263..3a47be8 100644 --- a/animacija.js +++ b/animacija.js @@ -1,10 +1,11 @@ -//const branje = 6666 -//const branjeNaslova = 1700 +const branje = 6666 +const branjeNaslova = 1700 const mrmranje = 1000 // Debug: za hitrenje -const branje = 66 -const branjeNaslova = 10 +//const branje = 66 +//const branjeNaslova = 10 +//const mrmranje = 10 const naslov = [ "MANIFEST", @@ -38,53 +39,76 @@ const introTekst = [ "PSSS: Mučitelj hodi po literarnih večerih." ] +const za = x => ({ + vsebina: "", + len: 0, + pavza: x +}) +const zb = { + vsebina: "neprekinjeno", + len: 650, + pavza: 250 +} +const zc = { + vsebina: "nizanje", + len: 400, + pavza: 200 +} +const zd = { + vsebina: "istih", + len: 350, + pavza: 150 +} +const ze = { + vsebina: "glasov", + len: 350, + pavza: 100 +} +const zf = { + vsebina: "je", + len: 160, + pavza: 40 +} +const zg = { + vsebina: "dobesedno", + len: 450, + pavza: 200 +} +const zgb = { + vsebina: "dobesed", + len: 400, + pavza: 200 +} +const zh = { + vsebina: "slušni", + len: 400, + pavza: 100 +} +const zi = { + vsebina: "dražljaj", + len: 666, + pavza: 250 +} +const strb = (len, pavza) => ({ + len, + pavza +}) + const zaporedje = [ - { - vsebina: "neprekinjeno", - len: 500, - pavza: 100 - }, - { - vsebina: "nizanje", - len: 500, - pavza: 100 - }, - { - vsebina: "istih", - len: 500, - pavza: 100 - }, - { - vsebina: "glasov", - len: 500, - pavza: 500 - }, - { - vsebina: "je", - len: 200, - pavza: 100 - }, - { - vsebina: "dobesedno", - len: 666, - pavza: 100 - }, - { - vsebina: "slušni", - len: 500, - pavza: 100 - }, - { - vsebina: "dražljaj", - len: 666, - pavza: 300 - } + za(1200), zb, zc, zd, ze, zf, zg, zh, zi, + za(300), zb, zc, zd, ze, zf, zgb, strb(1300, 0), + za(0), zb, zc, zd, ze, zf, zg, zh, zi, + za(300), zb, zc, zd, ze, zf, zgb, strb(1200, 0), + za(0), zb, zc, zd, ze, zf, zg, zh, zi, + za(0), zb, zc, zd, ze, zf, zgb, strb(1300, 0), + za(0), zb, zc, zd, ze, zf, strb(1850, 0), + za(0), zb, zc, zd, ze, zf, zg, strb(1200, 0), ] const barvA = barva => barva ? "white" : "black" const barvB = barva => barva ? "black" : "white" -const zamenjajBarve = barva => { +function zamenjajBarve (barva) { document.body.style.backgroundColor = barvA(barva) document.crka.style.color = barvB(barva) document.barva = !barva @@ -92,32 +116,49 @@ const zamenjajBarve = barva => { const zamenjajCrko = crka => document.crka.innerHTML = crka +function strobe (timestamp) { + zamenjajBarve(document.barva) + if (timestamp < document.koncajStrobe) requestAnimationFrame(strobe) +} + +function startStrobe(timestamp) { + document.koncajStrobe += timestamp + requestAnimationFrame(strobe) +} + function animacija(kosi, stevec) { const konec = kosi.reduce((stk, kos) => { - kos.vsebina.split("").map((crka, idx, { length }) => { - setTimeout(() => { - zamenjajBarve(document.barva) - zamenjajCrko(crka) - }, stk + idx / length * kos.len) - }) - setTimeout(() => zamenjajCrko(""), stk + kos.len + 0.05) + // Crka? + if (kos.vsebina !== undefined) { + kos.vsebina.split("").map((crka, idx, { length }) => { + setTimeout(() => { + zamenjajBarve(document.barva) + zamenjajCrko(crka) + }, stk + idx / length * kos.len) + }) + + setTimeout(() => zamenjajCrko(""), stk + kos.len + 0.05) + //Strobe? + } else { + setTimeout(() => { + zamenjajCrko("") + document.koncajStrobe = kos.len + requestAnimationFrame(startStrobe) + }, stk) + } return stk + kos.len + kos.pavza }, stevec) + // Na koncu ponovimo vajo setTimeout(() => { zamenjajCrko("") - const ponovitev = new Date().getTime() + 4000 - console.log("strobe!", ponovitev) - const strobe = timestamp => { - document.zamenjajBarve(document.barva) - (timestamp < ponovitev) ? requestAnimationFrame(strobe) : setTimeout(zacetek, ponovitev) - } - - requestAnimationFrame(strobe) - strobe() + animacija(zaporedje, 0) + document.zvok.pause() + document.zvok.currentTime = 0 + document.zvok.play() }, konec) } @@ -129,6 +170,7 @@ const podnaslovljenje = (kosi, stevec) => { const pricetek = stevec + kosi.length * branjeNaslova + mrmranje setTimeout(() => { document.crka.style.fontSize = "16rem" + document.zvok.play() }, pricetek) animacija(zaporedje, pricetek) } @@ -165,6 +207,7 @@ const zacetek = () => { document.addEventListener('DOMContentLoaded', () => { document.barva = true document.crka = document.getElementById("crka") + document.zvok = document.getElementById("zvok") document.zamenjajBarve = zamenjajBarve document.body.style.backgroundColor = "white" diff --git a/index.html b/index.html index 4b8cd44..b4bee9e 100644 --- a/index.html +++ b/index.html @@ -21,5 +21,8 @@
+