Dynamic Text Shadow Effect: Following Mouse Position with HTML, CSS, and JavaScript @rayen-code

Rayen

Dive into the world of interactive design with our tutorial on creating a Text Shadow Effect that dynamically follows the mouse cursor using HTML, CSS, and JavaScript. This captivating effect adds a touch of dynamism to your text elements, enhancing user engagement and visual appeal.




Step 1: HTML Markup:

Begin by structuring your HTML to include the text element with the dynamic shadow effect. Define the container and text content, setting the stage for implementing the interactive shadow effect using CSS and JavaScript.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow Animation</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="text">Shadow</div>
    <div class="light"></div>

    <script src="main.js"></script>
</body>

</html>

Step 2: Styling with CSS:

Enhance the appearance and behavior of your text shadow effect with CSS styles. Implement transitions, positioning, and shadow properties to create a mesmerizing effect that responds to mouse movements.
/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #4d4d4d;
    overflow: hidden;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    cursor: none;
}

.text {
    position: relative;
    color: rgb(218, 218, 218);
    font-size: 10rem;
    font-weight: 100;
    cursor: default;
}

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

Step 3: Adding JavaScript Interaction:

Implement the logic for updating the shadow effect based on mouse position using JavaScript. Define event listeners to track mouse movements and dynamically adjust the text shadow properties accordingly.
//-------------------- Java Script --------------------//
let text = document.querySelector(".text");
let light = document.querySelector(".light");

document.addEventListener('mousemove', (e) => {
    let mouseX = e.clientX;
    let mouseY = e.clientY;

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

    let distanceX = mouseX - text.offsetLeft - text.offsetWidth / 2;
    let distanceY = mouseY - text.offsetTop - text.offsetHeight / 2;

    let shadow = '';
    for (let i = 0; i < 200; i++) {
        let shadowX = -distanceX * (i / 400);
        let shadowY = -distanceY * (i / 400);
        let opacity = 1 - (i / 200);
        shadow += `
            ${shadow ? ',' : ''} 
            ${shadowX}px ${shadowY}px 0 rgba(33, 33, 33, ${opacity})
        `;

    }
    text.style.textShadow = shadow
    // console.log(distanceY);
})

In conclusion, the Text Shadow Effect that follows the mouse cursor adds an interactive and captivating element to your web design. With HTML, CSS, and JavaScript, you can easily implement this dynamic effect and create engaging user experiences.

0 Comments