Как я сделал мышь переместить тень эффект с помощью JavaScript

Привет всем 👋! Как дела?

Сегодня я покажу вам, как я сделал эффект тени мыши, основанный на том, что я узнал в задаче JavaScript 30 Wes Bos. Это хороший трюк для улучшения вашего портфолио или других веб-сайтов, которые вы делаете.

Давайте начнем!

1. – Я создал HTML-структуру для вызова


   
      Hello,👋  I'm Raquel Santos
      A self-taught, commited and passionated Front-end developer

Я создал очень простую структуру, которая имеет Div The Div The Hero Here, где работает мероприятие MouseMove, Div the Diver называется контейнер, просто дают файл Flexbox и выравнивает этот контейнер вправо. Этот контейнер имеет кнопку H1, пункт и кнопку. H1 – это элемент, который будет изменен.

2. – Добавлен генеральный и определенный стиль CSS в элементах

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing: inherit;
}

:root{

    --secondary-color: #f151bc;

    --shadow-color:#14011dbe;
    --text-color:#e7e7e7;
}

@import url('https://fonts.googleapis.com/css2?family=Georama:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');

html{
    font-size:100%;
     min-height:100vh;
     width:100vw;
}

body{
    min-height:100vh;
    width:100vw;
    font-family: 'Georama',
    sans-serif;
    box-sizing:border-box;

   background: linear-gradient(90deg, #020024 0%, #06065e 35%, #0273a0 100%);

}

.hero{
    height:100vh;
    width:100vw;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    font-family:'PT Sans',
    sans-serif;
    color:var(--text-color);
    letter-spacing: .1rem;
}

.container{
    margin-right:16rem;
    width:50rem;
    display:flex;
    flex-direction:column;
}

.container__title{
    font-size:7rem;
    font-weight:600;
    margin:4rem 0;
    text-shadow: 10px 10px 1px var(--shadow-color);
    line-height: 6.8rem;
}

.container__title span{
    color:var(--secondary-color);
}

.container__paragraph{
    font-size:3rem;
}

.container__button{
    align-self: flex-end;
    margin-top:4rem;
    border:none;
    padding:2rem 4rem;
    background-color:var(--secondary-color);
    color:white;
    border-radius:5px;
    box-shadow:5px 5px 5px var(--shadow-color);
    font-size:2rem;
    cursor:pointer;
}

3. – Теперь его время для JavaScript

3.1 – Сначала я получил элементы из DOM и создал переменную, называемую прогулку с 100 значений, что означает, насколько тень может двигаться/прогуляться.

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

cont walk = 100;

3.2 – Я создаю слушатель события для переменной героя с Mouvemove событий и функцией, называемой тенью.

hero.addEventListener('mousemove',shadow)

3.3 – В этой функции называется тенью, где я поставил весь функциональный код, чтобы получить результат движения тени, пока я перемещаю мою мышь на экране.

const shadow = function(e){
   const width = this.offsetWidth;
   const height = this.offsetHeight;

}

Сначала я создал две переменные ширины и высоту, чтобы получить измерения здесь.

Примечание : Что такое Ocfetwidth и Offsetheight?

OFFSETWIDTH дает измерение в пикселях ширины CSS Element, дает измерение в пикселях высоты CSS элемента. Измерение отличается, если мы разместим окно браузера -Посленсивности.

3.4 – Я создал два других переменных x и y, который принимает как значение измерений точного пикселя в тут, где событие. (MouseMove) .i Использование пусть вместо const в этой переменные, потому что я должен обновить их дальше.

 let x = e.offsetX
 let y = e.offsetY

Примечание : Что такое Offsetx и Offsetety? Это свойство интерфейса MouseEvent, который обеспечивает смещение в координате x или y указателя мыши между этим событием и кромки заполнения целевого узла.

3.5 – После этого мне нужно было изменить переменные X и Y, потому что они устанавливают значение 0 в левом верхнем углу героя, и мы хотим установить значение в левом верхнем углу текста. Поэтому мне нужно было проверить, если этот (герой) отличается от E.Target, Если это, поэтому мне нужно обновить эти переменные, чтобы установить значение 0 в правильном месте.

const shadow = function(e){
  ...
  if(this !== e.target){
      x = x + e.target.offsetLeft;
      y = y + e.target.offsetTop;
  }
}

3.6 – После этого я добавил две новые переменные, которые будут содержать математику, чтобы сделать тень двигаться в правильном месте. Если тень прогулки 100, мы должны помнить, что прогулки 50 из нулевой точки на левую верхнюю часть и 50 дна справа. Поэтому нам нужно разделить прогулку в два и вычесть математику, сделанную с пикселем 0 точек, где он начинает разделен на высоту и ширину героя плюс ходьба.

const shadow = function(e){

    const xWalk = Math.round(( x / width * walk) - (walk / 2))
    const yWalk = Math.round(( y /height * walk) - (walk / 2))

}

Это даст точный пиксель переместился от тени на каждое направление на экране до.

3.7 – После этого все, что мне нужно было сделать, было стиль текстовой тени переменного текста со значениями Xwalk и Ywalk

 const shadow = function(e){
   ...
   text.style.textShadow = `
    ${xWalk}px ${yWalk}px  var(--shadow-color)`;

}

Не забывайте поставить PX в ценности.

И это 🎉 🎉 Наслаждайтесь этим и повеселиться, чтобы исследовать. Если вы хотите поделиться своими примерами и новыми вещами, которые вы пытались связаны с этим, комментарий ниже.

Чтобы проверить полный код Нажмите здесь

Чтобы увидеть демонстрируйте демонстрацию здесь

Оригинал: “https://dev.to/raquelsartwork/how-i-did-a-mouse-move-shadow-effect-using-javascript-4j5o”

Hello,👋 I'm Raquel Santos

Читайте ещё по теме: