[JavaScript30] Day 16

Mouse Move Shadow

 

 

const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');

function shadow(e) {
  console.log(e);

}

hero.addEventListener('mousemove', shadow);

const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');

function shadow(e) {
  // console.log(e);

  // const width = hero.offsetWidth;
  // const height = hero.offsetHeight;
  // 위의 두 줄을 아래의 한 줄로 사용
  const {offsetWidth : width, offsetHeight: height} = hero;
  let {offsetX: x, offsetY: y} = e;
  console.log(x, y);
}

hero.addEventListener('mousemove', shadow);

const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');
const walk = 100; // 100px

function shadow(e) {
  // console.log(e);

  // const width = hero.offsetWidth;
  // const height = hero.offsetHeight;
  // 위의 두 줄을 아래의 한 줄로 사용
  const {offsetWidth : width, offsetHeight: height} = hero;
  let {offsetX: x, offsetY: y} = e;
  // console.log(x, y);
  if (this !== e.target) {
    x = x + e.target.offsetLeft;
    y = y + e.target.offsetTop;
  }
  // console.log(x, y)
  const xWalk = Math.round((x / width * walk) - (walk / 2));
  const yWalk = Math.round((y / width * walk) - (walk / 2));
  console.log(xWalk, yWalk)
}

hero.addEventListener('mousemove', shadow);

 

const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');
const walk = 500; // 100px

function shadow(e) {
  // console.log(e);

  // const width = hero.offsetWidth;
  // const height = hero.offsetHeight;
  // 위의 두 줄을 아래의 한 줄로 사용
  const {offsetWidth : width, offsetHeight: height} = hero;
  let {offsetX: x, offsetY: y} = e;
  // console.log(x, y);
  if (this !== e.target) {
    x = x + e.target.offsetLeft;
    y = y + e.target.offsetTop;
  }
  // console.log(x, y)
  const xWalk = Math.round((x / width * walk) - (walk / 2));
  const yWalk = Math.round((y / width * walk) - (walk / 2));
  // console.log(xWalk, yWalk)
  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);

 

 

JavaScript30 강의를 보고 공부한 글입니다. (https://javascript30.com/)