Glowing Bulb Effect

Glowing Bulb Effect with HTML, CSS, JS

Creativity has no boundaries in the constantly changing field of web development. Developers continuously push the boundaries to create interesting animations and dynamic user interfaces for online experiences.

The “Glowing Bulb Effect” is one such creative attempt. This interesting display is created by using HTML, CSS, and JavaScript. It reacts to both mouse movements and human interactions. In order to understand how the offered code snippet functions and get important knowledge about web development methods, we will examine it in this article.

The HTML Structure

The HTML structure is the foundation of the Glowing Bulb Effect. Let’s dive into each component:

Part – 1 The Glowing Bulb

<div id="blob"></div>

The “<div>” element with the ID “blob” represents the glowing bulb itself. This div element acts as the canvas for our mesmerizing effect. It serves as the central visual element that we manipulate and animate with CSS and JavaScript.

Part – 2 The Blur Overlay

<div id="blur"></div>

The second “<div>” element, with the ID “blur,” is responsible for creating a unique visual overlay. This overlay employs CSS properties like “backdrop-filter” to apply a blur effect to the content behind it, mimicking a frosted glass appearance. It adds depth and ambiance to the overall effect.

Part – 3 The Glowing Text

<h1 data-value="Move Your Mouse">Move Your Mouse</h1>

The <h1> element, with a “data-value” attribute set to “Move Your Mouse,” displays the dynamic text that encourages user interaction. When users hover over this text, JavaScript triggers a captivating animation, turning the static message into an unpredictable display of glowing letters.

The CSS Styling

The CSS styles play a crucial role in defining the visual aspects and animations of the Glowing Bulb Effect. Let’s break down each section of the CSS and explain how it contributes to the overall experience.

Part -1 Body Styling

        body {
            background-color: black;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }
  • background-color: black; sets the background color of the entire web page to black. This choice of background color creates a stark contrast against the vibrant elements of the effect, making them stand out prominently.
  • height: 100vh; ensures that the body takes up the full viewport height, creating a “fullscreen” effect. This is crucial for achieving a visually immersive experience.
  • margin: 0; removes any default margin around the body, ensuring that the Glowing Bulb Effect is flush with the edges of the viewport.
  • overflow: hidden; hides any content that might overflow the viewport. This is especially important when elements are animated outside the viewport to maintain a clean presentation.

Part – 2 @Keyframe Animation

        @keyframes rotate {
            from {
                transform: rotate(0deg); /* Changed from 'rotate' to 'transform' */
            }

            50% {
                transform: scale(1.5); /* Changed 'scale' values */
            }

            to {
                transform: rotate(360deg); /* Changed from 'rotate' to 'transform' */
            }
        }
  • @keyframes rotate { … } defines a “keyframes” animation named “rotate.” This animation is applied to the Glowing Bulb (#blob) to create its captivating motion.
  • from { transform: rotate(0deg); } sets the starting point of the animation, specifying that the bulb should initially have no rotation.
  • 50% { transform: scale(1.5); } defines the midpoint of the animation, where the bulb undergoes a scale transformation. It grows to 1.5 times its original size, creating a pulsating effect.
  • to { transform: rotate(360deg); } sets the endpoint of the animation, rotating the bulb by 360 degrees. This continuous rotation contributes to the dynamic and hypnotic appearance of the glowing bulb.

Part – 3 Glowing Bulb Styling

        #blob {
            background-color: red; /* Changed the background color */
            height: 34vmax;
            aspect-ratio: 1;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: linear-gradient(to right, aqua, blue); /* Changed gradient colors */
            animation: rotate 10s infinite; /* Changed animation duration */
            opacity: 0.8;
        }
  • background-color: red; specifies the initial background color of the glowing bulb as red. The choice of red adds a vibrant and attention-grabbing element to the effect.
  • height: 34vmax; sets the height of the bulb to 34% of the maximum viewport dimension, ensuring it scales responsively with the screen size.
  • aspect-ratio: 1; enforces a 1:1 aspect ratio, ensuring that the bulb remains a perfect circle regardless of the viewport’s dimensions.
  • position: absolute; positions the bulb absolutely within its containing element, allowing for precise control of its placement.
  • left: 50%; top: 50%; centers the bulb both horizontally and vertically within its containing element, achieving a visually pleasing centered appearance.
  • transform: translate(-50%, -50%); fine-tunes the positioning, ensuring the bulb is precisely centered within its containing element.
  • border-radius: 50%; gives the bulb a circular shape by setting its border radius to 50%.
  • background: linear-gradient(to right, aqua, blue); applies a linear gradient background to the bulb, transitioning from aqua to blue from left to right. This gradient adds depth and a sense of movement to the bulb’s appearance.
  • animation: rotate 10s infinite; applies the “rotate” keyframes animation to the bulb, causing it to continuously rotate for 10 seconds, creating a mesmerizing effect. The “infinite” value ensures that the rotation continues indefinitely.
  • opacity: 0.8; sets the opacity of the bulb to 80%, giving it a subtle translucent quality that enhances its visual appeal.

