Developpement web

Create an LED Lighting Effect with JavaScript: Complete Tutorial to Energize Your Web Interface

Developpement web

Create an LED Lighting Effect with JavaScript: Complete Tutorial to Energize Your Web Interface

Sommaire

Introduction

Le design web évolue constamment, avec une attention particulière aux détails interactifs qui captivent les utilisateurs. Un effet LED peut donner à votre site web un aspect moderne et innovant, en jouant sur la lumière et l’interaction utilisateur. Ce tutoriel vous guidera à travers la création d’un effet d’éclairage LED en utilisant HTML, CSS, et JavaScript. Cet effet crée une lumière LED qui suit le mouvement de la souris et révèle du texte caché lorsqu’elle le survole. Nous explorerons en détail chaque étape du processus, en expliquant comment le code fonctionne pour vous permettre de l’intégrer dans vos propres projets.

Pourquoi utiliser un effet LED ?

L’effet LED n’est pas seulement esthétique ; il ajoute également une couche d’interactivité qui peut améliorer l’engagement des utilisateurs. Lorsqu’un utilisateur interagit avec des éléments qui répondent visuellement, cela crée un sentiment de satisfaction et peut inciter à explorer davantage le site. De plus, cet effet est parfait pour les sites de design, portfolios ou toute plateforme qui souhaite se démarquer visuellement.

HTML :

Pour commencer, nous devons structurer notre projet avec du HTML. Voici le code de base que nous utiliserons pour créer l’effet LED.

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LED Light</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="light"></div>
    <div class="container">
        <h2 class="title">Digital marketing agency</h2>
        <h1 id="title">Mondesign Web</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

DOCTYPE and Language: We begin by defining the document type and language.
Meta Tags: We define the encoding and responsive view.
Title: We give a title to our page.
Link: We link our CSS file for styling.
Container et Titre : On crée une div container et un titre h1 avec l’ID title.
Le <div id=" »light »"> : est l’élément qui représentera la lumière LED.
Script: We link our JavaScript file at the end of the body to optimize loading.

Styliser l'effet LED avec CSS

La prochaine étape consiste à styliser les éléments HTML afin de créer l’effet visuel désiré. Le fichier CSS suivant assure la mise en forme de la page, ainsi que l’apparence de l’effet LED.

  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Playfair Display', serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    background: rgb(14, 14, 14);
    background: linear-gradient(270deg, rgba(14, 14, 14, 1) 0%, rgba(0, 96, 181, 1) 50%, rgba(14, 14, 14, 1) 100%);
}

#title {
    position: relative;
    color: #FFFBFB;
    font-weight: 700;
    font-size: 10em;
    cursor: default;
    opacity: 0;
    transition: opacity 0.1s ease;
}

#light {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 300px;
    background: #FFFBFB;
    border-radius: 5px;
    box-shadow: 0 0 15px #FFFBFB, 0 0 100px #FFFBFB, 0 0 200px #FFFBFB, 0 0 300px #0060B5;
}

.title{
    position: relative;
    color: white;
    font-weight: 500;
    font-size: 52px;

}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

CSS Analysis:

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Playfair Display', serif;
}

margin et padding : sont remis à zéro pour éviter les marges ou les espacements par défaut des éléments.
box-sizing: border-box garantit que la largeur et la hauteur des éléments incluent le padding et la bordure.
font-family : applique la police Playfair Display à tous les éléments.

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    background: rgb(14, 14, 14);
    background: linear-gradient(270deg, rgba(14, 14, 14, 1) 0%, rgba(0, 96, 181, 1) 50%, rgba(14, 14, 14, 1) 100%);
}

display: flex; justify-content: center; align-items: center : Centre le contenu de la page horizontalement et verticalement.
min-height: 100vh : Assure que la hauteur minimale du corps est égale à la hauteur de la fenêtre.
overflow: hidden : Cache tout contenu débordant du corps.
background : Définit un fond sombre avec un dégradé linéaire du noir (14, 14, 14) au bleu (0, 96, 181) et retour au noir.

  #title {
    position: relative;
    color: #FFFBFB;
    font-weight: 700;
    font-size: 10em;
    cursor: default;
    opacity: 0;
    transition: opacity 0.1s ease;
}

position: relative : Positionne l’élément par rapport à son conteneur.
color : Définit la couleur du texte à blanc cassé.
font-weight et font-size : Le titre est très grand (10em) et en gras (700).
cursor: default : Le curseur reste standard (flèche) au survol du titre.
opacity: 0 : Le titre est invisible au départ.
transition: opacity 0.1s ease : Permet une transition fluide de l’opacité lors de son changement.

  #light {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 300px;
    background: #FFFBFB;
    border-radius: 5px;
    box-shadow: 0 0 15px #FFFBFB, 0 0 100px #FFFBFB, 0 0 200px #FFFBFB, 0 0 300px #0060B5;
}

position: absolute et transform: translate(-50%, -50%) : Positionne l’élément au centre par rapport à son point de référence.
width et height : Le light est un rectangle vertical mince.
background : Le fond est blanc cassé.
border-radius: 5px : Les coins du rectangle sont légèrement arrondis.
box-shadow : Ajoute un effet de lumière avec des ombres progressives, créant une lueur intense.

