21
Июл
2021

Фоновая картинка (параллакса) при движении курсора прыгает, как это исправить в скрипте?

У меня фоновая картинка (параллакса) при движении курсора прыгает потому что курсор заходит на другие блоки которые сверху фоновой картинки.

В этом же скрипте, надо сделать как-то так чтобы курсор не видел другие блоки относительно параллакса и картинка не прыгала.

Прописать в стилях например transition: 0.2s; для плавного скачка или другие костыли, не подходит.

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

Вот пример с тем же скриптом (при наведении на блок с текстом, фоновая картинка прыгает):

html

 <div  class="module" style="padding: 200px">
  <div class="module-novis">Text</div>
</div>

css

* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
}
.module {
  background: url(https://www.google.com.ua/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png) no-repeat;
  background-size: 400px;
  background-position: var(--x ) var(--y) ;
}
.module-novis{
    font-size: 70px; 
    padding:10px; 
    text-align: center; 
    background: #cccc ;
}

js

const el = document.querySelector(".module");

el.addEventListener("mousemove", (e) => {
  el.style.setProperty('--x', -e.offsetX / 100 + 60 + "%");
  el.style.setProperty('--y', -e.offsetY / 50 + 60 + "%");
});

Источник: https://ru.stackoverflow.com/questions/1307592/%D0%A4%D0%BE%D0%BD%D0%BE%D0%B2%D0%B0%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B0-%D0%BF%D0%B0%D1%80%D0%B0%D0%BB%D0%BB%D0%B0%D0%BA%D1%81%D0%B0-%D0%BF%D1%80%D0%B8-%D0%B4%D0%B2%D0%B8%D0%B6%D0%B5%D0%BD%D0%B8%D0%B8-%D0%BA%D1%83%D1%80%D1%81%D0%BE%D1%80%D0%B0-%D0%BF%D1%80%D1%8B%D0%B3%D0%B0%D0%B5%D1%82-%D0%BA%D0%B0%D0%BA-%D1%8D%D1%82%D0%BE-%D0%B8%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D1%82%D1%8C-%D0%B2

Тебе может это понравится...

Добавить комментарий