JavaScript 30 – День 16 Учебные заметки

День 16 JavaScript 30 Веса Боса включал использование JavaScript для управления элементом text-shadow CSS при перемещении мыши по экрану.

Бос использовал класс героя, который представлял главный баннер веб-сайта. Этот класс CSS содержал заголовок h1. Переменная «walk» представляла собой расширение text-shadow.

const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');
const walk = 100; //100px refers to max shadow extension

И прослушиватель событий, связанный с функцией «тень».

hero.addEventListener('mousemove', shadow);

Эта функция включала управление шириной и высотой смещения тени текста.

function shadow(e) {
   const width = hero.offsetWidth;
   const height = hero.offsetHeight;
   let {offsetX: x, offsetY: y} = e;
// 'this' refers to hero. e.target can be hero or h1 -child
   if(this !== e.target){
      x = x + e.target.offsetLeft;
      y = y + e.target.offsetTop;
   }
//walk should flucuate bwt -50 and +50
   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 rgba(255, 0, 255, 0.7),
      ${xWalk * -1}px ${yWalk}px rgba(0, 255, 255, 0.7),
      ${yWalk}px ${xWalk * -1}px 0 rgba(0, 255, 0, 0.7),
      ${yWalk * -1}px ${xWalk}px rgba(255, 0, 255, 0.7)
   `;
}

Поскольку ссылка на расширение тени изменяется, когда мышь перемещается по элементу h1, который является дочерним элементом класса hero, Бос учел это в своих вычислениях с помощью оператора if.

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 rgba(255, 0, 255, 0.7),
${xWalk * -1}px ${yWalk}px rgba(0, 255, 255, 0.7),
${yWalk}px ${xWalk * -1}px 0 rgba(0, 255, 0, 0.7),
${yWalk * -1}px ${xWalk}px rgba(255, 0, 255, 0.7)
`;

Когда Бос показал числа offsetX и offsetY с помощью консоли, я понял это лучше. Если вам расчеты показались непонятными, предлагаю посмотреть видео на YouTube.

Программа создала забавный и интересный эффект на текстовой тени, когда я перемещал мышь.

Следите за моими учебными заметками по мере того, как я продвигаюсь по JavaScript 30.