Création d'un effet de lumière néon à particules flottantes avec HTML, CSS et JavaScript

Dans ce didacticiel, nous allons créer un effet de lumière néon captivant avec des particules flottantes en utilisant du HTML, CSS et JavaScript purs. Nous décomposerons chaque composant et expliquerons comment ils fonctionnent ensemble pour créer cet effet visuel époustouflant.

1. Comprendre la structure de base

Commençons par décomposer la structure HTML de base :

    <title>Neon Light Effect</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <div>



<p>Here's what each element does:</p>

<ul>
<li>
light-effect: Main container for our neon effect</li>
<li>
light-inner: Creates the core glow effect</li>
<li>
light-outer: Adds an additional layer of luminosity and rotation</li>
</ul>

<h2>
  
  
  2. CSS Variables and Root Setup
</h2>

<p>First, let's understand our CSS variables:<br>
</p>

<pre class="brush:php;toolbar:false">:root {
    --blur-size: min(40vw, 40vh);
}

Cette variable est cruciale car :

• Utilise min() pour garantir un dimensionnement réactif
• Combine la largeur de la fenêtre (vw) et la hauteur (vh)
• Crée un effet proportionnel sur différentes tailles d'écran

3. Analyse approfondie du style corporel

body {
    margin: 0;
    overflow: hidden;
    background: black;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

Décomposons chaque propriété :

• margin : 0 : supprime l'espacement par défaut
• overflow : caché : empêche les barres de défilement et contient des particules
• fond : noir : Crée du contraste pour l'effet néon
• hauteur/largeur : 100vh/vw : assure une couverture complète de la fenêtre
• display : flex : Permet le positionnement centré
• justifier-content/align-items : center : Centrage parfait

4. Le conteneur principal d’effet de lumière

.light-effect {
    width: var(--blur-size);
    height: var(--blur-size);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(calc(var(--blur-size) * 0.25));
    animation: pulseNeon 8s ease-in-out infinite;
}

Aspects clés expliqués :

1. Dimensionnement : utilise la variable CSS pour les dimensions réactives
2. Positionnement :
   • position : fixe : Assure la stabilité lors du défilement
   • haut/gauche : 50 % : Positions au centre de la fenêtre
   • transform: translation(-50%, -50%) : Centrage parfait
3. Effet de flou :
   • Flou dynamique basé sur la taille
   • Crée une lueur douce et réaliste
4. Animation :
   • Durée de 8 secondes pour un effet fluide
   • timing facile pour un mouvement naturel

5. Détails de la couche de lumière intérieure

.light-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(138, 43, 226, 0.2) 0%,
        rgba(72, 61, 139, 0.15) 30%,
        rgba(0, 0, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 70%);
    mix-blend-mode: screen;
}

Analyse des dégradés :

1. Centre (0%) :
   • Ton violet avec 20% d'opacité
   • Crée une luminosité centrale
2. Couche intermédiaire (30%) :
   • Violet plus foncé à 15 % d'opacité
   • Ajoute de la profondeur
3. Couche extérieure (50%) :
   • Ton bleu à 10 % d'opacité
   • Crée une transition
4. Bord (70%) :
   • Fondu en transparent
   • Mélange des bords en douceur

6. Détails de la couche de lumière externe

.light-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(138, 43, 226, 0.1) 40%,
        rgba(0, 0, 255, 0.05) 60%,
        rgba(255, 255, 255, 0) 80%);
    animation: rotateGradient 10s linear infinite;
    mix-blend-mode: screen;
}

Répartition des effets spéciaux :

1. Structure Dégradée :
   • Centre blanc pour l'intensité
   • Milieu violet pour la couleur
   • Extérieur bleu pour la profondeur
2. Animation :
   • Rotation de 10 secondes
   • Synchronisation linéaire pour un mouvement fluide
3. Mélange :
   • mode écran pour effet lumineux
   • Améliore l'éclat et le mélange des couleurs

7. Images clés d'animation expliquées

    <title>Neon Light Effect</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <div>



