[Résolu] Des bulles/particules animées restent en haut sur mobile port

Bonjour à tous et à toutes,

J'essaye d'intégrer des bulles/particules de couleur, animées. J'ai trouvé et copié/collé le code pen suivant : https://codepen.io/tutsplus/pen/MrjYJK

Sur un écran d'ordinateur, on va dire que ça fonctionne (j'ai encore quelques réglages à faire).
Là où ça pose problème, c'est sur les autres écrans (mobile et tablette) en portrait : les bulles/particules restent agglutinées en haut de l'écran. J'en ai aucune au milieu et en bas.

Comment faire pour que les bulles/particules se répartissent sur toute la hauteur du corps (entre l'entête et le pied de page) quelle que soit la hauteur du corps en question (sur tous les supports) ? Quels paramètres rentrer (notamment en CSS) pour que cette animation de bulles/particules s'adapte à tous les écrans ?

D'avance merci pour vos réponses.
Bonne journée

Bonjour,

Ça a l'air de dépendre des navigateurs plus que du fait que ce soit mobile ou desktop.

Je n'ai pas de problème sur un téléphone avec chrome sous android.

Par contre je vois ce problème avec safari sous mac OS si on affiche les bulles dans une petite fenêtre, puis qu'on l'agrandit.

En fait, avec Chrome ou Firefox, y a rien dans les 10% de l'écran en bas (et aussi à droite), mais ça, c'est normal car le code scss choisit des coordonnées sur 90% de la largeur et de la hauteur de l'écran seulement.

Pour safari, après une redimensionnement de la fenêtre, il faut faire un refresh de l'écran pour que les bulles se répartissent à nouveau sur 90% de l'écran (sans doute qu'une fois l'animation démarrée, il ne recalcule pas les coordonnées à la volée si on change les dimensions de la fenêtre).

Ensuite (mais pour en être sûr, il faudrait les conditions exactes du test), il se peut que sur certains mobiles, au 1er affichage, ils démarrent l'animation puis ils réduisent l'écran seulement après (et sans recalculer les coordonnées comme ne le fait pas safari sur desktop aussi).

Si c'est bien ça le problème, on peut éventuellement le contourner avec les quelques lignes de javascript ci-dessous, à mettre en bas de page dans une balise <script> juste avant </body>. Ce javascript détecte les redimensionnements de fenêtre, et arrêtent/redémarrent les animations, ce qui a pour effet de répartir à nouveau les bulles sur tout l'écran. Ça marche avec safari sur desktop. À vérifier ailleurs (c'est pas gagné d'avance, car il se peut que déclencher la fonction magic() suite à un évènement "resize" seulement ne suffise pas).

(function()
{
	var magic=function()
	{
		var e=document.querySelector(".particle");
		e.style.animation = 'none';
		e.offsetHeight; /* force reflow */
		e.style.animation = null; 
	}
	magic();
	window.addEventListener("resize",magic);
})();

Enfin, il y a peut-être d'autres astuces en css pur. Mais je n'y ai pas encore réfléchi.

Amicalement,
Modifié par parsimonhi (12 Nov 2020 - 10:09)

Bonjour Parsimonhi,

Pardon, je viens de m'apercevoir que je n'avais pas encore répondu
Merci beaucoup pour cette solution
Dans la mesure du possible, j'essaye d'éviter d'utiliser du JS car j'en charge déjà beaucoup dans mes pages et j'ai peur que ça se télescope et/ou s'annule.

Ceci dit, un collègue m'a aidé à trouver une autre solution.
En fait, je me suis trompé en appliquant sa solution et il s'avère que ça fonctionne mieux.
Sa solution était d'une part d'augmenter le VH dans le SCSS, mais surtout de mettre :

#particle-container {
position:fixed;
}

Sauf qu'au lieu de mettre une position fixe sur particle-container, je l'ai mise sur particle tout court
Ça fonctionne car les bulles/particules animées restent toujours à l'écran, même si on scrolle (logique puisqu'elles sont en position fixe) et aussi parce qu'elles sont plus nombreuses que si j'avais mis une position fixe sur particle-container.
Bref, ça fonctionne

Encore merci pour l'aide précieuse
Bonne journée