Naslovi, podnaslavljanje, tajmingi
Jure Podgoršek
parent
012487bf64
commit
ffd2bbde27
217
animacija.js
217
animacija.js
|
|
@ -1,108 +1,175 @@
|
|||
var zaporedje = [
|
||||
//const branje = 6666
|
||||
//const branjeNaslova = 1700
|
||||
const mrmranje = 1000
|
||||
|
||||
// Debug: za hitrenje
|
||||
const branje = 66
|
||||
const branjeNaslova = 10
|
||||
|
||||
const naslov = [
|
||||
"MANIFEST",
|
||||
"SENZORIČNE",
|
||||
"POEZIJE"
|
||||
]
|
||||
|
||||
const podnaslov = [
|
||||
"Finger",
|
||||
"nails",
|
||||
"on",
|
||||
"a",
|
||||
"Chalkboard",
|
||||
"(Ono",
|
||||
"mato",
|
||||
"poija",
|
||||
"na",
|
||||
"drugo",
|
||||
"žogo)"
|
||||
]
|
||||
|
||||
const introTekst = [
|
||||
"Do sedaj so ob poeziji z vsemi čuti in čutili, telesno in fizično, trpeli samo pesniki – MORALI pa bi tudi poslušalci!",
|
||||
"Zavijanje z očmi, zehanje, ošinjanje urnih kazalcev – vsi ti preživetveni manevri, s katerimi se pretolčemo skozi bestialni napor literarnih branj, do sedaj še nikoli niso odtehtali torture pisanja literature;",
|
||||
"zlogov ritma, ki tolčejo ob oboke lobanje in se kot seizmografski zapisi utelešajo na papirju ali ekranu.",
|
||||
"Ti zahtevajo, da se k njim vedno znova vrača, kot Severin k udarcem svoje Wande – ker je pisanje disciplina, disciplina zaklinjanja razklenitve sintakse!",
|
||||
"Naloga in končni cilj senzorične poezije je zatorej samo ena: dlakocepsko cepiti živčne končiče – S CIRKULARKO!",
|
||||
"Senzorična poezija je poslednji glogov kol, zaboden v čifutsko srce vampirja, ki ne more umreti – Adorna!",
|
||||
"Poezija po holokavstu JE mogoča. Poezija 21. stoletja naj bo torej poezija Abu-Ghraiba in Guantanama, ali pa naj za vekomaj umolkne!",
|
||||
"Smrt vsem, živela Centrala!",
|
||||
"PSSS: Mučitelj hodi po literarnih večerih."
|
||||
]
|
||||
|
||||
const zaporedje = [
|
||||
{
|
||||
tip: "tekst",
|
||||
vsebina: "neprekinjeno",
|
||||
len: 0.5,
|
||||
pavza: 0.1
|
||||
len: 500,
|
||||
pavza: 100
|
||||
},
|
||||
{
|
||||
tip: "tekst",
|
||||
vsebina: "nizanje",
|
||||
len: 0.5,
|
||||
pavza: 0.1
|
||||
len: 500,
|
||||
pavza: 100
|
||||
},
|
||||
{
|
||||
tip: "tekst",
|
||||
vsebina: "istih",
|
||||
len: 0.5,
|
||||
pavza: 0.1
|
||||
len: 500,
|
||||
pavza: 100
|
||||
},
|
||||
{
|
||||
tip: "tekst",
|
||||
vsebina: "glasov",
|
||||
len: 0.5,
|
||||
pavza: 0.5
|
||||
len: 500,
|
||||
pavza: 500
|
||||
},
|
||||
{
|
||||
tip: "tekst",
|
||||
vsebina: "je",
|
||||
len: 0.2,
|
||||
pavza: 0.1
|
||||
len: 200,
|
||||
pavza: 100
|
||||
},
|
||||
{
|
||||
tip: "tekst",
|
||||
vsebina: "dobesedno",
|
||||
len: 0.666,
|
||||
pavza: 0.1
|
||||
len: 666,
|
||||
pavza: 100
|
||||
},
|
||||
{
|
||||
tip: "tekst",
|
||||
vsebina: "slušni",
|
||||
len: 0.5,
|
||||
pavza: 0.1
|
||||
len: 500,
|
||||
pavza: 100
|
||||
},
|
||||
{
|
||||
tip: "tekst",
|
||||
vsebina: "dražljaj",
|
||||
len: 0.666,
|
||||
pavza: 0.3
|
||||
},
|
||||
{
|
||||
tip: "strobe",
|
||||
len: 4,
|
||||
interval: 0.05,
|
||||
pavza: 3
|
||||
len: 666,
|
||||
pavza: 300
|
||||
}
|
||||
];
|
||||
]
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
stevec = 0;
|
||||
barva = true;
|
||||
crka_el = document.getElementById("crka");
|
||||
body_el = document.body;
|
||||
const barvA = barva => barva ? "white" : "black"
|
||||
const barvB = barva => barva ? "black" : "white"
|
||||
|
||||
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;
|
||||
const zamenjajBarve = barva => {
|
||||
document.body.style.backgroundColor = barvA(barva)
|
||||
document.crka.style.color = barvB(barva)
|
||||
document.barva = !barva
|
||||
}
|
||||
|
||||
const zamenjajCrko = crka => document.crka.innerHTML = crka
|
||||
|
||||
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)
|
||||
|
||||
return stk + kos.len + kos.pavza
|
||||
}, stevec)
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
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);
|
||||
requestAnimationFrame(strobe)
|
||||
strobe()
|
||||
}, konec)
|
||||
}
|
||||
|
||||
for (i = 0; i < kos.len; i += kos.interval) {
|
||||
setTimeout(function () {
|
||||
zamenjajBarve();
|
||||
}, stevec * 1000);
|
||||
stevec += kos.interval;
|
||||
}
|
||||
}
|
||||
const podnaslovljenje = (kosi, stevec) => {
|
||||
kosi.map((kos, idx) => setTimeout(() => {
|
||||
zamenjajCrko(kos)
|
||||
}, stevec + idx * branjeNaslova))
|
||||
|
||||
stevec += kos.pavza;
|
||||
}
|
||||
const pricetek = stevec + kosi.length * branjeNaslova + mrmranje
|
||||
setTimeout(() => {
|
||||
document.crka.style.fontSize = "16rem"
|
||||
}, pricetek)
|
||||
animacija(zaporedje, pricetek)
|
||||
}
|
||||
|
||||
function zacetek () {
|
||||
zaporedje.map(predvajajKos);
|
||||
const uvod = (kosi, stevec) => {
|
||||
kosi.map((kos, idx) => setTimeout(() => {
|
||||
zamenjajCrko(kos)
|
||||
}, stevec + idx * branje))
|
||||
|
||||
setTimeout(zacetek, stevec);
|
||||
}
|
||||
const pricetek = stevec + kosi.length * branje
|
||||
setTimeout(() => {
|
||||
document.crka.style.fontSize = "12rem"
|
||||
}, pricetek)
|
||||
podnaslovljenje(podnaslov, pricetek)
|
||||
}
|
||||
|
||||
setTimeout(zacetek, 2000);
|
||||
});
|
||||
const naslovljenje = (kosi, stevec) => {
|
||||
kosi.map((kos, idx) => setTimeout(() => {
|
||||
zamenjajCrko(kos)
|
||||
}, stevec + idx * branjeNaslova))
|
||||
|
||||
const pricetek = stevec + kosi.length * branjeNaslova + mrmranje
|
||||
setTimeout(() => {
|
||||
document.crka.style.fontSize = "4rem"
|
||||
}, pricetek)
|
||||
uvod(introTekst, pricetek)
|
||||
}
|
||||
|
||||
const zacetek = () => {
|
||||
document.crka.style.fontSize = "12rem"
|
||||
naslovljenje(naslov, mrmranje)
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.barva = true
|
||||
document.crka = document.getElementById("crka")
|
||||
document.zamenjajBarve = zamenjajBarve
|
||||
|
||||
document.body.style.backgroundColor = "white"
|
||||
document.crka.style.color = "black"
|
||||
document.crka.style.fontFamily = "Courier New"
|
||||
|
||||
zacetek()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0 10rem;
|
||||
background-color: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -15,11 +16,6 @@
|
|||
user-select: none;
|
||||
cursor: none;
|
||||
}
|
||||
#crka {
|
||||
color: white;
|
||||
font-family: Courier;
|
||||
font-size: 12rem;
|
||||
}
|
||||
</style>
|
||||
<script src="animacija.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
|
|
|||
Loading…
Reference in New Issue