Web Development

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

Web Development

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

Introduction

Web design is constantly evolving, with special attention to interactive details that captivate users. A LED effect can give your website a modern and innovative look by playing with light and user interaction. This tutorial will guide you through creating a LED lighting effect using HTML, CSS, and JavaScript. This effect creates an LED light that follows the mouse movement and reveals hidden text when it passes over it. We will explore each step of the process in detail, explaining how the code works so you can integrate it into your own projects.

Why use an LED effect?

The LED effect is not only aesthetic; it also adds a layer of interactivity that can improve user engagement. When a user interacts with elements that respond visually, it creates a sense of satisfaction and can encourage them to explore the site further. Moreover, this effect is perfect for design websites, portfolios, or any platform that wants to stand out visually.

HTML :

To begin, we need to structure our project with HTML. Here is the basic code that we will use to create the LED effect.

  <!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 and Title : We create a div container and a title h1 with the ID title.
the <div id=" »light »"> : is the element that will represent the LED light.
Script: We link our JavaScript file at the end of the body to optimize loading.

Styling the LED effect with CSS

The next step is to style the HTML elements in order to create the desired visual effect. The following CSS file defines the page layout as well as the appearance of the LED effect.

  @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 and padding : are reset to avoid default margins or spacing of elements.
box-sizing: border-box ensures that the width and height of elements include the padding and border.
font-family : applies the font Playfair Display to all elements.

  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 : Centers the page content horizontally and vertically.
min-height: 100vh : Ensures that the minimum height of the body is equal to the height of the window.
overflow: hidden : Hides any content overflowing from the body.
background : Sets a dark background with a linear gradient from black (14, 14, 14) to blue (0, 96, 181) and back to black.

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

position: relative : Positions the element relative to its container.
color : Sets the text color to off-white.
font-weight and font-size : Makes the title very large (10em) and bold (700).
cursor: default : Keeps the cursor standard (arrow) when hovering over the title.
opacity: 0 : Hides the title initially.
transition: opacity 0.1s ease : Allows a smooth opacity transition when it changes.

  #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 and transform: translate(-50%, -50%) : Positions the element at the center relative to its reference point.
width and height : the light Is a thin vertical rectangle.
background : Sets the background to off-white.
border-radius: 5px : Rounds the corners of the rectangle slightly.
box-shadow : Adds a lighting effect with gradient shadows, creating an intense glow.

If you also want to explore other interesting effects for your website, check out our article on the floating text effect using HTML, CSS, and JavaScript. This tutorial guides you through a dynamic web design that could complement your skills in visual effects.

JavaScript for interactivity

JavaScript is essential for making the LED effect interactive. Here is the script that allows the light to follow the mouse and reveal the text when it passes over it.

  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;
    }
});

JavaScript Explanation:

Let’s analyze the following JavaScript code:

Variables and element selections

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

text : Selects the HTML element with the ID title, which corresponds to the title text on your page.
light : Selects the HTML element with the ID lightwhich corresponds to the light element that you move around the page.

mousemove event

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

document.addEventListener (‘mousemove’, …) : Adds an event listener to detect mouse movements across the entire page.
event.clientX and event.clientY : Retrieves the X and Y coordinates of the mouse pointer within the browser window.

Movement of the light effect

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

light.style.left and light.style.top : Positions the light element (#light) exactly where the mouse is, using the X and Y coordinates.

Calculating the text coordinates

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

text.getBoundingClientRect() : Retrieves an object containing the coordinates and dimensions of the title (#title), That is to say the position of the text relative to the window.
textCenterX and textCenterY : Calculates the coordinates of the center of the text using its left position (left) and adding half of its width/height.

Detecting the light position relative to the text

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

isWithinX : Checks if the mouse X position is between the left and right sides of the text, meaning the mouse is horizontally over the text.
isWithinY : Checks if the mouse Y position is between the top and bottom of the text, meaning the mouse is vertically over the text.

Changing the text opacity

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

if (isWithinX && isWithinY) : If both conditions are true, it means that the light (represented by the mouse position) is over the text.
text.style.opacity = 1 : Makes the text fully visible when the light is above it.
text.style.opacity = 0 : Hides the text when the light is not above it.

This script creates an interactive effect where the text (#title) becomes visible only when the light effect (#light) passes over it. When the user moves the mouse, the light follows the movement, and the text appears and disappears based on the position of this light, creating a dynamic reveal effect.

Conclusion

In this tutorial, we explored how to create an interactive LED lighting effect using HTML, CSS, and JavaScript. This type of effect is ideal for energizing a web interface by adding a modern and interactive touch. Whether for a portfolio, a marketing website, or any other project, this effect can be easily customized to suit your specific needs.

The LED lighting effect is not only visually appealing, but it can also enhance the user experience by making interactions with your site more engaging. By understanding the basics of its implementation, you can now experiment with and adapt this effect to your own projects to create even more captivating web experiences.