Forum : changer police et intégrer dans le fond de la page

Bonjour,
je suis en train de faire un site sous OpenElement. J'ai trouvé une animation sympa en html+css+js
je veux la modifier mais je n'ai pas les connaissances requises (ni même le minimum syndical).

body { width: 100vw; height: 100vh; margin: 0; padding: 0; } opacity: 1; visibility: visible; transition: all .5s; } h3, h5 { padding: 10px 30px 10px 30px; box-sizing: border-box; background: rgba(255, 255, 255, 1); box-shadow: 0 0 5px 0 black; font-family: 'Open Sans'; font-weight: 300; text-align: center; letter-spacing: 3px; } span#close { position: absolute; top: -15px; left: -30px; color: white; font-size: 30px; text-shadow: 0 0 5px black; cursor: pointer; } canvas { //border: 2px solid; }

//ninivert, September 2016 /*VARIABLES*/ canvas = document.getElementsByTagName('canvas')[0]; canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; var ctx = canvas.getContext('2d'); /*Modify options here*/ //possible characters that will appear var characterList = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']; //stocks possible character attributes var layers = { n: 5, //number of layers letters: [100, 40, 30, 20, 10], //letters per layer (starting from the deepest layer) coef: [0.1, 0.2, 0.4, 0.6, 0.8], //how much the letters move from the mouse (starting from the deepest layer) size: [16, 22, 36, 40, 46], //font size of the letters (starting from the deepest layer) color: ['#fff', '#eee', '#ccc', '#bbb', '#aaa'], //color of the letters (starting from the deepest layer) font: 'Courier' //font family (of every layer) }; /*End of options*/ var characters = []; var mouseX = document.body.clientWidth/2; var mouseY = document.body.clientHeight/2; var rnd = { btwn: function(min, max) { return Math.floor(Math.random() * (max - min) + min); }, choose: function(list) { return list[rnd.btwn(0, list.length)]; } }; /*LETTER DRAWING*/ function drawLetter(char) { ctx.font = char.size + 'px ' + char.font; ctx.fillStyle = char.color; var x = char.posX + (mouseX-canvas.width/2)*char.coef; var y = char.posY + (mouseY-canvas.height/2)*char.coef; ctx.fillText(char.char, x, y); } /*ANIMATION*/ document.onmousemove = function(ev) { mouseX = ev.pageX - canvas.offsetLeft; mouseY = ev.pageY - canvas.offsetTop; if (window.requestAnimationFrame) { requestAnimationFrame(update); } else { update(); } }; function update() { clear(); render(); } function clear() { ctx.clearRect(0, 0, canvas.width, canvas.height); } function render() { for (var i = 0; i < characters.length; i++) { drawLetter(characters[i]); } } /*INITIALIZE*/ function createLetters() { for (var i = 0; i < layers.n; i++) { for (var j = 0; j < layers.letters[i]; j++) { var character = rnd.choose(characterList); var x = rnd.btwn(0, canvas.width); var y = rnd.btwn(0, canvas.height); characters.push({ char: character, font: layers.font, size: layers.size[i], color: layers.color[i], layer: i, coef: layers.coef[i], posX: x, posY: y }); } } } createLetters(); update(); /*REAJUST CANVAS AFTER RESIZE*/ window.onresize = function() { location.reload(); }; document.getElementById('close').onclick = function() { this.parentElement.style.visibility = 'hidden'; this.parentElement.style.opacity = '0'; }

Ce que je veux

j'aurais voulu changer la police de carractère par une windings ou autre pour faire apparaîres des notes de musiques à la place des lettres et que celà couvre le fond (arriere) de ma page mais ne la repousse pas en dessous.
Merci encore pour votre disponibilité

Ce que j'obtiens

l'animation prend tout l'ecran et "repousse" mon site au dessous

Bonjour j'essaie de donner des informations en m'etant aidé de chat gpt pour formuler au mieux ma reponse en esperant aider :

Choisissez une police de symboles musicaux :

Trouvez une police de caractères sympa avec des notes de musique, comme Windings.
Téléchargez cette police et ajoutez-la à votre projet.
html
Copy code
<style>
@font-face {
font-family: 'MusicFont';
src: url('chemin_vers_la_police/Windings.ttf') format('truetype');
}
</style>
Utilisez cette nouvelle police dans votre animation JavaScript.
javascript
Copy code
var layers = {
// ...
font: 'MusicFont' // Utilisez le nom de la police défini dans @font-face
};

Couvrez le fond sans pousser le contenu :

Assurez-vous que votre toile <canvas> couvre toute la page, mais sans pousser le reste vers le bas.
css
Copy code
canvas {
position: fixed; // La toile reste en place et ne pousse pas le contenu
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1; // Placez la toile derrière le contenu
}

Remplacez les lettres par des symboles musicaux :

Modifiez la liste characterList avec des symboles musicaux.
javascript
Copy code
var characterList = ['♫', '♪', '♩', '♯', '♭', '♮', '♩', '♩', '♩'];
Avec ces ajustements, votre animation affichera des notes de musique au lieu de lettres, et la toile <canvas> ajoutera une ambiance musicale sans affecter la disposition du reste de votre page. N'oubliez pas d'ajuster le chemin vers le fichier de police réel que vous utilisez. Amusez-vous bien !

changer police et intégrer dans le fond de la page

3 réponses