Mouse Move Text Animation Effect Example

Hi Dev,

Today, i will show you mouse move text animation effect example. This article will give you simple example of mouse move text animation effect example. you will mouse move text animation effect example. In this article, we will implement a mouse move text animation effect example.

So, let’s follow few steps to create example of mouse move text animation effect example.

Example

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Move Text Animation Effects Example - codeplaners</title>
    <style>
        
main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #d3f6db;
}

.animated-text {
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  font-size: 24vh;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: radial-gradient(#772d8b, #d3f6db 90%);
  background-repeat: no-repeat;
  background-size: 600% 600%;
  background-position: 50% 50%;
}
    </style>
</head>
<body>
    
   <div class="main">
     <div class="animated-text">
    CODE<br/>PLANERS
    </div>
   </div>

   <script>
    let textEl;

document.addEventListener('DOMContentLoaded', (e) => {
  textEl = document.querySelector('.animated-text');
});

//  ----

function onMouseMove(e) {
  const xRatio = e.x/window.innerWidth;
  const yRatio = e.y/window.innerHeight;
  
  const xPerc = 100 - (xRatio * 100);
  const yPerc = 100 - (yRatio * 100);
  
  textEl.style.backgroundPosition = `${xPerc}% ${yPerc}%`;
}

// If copying, throttle onMouseMove
window.addEventListener('mousemove', onMouseMove);

   </script>
</body>
</html>

I hope it will assist you…

Mouse Move Text Animation Effect Example

Example

Recommended Posts

Random Post