Actio 6 - Código de la portada

Portada realizada por código Javascript

//importamos la librería para animaciones de letras
import Letterize from "https://cdn.skypack.dev/letterizejs@2.0.0";
//declaramos el número de renglones, palabras, carácteres
let nRenglones = 45;
let nPalabras = 7;
let nCaracteres = 90;
//declaramos retrasos de acuerdo al número de elementos
let nDelay = nRenglones * nCaracteres;
let nAllDelay = nRenglones * nCaracteres * 7;
//declaramos un contenedor para los renglones
for (var i = 0; i < nRenglones; i++) {
$("#contenedor").append('<div class="animate-me"></div>');
}
//declaramos una variable global y una función para crear un color RBG aleatorio
var colorRGB = "";
function createRGB() {
var colorR = Math.floor(Math.random() * 255) + 40;
var colorG = Math.floor(Math.random() * 255) + 40;
var colorB = Math.floor(Math.random() * 255) + 40;
colorRGB = "rgb(" + colorR + "," + colorG + "," + colorB + ")";
return colorRGB;
}
//creamos un array de palabras aleatorias
function getRandomWord() {
var words = [
"Actio 6",
"Revista",
"Tecnología",
"Comunicación visual",
"Diseño",
"Artes fílmicas",
"Journal",
"Diseño participativo",
"Cambio paradigmático",
"Bases de datos",
"Design thinking",
"Canales de televisión",
"Televisión comunitaria",
"prácticas sociales",
"patrimonio cultural",
"Experiencias pedagógicas",
"experimental",
"análisis textual",
"psicoanálisis",
"inconsciente fílmico",
"teoría del arte",
"caricatura",
"experiencia de lo real",
"diseño de mobiliario",
"naturaleza muerta",
"software libre",
"epistemología",
"Medialidad",
"regeneración urbana",
"máquinas autopoiéticas",
"semiótica de consumo",
" multigeneracional",
"gerencia a través de procesos",
"bioinspiración",
"ergonomía",
"Narrativas",
"hipermedia",
"servicios de salud",
"kotaiiki",
"cero desperdicios",
"cultura material",
"escritura audiovisual",
"biopic",
"Economía circular",
"Protothinking"
];
return words[Math.floor(Math.random() * words.length)];
}
//animamos los renglones incluyendo palabras del array aleatoriamente
$(".animate-me").each(function () {
var paragraph = [];
for (var i = 0; i < nPalabras; i++) {
paragraph.push(getRandomWord());
}
$(this).text(paragraph.join(" "));
});
const test = new Letterize({
targets: ".animate-me"
});
//eliminamos el exceso de carácteres
$(".animate-me span").each(function () {
if ($(this).index() > nCaracteres) {
$(this).remove();
}
});
//creamos un flujo de animación que se repita
const lettering = anime.timeline({
targets: test.listAll,
delay: anime.stagger(100, {
grid: [nCaracteres, nRenglones],
from: "center",
}),
loop: true
});
//declaramos los pasos en el flujo de animación
lettering
.add({
scale: 0.5,
color: createRGB()
})
.add({
letterSpacing: "10px",
color: createRGB()
})
.add({
scale: 1,
color: createRGB()
})
.add({
letterSpacing: "6px",
color: createRGB()
})
.add({
scale: 0.5,
color: createRGB()
})
.add({
letterSpacing: "10px",
color: createRGB()
})
.add({
scale: 1,
color: createRGB()
})
.add({
letterSpacing: "6px",
color: createRGB()
});