Petite exercice pour remplir « sans dépasser » de lettres au hasard un bloc html.
L’idée est de remplir chaque ligne de lettre en chasse fixe (monospace) et d’ajouter un retour à la ligne pour avoir un bloc plein.
Attention : ce code est pour le fun et n’est pas parfait (certains caractères ne passent pas et la preview du codepen ne marche pas).
Le code est aussi commenté dans CodePen.
/* Ajouter GSAP*/
var fill = document.querySelector('.fill'); // je cible la première div.fill
var wl; // largeur d'une lettre
var hl; // hauteur
var w; // largeur de la fenêtre
var h; // hauteur
/* fonction de lettre random via gsap */
// https://greensock.com/docs/v3/GSAP/UtilityMethods/random
var randomLetter = gsap.utils.random('-abcdeABCDEF+*,#_!:\.?/='.split(''),true);
/*
étape 1 : prendre les dimensions
*/
function ini(){
w = window.innerWidth; // largeur de la fenetre
h = window.innerHeight; // hauteur
fill.style.display = 'inline-block'; // par défaut display block prend toute la largeur;
// inline-block prend juste la largeur du texte
fill.innerHTML = '0123456789'; // j'ajoute 10 glyphs
wl = fill.clientWidth/10; // je divise par 10 pour avoir la taille d'un glyph
fill.innerHTML = '0
1
2
3
4
5
6
7
8
9'; // idem en hauteur
hl = fill.clientHeight/10; // ok
fill.style.display = 'block'; // je remets
console.log(w,h,wl,hl)
fill.innerHTML = ''; // je vide
}
ini(); // je lance la fonction ini
/*
étape 2 : on remplit
un peu de math
Si j'ai 13 px et des lettres de 4 px, je peux en mettre 3.
13/4 = 3,25, on supprime le reste après la virgule -> 3.
Math.floor(3.25) = 3
*/
function fillit(){
let maxX = Math.floor(w/wl); // nombre max en x
let maxY = Math.floor(h/hl); // nombre max en y
let innerhtml = ''; // variable temporaire qui contient le texte
/* boucle dans une boucle */
for(let y=0;y
See the Pen remplir avec du texte by Benoît Wimart (@benoitwimart) on CodePen.