CSS Text Shadow Animation on Mouse Move

CSS Text Shadow Animation on Mouse Move
Code Snippet:CSS Text Shadow Mouse Move Effect
Author: Sara Kuhlman
Published: January 12, 2024
Last Updated: January 22, 2024
Downloads: 429
License: MIT
Edit Code online: View on CodePen
Read More

This CSS code snippet helps you to create Text Shadow animation on mouse move event. When you move the mouse, the text dynamically generates colorful shadows, adding a visually appealing animated effect. This enhances the hero section’s text, making your webpage more engaging and interactive.

The JavaScript code calculates the mouse position, adjusts the shadows accordingly, and updates the text dynamically, creating a lively visual experience for users. Perfect for adding a touch of creativity to your web design.

How to Create CSS Text Shadow Animation On Mouse Move

1. In your HTML file, create the <div class="hero"> element containing the <h1> tag. This is the section where the animated text-shadow will be applied.

<div class="hero">
    <h1 contenteditable>🔥WOAH!</h1>
  </div>

2. The CSS code defines the styling for the hero section and the text. Feel free to customize the colors, fonts, and sizes to match your design preferences.

html {
    color:black;
    font-family: sans-serif;
  }
  .hero {
    min-height: 100vh;
    display:flex;
    justify-content: center;
    align-items: center;
    color:black;
  }
  h1 {
    text-shadow: 10px 10px 0 rgba(0,0,0,1);
    font-size: 100px;
  }

3. The JavaScript code calculates the mouse position and adjusts the text-shadow dynamically. The shadow function is triggered on mouse movement, creating a visually appealing animation.

const hero = document.querySelector('.hero');
  const text = hero.querySelector('h1');
  const walk = 500; // 100px
  function shadow(e) {
    const { offsetWidth: width, offsetHeight: height } = hero;
    let { offsetX: x, offsetY: y } = e;
    if (this !== e.target) {
      x = x + e.target.offsetLeft;
      y = y + e.target.offsetTop;
    }
    const xWalk = Math.round((x / width * walk) - (walk / 2));
    const yWalk = Math.round((y / height * walk) - (walk / 2));
    text.style.textShadow = `
      ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
      ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
      ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
      ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
    `;
  }
  hero.addEventListener('mousemove', shadow);

The walk variable in the JavaScript code controls the intensity of the text-shadow movement. Experiment with different values to achieve the desired effect.

That’s all! hopefully, you have successfully created a text Shadow Animation on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X