fingernails/animacija.js

109 lines
2.3 KiB
JavaScript

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);
});