Part – 4 Blur Overlay Styling

        #blur {
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: 2;
            backdrop-filter: blur(12vmax);
        }
  • height: 100%; width: 100%; ensures that the blur overlay covers the entire viewport, creating a consistent and immersive backdrop for the effect.
  • position: absolute; positions the blur overlay absolutely within its containing element, allowing it to span the entire viewport.
  • z-index: 2; gives the blur overlay a z-index of 2, placing it above the background but below the glowing text. This ensures that the blur effect applies to the background, creating an attractive visual contrast with the foreground elements.
  • backdrop-filter: blur(12vmax); applies a backdrop filter with a blur radius of 12% of the maximum viewport dimension. This filter creates a frosted glass effect, blurring the underlying content and adding an ethereal quality to the design.

Part – 5 Glowing Text Styling

        h1 {
            font-family: 'Space Mono', monospace;
            font-size: clamp(3rem, 10vw, 10rem);
            color: yellow; /* Changed text color */
            white-space: nowrap;
            padding: 0rem clamp(1rem, 2vw, 3rem);
            border-radius: clamp(0.4rem, 0.75vw, 1rem);
            margin: 0rem;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
        }
  • font-family: ‘Space Mono’, monospace; specifies the font family for the Glowing Text. The “Space Mono” font choice contributes to the futuristic and stylish appearance of the text.
  • font-size: clamp(3rem, 10vw, 10rem); sets the font size responsively. It ranges from 3rem (a fixed size) to 10vw (relative to the viewport width) with a maximum of 10rem (a fixed maximum size). This approach ensures that the text scales appropriately on various screen sizes.
  • color: yellow; defines the text color as yellow, creating a striking contrast against the dark background.
  • white-space: nowrap; prevents the text from wrapping to the next line, ensuring that it remains a single line.
  • padding: 0rem clamp(1rem, 2vw, 3rem); sets variable padding around the text, depending on the viewport width. The padding ranges from 0rem to a maximum of 3rem, ensuring the text remains centered and properly spaced.
  • border-radius: clamp(0.4rem, 0.75vw, 1rem); applies a border radius ranging from 0.4rem to a maximum of 1rem, giving the text a subtle rounded appearance.
  • margin: 0rem; removes any default margin around the text, ensuring precise positioning.
  • position: absolute; positions the text absolutely within its containing element, allowing for precise control of its placement.
  • left: 50%; top: 50%; centers the text both horizontally and vertically within its containing element.
  • transform: translate(-50%, -50%); fine-tunes the positioning to ensure the text is precisely centered within its containing element.
  • z-index: 3; gives the text a z-index of 3, placing it above both the background and the blur overlay. This ensures that the text remains visible and prominent.

JavaScript Interaction

The Glowing Bulb Effect is made more interactive by the JavaScript code, which improves the user experience. It organizes two important interactions: the engaging text animation upon user input and the dynamic movement of the demonstrating bulb in response to mouse movement.

