mouse move Archives - Codeplaners https://codeplaners.com/tag/mouse-move/ Code Solution Sat, 25 Mar 2023 08:04:26 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.7 https://codeplaners.com/wp-content/uploads/2020/09/cropped-favicon-social-32x32.png mouse move Archives - Codeplaners https://codeplaners.com/tag/mouse-move/ 32 32 Mouse Move Text Animation Effect Example https://codeplaners.com/mouse-move-text-animation-effect-example/ https://codeplaners.com/mouse-move-text-animation-effect-example/#respond Sat, 25 Mar 2023 08:04:26 +0000 https://codeplaners.com/?p=1472 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 … Continue reading "Mouse Move Text Animation Effect Example"

The post Mouse Move Text Animation Effect Example appeared first on Codeplaners.

]]> 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…

The post Mouse Move Text Animation Effect Example appeared first on Codeplaners.

]]> https://codeplaners.com/mouse-move-text-animation-effect-example/feed/ 0