Comment peut-on intégrer un effet de pluie sur un site web avec une touche nostalgique des années 90 ?

Posté par : CosmicHero75 - le 01 Mars 2025

CosmicHero75 : le 01 Mars 2025

En fait, je me demandais surtout comment on pouvait réaliser cet effet de pluie sans que ça devienne une usine à gaz pour le navigateur. J'ai vu des trucs en JavaScript, mais souvent ça rame pas mal. Est-ce qu'il y aurait des librairies ou des techniques plus 'légères' ? Et pour le côté '90s', je pensais peut-être jouer sur les couleurs et le style des gouttes, un peu comme dans les vieux jeux vidéo. Des idées ?

Commentaires (10)

Chloé30 : le 02 Mars 2025

L'effet pluie sans flinguer les perfs, c'est le challenge ! JavaScript, c'est souvent l'option par défaut, mais c'est vrai que ça peut vite devenir gourmand. Sinon, est-ce que t'as regardé du côté des animations CSS ? C'est parfois moins flexible que le JS, mais si c'est bien optimisé, ça peut être plus 'light'. Pour le style 90's, l'idée des couleurs pixelisées, c'est top. Genre un dithered effect sur les gouttes ?
Lumiflora88 : le 02 Mars 2025

Les animations CSS, c'est une excellente piste, Chloé30 ! En plus des couleurs pixelisées, on pourrait aussi jouer sur la transparence des gouttes pour donner un effet un peu 'fantôme', comme dans les interfaces graphiques de l'époque. Ça renforcerait le côté nostalgique sans trop impacter les performances, je pense.
ClarteBrute : le 03 Mars 2025

L'idée de la transparence, oui, mais attention à ne pas tomber dans le 'trop'. Les interfaces des 90s, c'était surtout des couleurs bien tranchées, peu de dégradés subtils. Faut pas que l'effet 'fantôme' devienne trop moderne, sinon on perd le charme kitsch de l'époque.
CosmicHero75 : le 03 Mars 2025

Moi, je me demande si on ne pourrait pas combiner les deux approches. Du CSS pour la base de l'animation (mouvement des gouttes, etc.) et du JavaScript *très* optimisé pour gérer la génération aléatoire des gouttes et quelques effets plus complexes. Ça permettrait de garder un bon compromis entre perfs et contrôle créatif, non ? Pour le côté 90's, je verrais bien des fontes bien pixélisées pour le texte qui interagit avec la pluie (genre, un texte qui se révèle quand une goutte tombe dessus).
DigitalPeak : le 04 Mars 2025

En complément de l'idée de CosmicHero75 de combiner CSS et JS, tu pourrais peut-être explorer l'utilisation de canvas pour le rendu des gouttes. Canvas permet de manipuler les pixels directement, ce qui peut être plus performant que du JS qui interagit avec le DOM pour chaque goutte. Tu pourrais créer une texture de goutte pixelisée (voire plusieurs pour varier) et les 'dessiner' sur le canvas à l'aide de JS. L'avantage, c'est que tu contrôles vraiment chaque pixel et que tu peux optimiser le rendu. Pour le côté 90's, tu pourrais limiter la palette de couleurs du canvas à celles typiques des vieux PC.
CosmicHero75 : le 04 Mars 2025

Merci DigitalPeak pour cette idée du canvas, je vais creuser cette piste, ça me semble super pertinent !
CodeAlchemist86 : le 04 Mars 2025

Yep, super pertinent.
Camille Rousseau : le 05 Mars 2025

CosmicHero75, quand tu dis "usineàgaz", tu penses à quel genre de complexité concrètement ? C'est la gestion du nombre de gouttes, les calculs de trajectoire, ou autre chose ? Comprendre la source du problème pourrait aider à mieux cibler les solutions, je pense.
CosmicHero75 : le 06 Mars 2025

Camille Rousseau, quand je dis 'usine à gaz', je pense surtout à la gestion du DOM avec beaucoup d'éléments. J'ai déjà essayé de créer plein de divs pour chaque goutte et de les animer avec JS, et là, forcément, le navigateur s'effondre assez vite. Donc, l'idée serait d'éviter de trop manipuler le DOM et de trouver une technique plus 'directe' pour afficher et animer ces gouttes. D'où mon intérêt pour le canvas suggéré par DigitalPeak.
Mansouri : le 06 Mars 2025

Je comprends l'inquiétude concernant la manipulation du DOM, CosmicHero75. Mais avant de s'orienter systèmatiquement vers Canvas, il serait peut-être sage d'évaluer le coût réel des opérations. Est-ce que le problème vient vraiment du nombre d'éléments dans le DOM, ou de la complexité des calculs effectués à *chaque* frame pour animer ces éléments ? Si c'est le deuxième point, Canvas ne résoudra pas forcément le problème et pourrait même l'aggraver si l'implémentation est mal optimisée. Bien sûr, Canvas offre un contrôle bas niveau intéressant, mais ça implique aussi une gestion manuelle de beaucoup d'aspects que le DOM prend en charge nativement. Il faut peser le pour et le contre.