Part – 1 Glowing Bulb Interaction (Mouse Movements) 

        const blob = document.getElementById("blob");

        window.onmousemove = event => { /* Changed to 'onmousemove' */
            const { clientX, clientY } = event;

            blob.animate({
                left: `${clientX}px`,
                top: `${clientY}px`
            }, { duration: 2000, fill: "forwards" }); /* Changed animation duration */
        }
  • const blob = document.getElementById(“blob”); retrieves the reference to the glowing bulb element with the ID “blob.” This reference allows us to manipulate and animate the bulb.
  • window.onmousemove sets up an event listener for the “mousemove” event on the entire window. This event listener tracks the movement of the user’s mouse cursor.
  • const { clientX, clientY } = event; extracts the X and Y coordinates of the mouse cursor from the event object. These coordinates represent the cursor’s position relative to the viewport.
  • blob.animate({ left: ${clientX}px, top: ${clientY}px }, { duration: 2000, fill: “forwards” }); initiates an animation on the glowing bulb element. The animation dynamically changes the position of the bulb to match the current mouse cursor position. The { duration: 2000, fill: “forwards” } options specify a 2-second animation duration, and “fill: forwards” ensures that the bulb retains its final position after the animation completes. This interaction creates the effect of the bulb following the user’s mouse cursor, adding an engaging and dynamic element to the design.

Part – 2 Text Animation Interactions (Mouse Hover) 

        const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

        let interval = null;

        document.querySelector("h1").onmouseover = event => {
            let iteration = 0;

            clearInterval(interval);

            interval = setInterval(() => {
                event.target.innerText = event.target.innerText
                    .split("")
                    .map((letter, index) => {
                        if (index < iteration) {
                            return event.target.dataset.value[index];
                        }

                        return letters[Math.floor(Math.random() * 26)];
                    })
                    .join("");

                if (iteration >= event.target.dataset.value.length) {
                    clearInterval(interval);
                }

                iteration += 1 / 3;
            }, 30);
        }
  • const letters = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”; defines a string containing all the uppercase letters of the alphabet. This string is used to randomly generate letters for the text animation.
  • let interval = null; declares a variable called “interval” and initializes it to null. This variable is used to control the timing of the text animation.
  • document.querySelector(“h1”).onmouseover sets up an event listener for the “mouseover” event on the <h1> element. When a user hovers over the text, the associated function will be triggered.

Within the event listener:

  • let iteration = 0; initializes a variable called “iteration” to 0. This variable keeps track of the animation’s progress.
  • clearInterval(interval); ensures that any existing animation intervals are cleared before starting a new one, preventing conflicts.
  • interval = setInterval(() => { … }, 30); initiates a new animation interval. The animation updates the text of the <h1> element every 30 milliseconds.

Inside the interval function:

  • event.target.innerText accesses the text content of the <h1> element.
  • .split(“”) splits the text into an array of individual characters.
  • .map((letter, index) => { … }) iterates through each character in the array and applies a transformation based on its index.
  • if (index < iteration) { return event.target.dataset.value[index]; } ensures that characters at indices less than the current iteration are preserved. These characters come from the “data-value” attribute of the <h1> element and spell out “Move Your Mouse.”
  • return letters[Math.floor(Math.random() * 26)]; generates a random letter from the “letters” string and replaces characters at indices greater than or equal to the current iteration.
  • .join(“”) joins the transformed characters back into a single string.
  • if (iteration >= event.target.dataset.value.length) { clearInterval(interval); } checks if the animation has reached the end (when “iteration” exceeds the length of the original text), and if so, clears the animation interval to stop further updates.
  • iteration += 1 / 3; increments the “iteration” variable, gradually progressing the animation. This creates the mesmerizing effect of letters in the text changing randomly when the user hovers over it, making it an interactive and engaging element.

Output

Conclusion

HTML, CSS, and JavaScript work together in this brief web development masterpiece to produce the Glowing Bulb Effect.

A wonderfully animated bulb follows the user’s every movement over a black background, and a frosted glass overlay gives an ethereal layer. When hovered over, the text begs with interest and transforms into a captivating cascade of characters.

From the “keyframe” animations that give the “lightbulb” life to the dynamic “letter-shuffling” inside the text, each line of code has a specific function. In approximately 100 words, this code sample showcases the beauty of web development by showing how interaction and aesthetics combine to create an engaging online experience.