Background particles.js en HTML

Sujet résolu

11 janvier 2019 à 13:56:25

Bonjour,

Je commence bientôt une formation en développement web et je voudrais commencer à créer un portofolio.

Je souhaiterai utiliser particles.js en background. Pour cela j'ai vu qu'il fallait utiliser une div id en position absolute avec un z-index négatif. Ça n'a pas l'air très propre mais c'est ce qui est apparemment le plus simple à faire. Cependant, comme on place un z-index négatif, les éléments placés au dessus comme le body empêchent l'animation d’interaction avec la souris (dans mon cas : au clic).

Les bouts de code ci-dessous, ou un lien direct vers le site et son code source.

#particles-js {
	background-color: black;
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: -1;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body >
	<div id="particles-js"></div>

			
	<script type="text/javascript" src="js/particles.min.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

S'il y a une solution pour l'interaction, je suis preneur.

Autrement, s'il y a une alternative à l'utilisation de la div pour placer l'élément particles.js par exemple en fond d'un article ou d'un aside, ça m'intéresse.

Merci d'avance !

EmmanuelBeziat

11 janvier 2019 à 14:31:07

Salut,

Rien n'oblige à mettre un z-index négatif pour ça. Rien n'oblige à mettre un z-index sur cet élément, d'ailleurs. Ajoute une div qui contient le contenu de ta page à la suite et mets-le juste en position relative, et tout se passera normalement.

-
Edité par EmmanuelBeziat 11 janvier 2019 à 14:32:21

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Mohand.B

11 janvier 2019 à 16:04:15

En remplaçant la position absolue par relative, le contenu du body est foutu après la div. Le background particles.js en haut, le contenu en bas.

EmmanuelBeziat

11 janvier 2019 à 20:35:09

Non, relis ce que j'ai indiqué : je n'ai pas dit de remplacer le position absolute sur le bloc des particules, j'ai dit de mettre une div qui contiendra le contenu de ta page, et d'y attribuer position relative.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Mohand.B

11 janvier 2019 à 21:52:26

J'ai compris et je viens de le faire, autant pour moi.

Cependant ça ne remédie toujours pas au problème, l'interactivité du fond au clic ne fonctionne toujours pas sur la partie du contenu de la page.

C'est le même résultat qu'avec le z-index sans la div supplémentaire.

EmmanuelBeziat

12 janvier 2019 à 0:01:45

Je vois toujours l'ancien code sur ton site ; si tu le mets à jour avec le nouveau code, je regarderais ce qui ne va pas.

En l'état, après avoir retiré le z-index: -10; le clic sur les particules marche bien.

Par contre, effectivement tu ne pourras jamais avoir cette interactivité à travers d'autres éléments de ton site.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !