JS30 #16

In this example below you will see how to do a JS30 #16 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by michaelthompson312, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright michaelthompson312 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>JS30 #16</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

   <div class="hero">
    <h1 contenteditable>WILL I EVER USE THIS</h1>
  </div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/michaelthompson312/js30-16-ooVNda */
html {
    color:black;
    font-family: sans-serif;
  }
  body {
    margin: 0;
  }
  .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;
  }

/*Downloaded from https://www.codeseek.co/michaelthompson312/js30-16-ooVNda */
const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');
const walk = 500;

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);

Comments