Si vous souhaitez également explorer d'autres effets intéressants pour votre site web, découvrez notre article sur l'effet de texte flottant en utilisant HTML, CSS et JavaScript. Ce tutoriel vous guide à travers un design web dynamique qui pourrait compléter vos compétences en effets visuels.

JavaScript pour l'interactivité

Le JavaScript est essentiel pour rendre l’effet LED interactif. Voici le script qui permet de faire suivre la lumière par la souris et de révéler le texte lorsqu’elle passe au-dessus.

  var text = document.getElementById('title');
var light = document.getElementById('light');

document.addEventListener('mousemove', function(event) {
    var mouseX = event.clientX;
    var mouseY = event.clientY;
    
    light.style.left = mouseX + 'px';
    light.style.top = mouseY + 'px';
   
    var textRect = text.getBoundingClientRect();
   
    var isWithinX = mouseX > textRect.left && mouseX < textRect.right;
    var isWithinY = mouseY > textRect.top && mouseY < textRect.bottom;

    if (isWithinX && isWithinY) {
        text.style.opacity = 1;
    } else {
        text.style.opacity = 0;
    }
});

Explication du JavaScript :

Analysons le code JavaScript suivant :

Variables et Sélections d'éléments

  var text = document.getElementById('title');
var light = document.getElementById('light');

text : Sélectionne l’élément HTML avec l’ID title, qui correspond au texte du titre dans votre page.
light : Sélectionne l’élément HTML avec l’ID light, qui correspond à l’élément lumineux que vous déplacez sur la page.

Événement mousemove

  document.addEventListener('mousemove', function(event) {
    var mouseX = event.clientX;
    var mouseY = event.clientY;

document.addEventListener (‘mousemove’, …) : Ajoute un écouteur d’événements pour détecter les mouvements de la souris sur toute la page.
event.clientX et event.clientY : Récupèrent les coordonnées X et Y du pointeur de la souris dans la fenêtre du navigateur.

Déplacement de l'effet lumineux

  
    light.style.left = mouseX + 'px';
    light.style.top = mouseY + 'px';

light.style.left et light.style.top : Positionnent l’élément lumineux (#light) exactement là où se trouve la souris, en utilisant les coordonnées X et Y.

Calcul des coordonnées du texte

      var textRect = text.getBoundingClientRect();
    var textCenterX = textRect.left + textRect.width / 2;
    var textCenterY = textRect.top + textRect.height / 2;

text.getBoundingClientRect() : Récupère un objet contenant les coordonnées et les dimensions du titre (#title), c’est-à-dire la position du texte par rapport à la fenêtre.
textCenterX et textCenterY : Calculent les coordonnées du centre du texte en utilisant la position de son côté gauche (left) et en ajoutant la moitié de sa largeur/hauteur.

Détection de la position de la lumière par rapport au texte

      var isWithinX = mouseX > textRect.left && mouseX < textRect.right;
    var isWithinY = mouseY > textRect.top && mouseY < textRect.bottom;

isWithinX : Vérifie si la position X de la souris est entre le côté gauche et le côté droit du texte, ce qui signifie que la souris est horizontalement au-dessus du texte.
isWithinY : Vérifie si la position Y de la souris est entre le haut et le bas du texte, ce qui signifie que la souris est verticalement au-dessus du texte.

Changement de l'opacité du texte

      if (isWithinX && isWithinY) {
        text.style.opacity = 1;
    } else {
        text.style.opacity = 0;
    }
});

if (isWithinX && isWithinY) : Si les deux conditions sont vraies, cela signifie que la lumière (représentée par la position de la souris) est au-dessus du texte.
text.style.opacity = 1 : Rend le texte entièrement visible lorsque la lumière est au-dessus de celui-ci.
text.style.opacity = 0 : Cache le texte lorsque la lumière n’est pas au-dessus.

Ce script permet de créer un effet interactif où le texte (#title) devient visible uniquement lorsque l’effet lumineux (#light) passe au-dessus de lui. Lorsque l’utilisateur déplace la souris, la lumière suit le mouvement, et le texte apparaît et disparaît en fonction de la position de cette lumière, créant ainsi un effet de révélation dynamique.

Conclusion :

Dans ce tutoriel, nous avons exploré comment créer un effet d’éclairage LED interactif en utilisant HTML, CSS et JavaScript. Ce type d’effet est idéal pour dynamiser une interface web en ajoutant une touche moderne et interactive. Que ce soit pour un portfolio, un site de marketing, ou tout autre projet, cet effet peut être facilement personnalisé pour répondre à vos besoins spécifiques.

L’effet d’éclairage LED n’est pas seulement visuellement attractif, mais il peut également améliorer l’expérience utilisateur en rendant les interactions avec votre site plus engageantes. En comprenant les bases de sa mise en œuvre, vous pouvez maintenant expérimenter et adapter cet effet à vos propres projets pour créer des expériences web encore plus captivantes.