Движение теней от текста при перемещении курсора - пример html js css

• HTML код


• CSS код
• JS код
• Результат кода

<div class="container">

	<h1>Good Morning Friends</h1>

</div>

@import url("https://fonts.googleapis.com/css2?family=Nosifer&family=Ubuntu:wght@700&display=swap");

* {

	padding: 0;

	margin: 0;

	box-sizing: border-box;

	font-family: "Ubuntu", sans-serif;

}

body,

html {

	height: 100%;

	display: grid;

	background-color: #ffdd40;

	justify-content: center;

	align-items: center;

}

.container {

	height: 100vh;

	display: flex;

	justify-content: center;

	align-items: center;

}



h1 {

	font-size: 10vw;

	cursor: pointer;

	text-align: center;

	color: #3f3f3f;

}

const container = document.querySelector(".container");

const text = container.querySelector("h1");



function shadow(e) {

  const { offsetWidth: width, offsetHeight: height } = container;

  let { offsetX: x, offsetY: y } = e;

  if (this !== e.target) {

    x = x + e.target.offsetLeft;

    y = y + e.target.offsetTop;

  }

  const movement = 100;

  const xMovement = x / width * movement - movement / 2;

  const yMovement = y / width * movement - movement / 2;

  text.style.textShadow = `  

    ${xMovement}px ${yMovement}px 0 rgba(218, 83, 44, 0.7),

    ${xMovement * -1}px ${yMovement}px 0 rgba(45, 137, 239, 0.6),

    ${xMovement}px ${yMovement * -1}px 0 rgba(96, 60, 186, 0.5),

    ${xMovement * -1}px ${yMovement * -1}px 0 rgba(0, 163, 0, 0.4)`;

  //add as many shadows as you like 🙂

}



container.addEventListener("mousemove", shadow);

//# sourceURL=pen.js