1

Вопрос 1.
Помогите пожалуйста кто знает как должен выглядеть этот javascript переработанным в jquery ?

Вопрос 2.
В примере есть два блока с названием текст 1 и текст 2. В блоке с текстом 2, параллакс не работает, потому что он работает только для одного элемента. Как сделать его рабочим(уже в jquery) к любому блоку с классом .module ? Заранее спасибо.

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

el.addEventListener("mousemove", (e) => {
  el.style.setProperty('--x', -e.clientX / 100 + 60 + "%");
  el.style.setProperty('--y', -e.clientY / 20 + 60 + "%");
});
* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
}
.module {
--x: 50% ;
--y: 50% ;
  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 ;
}
<div  class="module" style="padding: 80px">
  <div class="module-novis">Text 1</div>
</div>
 <div  class="module" style="padding: 80px">
  <div class="module-novis">Text 2</div>
</div>

5
  • Зачем вам именно jquery?
    – nazarpunk
    25 июл 2021 в 16:37
  • @nazarpunk Этот скрипт должен работать на вордпресс вместе с плагином элементор, а елементор если кратко не полностью работал с этим джава скриптом. Но после смены в jquery замечательно.
    – toms24
    25 июл 2021 в 16:57
  • А причём здесь jquery? Скорей всего событие где-то перехватывается и отменяется.
    – nazarpunk
    25 июл 2021 в 16:59
  • @nazarpunk возможно, я не профи если честно (только начал учить javascript ), но я подумал что с jquery не должно быть проблем и не ошибся :)
    – toms24
    25 июл 2021 в 17:08
  • jquery в 2021 году очень спорное решение.
    – nazarpunk
    25 июл 2021 в 17:12

1 ответ 1

0

$(".module").mousemove(function(e) {
  $(this).css('--x', -e.clientX / 100 + 60 + "%");
  $(this).css('--y', -e.clientY /  20 + 60 + "%");
});
* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
}
.module {
--x: 50% ;
--y: 50% ;
  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 ;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  class="module" style="padding: 80px">
  <div class="module-novis">Text 1</div>
</div>
 <div  class="module" style="padding: 80px">
  <div class="module-novis">Text 2</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.