Forum : Mettre un fond de particules à la navbar

Bonjour,

Voila je rencontre un petit problème avec mon code.

J'aimerais pouvoir mettre un fond de particules à ma navbar comme sur ce site : https://www.celestiam.fr/forum
le problème c'est que je ne sais pas comment faire, j'ai fait de nombreuses recherches, posté sur de nombreux forums autant en français qu'en anglais et même rejoint des serveurs discords dédiés à l'entreaide mais sans succès..
Voici mon code html :

<!DOCTYPE html> <html>  <head> <meta charset="utf-8"> <title>My portfolio</title>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <link rel="stylesheet" href="src/css/main.css">   <link href="https://fonts.googleapis.com/css?family=Montserrat:700&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/35ec9e22f4.js" crossorigin="anonymous"></script>  </head>   <body>  <div class="block"> <header class="header"> <div id="particles-js" class="particles-js"></div> <a href="#" class="header-logo">My portfolio</a> <nav class="header-menu"> <a href="#"><i class="fas fa-home"></i> Home</a> <a href="#"><i class="far fa-question-circle"></i> About</a> <a href="#"><i class="fas fa-align-justify"></i> Work</a> <a href="#"><i class="fas fa-envelope"></i> Contact</a> </nav> </header> </div>   <script src="src/part/particles.js"></script> <script src="src/part/app.js"></script> <script src="src/part/particles.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="src/js/main.js"></script> </body>  </html>

et voici mon code css :

/* HEADER */ .header { width: 100%; margin-left: 0; margin-right: 0; height: 90px; line-height: 90px; background-color: #333333 ; position: fixed; top: 0; } .header .header-logo { color: #ffffff; font-family: 'Roboto Mono', monospace; float: left; margin-left: 30px; font-size: 20px; } .header .header-menu { float: right; margin-right: 30px; } .header .header-menu a { margin-right: 25px; color: #ffffff; font-family: 'Roboto Mono', monospace; } .header .header-menu a:hover { color: rgb(164, 176, 190); }

j'attend vos réponses.. :D

2 réponses

Lartak,

il y a 6 ans

Bonjour.
Et donc ?
Si l'animation doit se faire en JavaScript, pourquoi avoir posté ton sujet dans HTML/CSS ?
Car d'après ce que je vois, dans ton code HTML, tu as un élément avec l'ID et la classe particles-js, un fichier javascript chargé nommé particles, mais tu n'as rien dans ton code CSS qui correspond à cet élément.
Donc si l'animation doit être faite en JavaScript, ton sujet n'a rien à faire dans le forum HTML/CSS et une fois que tu auras modifié ceci, il te faudra montrer le code JavaScript correspondant.
De plus qu'il est inutile de charger un code de format normal et de format minifié.

Sinon concernant les particules en 3D en JavaScript, Grafikart avait fait un tutoriel dessus : Tutoriel Vidéo JavaScript » Particules 3D Three.js.

Dominique Hamet,

il y a 6 ans

Voici un code fonctionnel. Je voyais ce sujet durer, durer, durer...
Au plaisir de t'aider Kenzo...

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My portfolio</title>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">   <link href="https://fonts.googleapis.com/css?family=Montserrat:700&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/35ec9e22f4.js" crossorigin="anonymous"></script>  <style> .outer-container { position: relative; background-color: #212529; /* could go on .outer-container as well */ } #particles-js { position: absolute; height: 100%; width: 100%; } .outer-container .your-content { position: relative; z-index: 1; background-color: transparent; } </style> </head> <body>  <div class="outer-container"> <div id="particles-js"></div> <header class="your-content"> <a href="#" class="header-logo">My portfolio</a> <nav class="header-menu"> <a href="#"><i class="fas fa-home"></i> Home</a> <a href="#"><i class="far fa-question-circle"></i> About</a> <a href="#"><i class="fas fa-align-justify"></i> Work</a> <a href="#"><i class="fas fa-envelope"></i> Contact</a> </nav> </header> </div> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> particlesJS("particles-js", { "particles": { "number": { "value": 380, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 } }, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "grab" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 140, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true }); </script> </body> </html>