<p>Here's what each element does:</p>

<ul>
<li>
light-effect: Main container for our neon effect</li>
<li>
light-inner: Creates the core glow effect</li>
<li>
light-outer: Adds an additional layer of luminosity and rotation</li>
</ul>

<h2>
  
  
  2. CSS Variables and Root Setup
</h2>

<p>First, let's understand our CSS variables:<br>
</p>

<pre class="brush:php;toolbar:false">:root {
    --blur-size: min(40vw, 40vh);
}

Détails de l'animation :

1. pulseNeon :
   • Maintient la position centrale avec traduction
   • Échelles entre 1 et 1,1
   • Crée un effet respiratoire
2. rotateGradient :
   • Rotation complète à 360 degrés
   • Mouvement continu
   • Ajoute du dynamisme

8. Analyse approfondie du système de particules

body {
    margin: 0;
    overflow: hidden;
    background: black;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

Caractéristiques des particules :

1. Particule de base :
   • Positionnement fixe
   • Blanc semi-transparent
   • Forme circulaire
   • Aucun événement de pointeur
2. Variantes de taille :
   • Dimensionnement réactif utilisant min()
   • Différentes vitesses d'animation
   • Maintient les proportions sur tous les appareils

9. Animation du mouvement des particules

.light-effect {
    width: var(--blur-size);
    height: var(--blur-size);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(calc(var(--blur-size) * 0.25));
    animation: pulseNeon 8s ease-in-out infinite;
}

Répartition des mouvements :

1. Démarrer (0%) :
   • Commencez sous la fenêtre d'affichage
   • État invisible
2. Fondu entrant (20%) :
   • Transition d'opacité douce
3. Mouvement principal (20-80%) :
   • Visibilité totale
   • Mouvement ascendant constant
4. Sortie (80-100%) :
   • Effet de fondu
   • Léger chevauchement au-dessus de la fenêtre

10. Génération dynamique de particules

.light-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(138, 43, 226, 0.2) 0%,
        rgba(72, 61, 139, 0.15) 30%,
        rgba(0, 0, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 70%);
    mix-blend-mode: screen;
}

Analyse des fonctions :

1. Création de particules :
   • Création d'éléments DOM dynamiques
   • Assignation de taille aléatoire
   • Distribution probabiliste
2. Logique de positionnement :
   • Placement horizontal aléatoire
   • Délai d'animation aléatoire
3. Gestion de la mémoire :
   • Nettoyage automatique
   • Durée en fonction de la taille
   • Empêche les fuites de mémoire

11. Mise en œuvre de la conception réactive

.light-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(138, 43, 226, 0.1) 40%,
        rgba(0, 0, 255, 0.05) 60%,
        rgba(255, 255, 255, 0) 80%);
    animation: rotateGradient 10s linear infinite;
    mix-blend-mode: screen;
}

Considérations réactives :

1. Tablettes (≤768px) :
   • Augmentation de la taille relative
   • Maintient les proportions
2. Appareils mobiles (≤480px) :
   • Taille relative maximale
   • Optimisé pour les petits écrans

12. Optimisation des performances

@keyframes pulseNeon {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes rotateGradient {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

Stratégies d'optimisation :

1. Intervalles de réponse :
   • Moins de particules sur mobile
   • S'adapte aux capacités de l'appareil
2. Gestion de la mémoire :
   • Efface les anciens intervalles
   • Empêche plusieurs instances
3. Gestion des événements :
   • Répond au redimensionnement de la fenêtre
   • Maintient les performances

Conclusion

Cet effet combine plusieurs couches de sophistication :

• Variables CSS dynamiques pour un dimensionnement réactif
• Combinaisons de dégradés complexes pour un éclat réaliste
• Système de particules pour plus de profondeur
• Optimisations des performances pour un fonctionnement fluide
• Conception réactive pour tous les appareils

Le résultat est un effet néon captivant qui peut améliorer n'importe quel projet Web avec un impact minimal sur les performances.