VanillaTilt.js и querySelectorAll, чтобы уничтожить наклон в div

Question

Я пытаюсь уничтожить VanillaTilt за несколько дел, когда размер экрана меньше 800 пикселей. Конечно, моя функция работает с одним div, но не с несколькими. Я думал, что могу использовать querySelectorAl, но сейчас я знаю, что это не так просто. Поэтому я записал этот код и застрял. Я не знаю, что с этим не так. Может ли кто-нибудь помочь мне с этим? Ура

<div class='container'>
    <div class='tilt-el'></div>
    <div class='tilt-el'></div>
    <div class='tilt-el'></div>
</div>

var destroy = document.querySelectorAll(".tilt-el");
var i;
var w = window.innerWidth;
VanillaTilt.init(destroy);

function unTilt(){ 
    if( w  <= 800) {
        destroy.vanillaTilt.destroy();
    }
};

for(i=0;i<destroy.length;i++){
    destroy[i].addEventListener('mousemove', unTilt);
}

Answer 1

Итак, я перестраиваю свой код, и, возможно, кто-то будет использовать его или сделать его лучше, но ... Слишком много делений, вы не можете поместить наклон данных и т. Д. Почему? Я не знаю, но когда я использую его как часть HTML, он не работает.

HTML должен выглядеть так:

<div class='tilt-el'></div>
<div class='tilt-el'></div>
<div class='tilt-el'></div>

Не так, как мой предыдущий:

<div class='tilt-el' data-tilt></div>
<div class='tilt-el' data-tilt></div>
<div class='tilt-el' data-tilt></div>

и JS

const w = window.innerWidth;
if(w > 600) { 
  VanillaTilt.init(document.querySelectorAll(".tilt"), {
  max: 30,
  speed: 3000
})}
else {
    console.log(w);
 }

Конечно, VanilltaTilt поддерживает Nodelist, поэтому вам не нужно делать все циклы и т. Д.

Я думаю, что он будет работать и для вас.

Answer 2

Предполагая, что vanillaTilt уже создан и должен быть уничтожен, вы можете использовать этот код. Он перебирает элементы div и уничтожает их один за другим.

const boxes = document.querySelectorAll(".tilt-el");
VanillaTilt.init(boxes);

document.querySelector('#w').innerText = window.innerWidth;

if (window.innerWidth <= 800) {
  boxes.forEach(box => {
    box.vanillaTilt.destroy();
  });
}

.container .tilt-el {
  padding: 1em;
  margin: 2em auto;
  text-align: center;
  width: 100px;
  border: 1px dotted gray;
  background-color: rgba(200,0,0,0.25);
}

pre {
  margin: 0 auto;
  text-align: center;
  font-size: x-large;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.js"></script>
  <div class='container'>
    <div class='tilt-el' data-tilt data-tilt-max="50">one</div>
    <div class='tilt-el' data-tilt data-tilt-max="60">two</div>
    <div class='tilt-el' data-tilt data-tilt-max="70">three</div>
  </div>
  
  <pre><code>window.innerWidth = <span id="w">?</span>

Однако, если вы не хотите, чтобы библиотека загружалась для пользователей с небольшими экранами, было бы более эффективнопроверьте размер экрана до и решите, стоит ли устанавливать vanillaTilt. Это избавит вас от загрузки и сразу же уничтожит

if (window.innerWidth > 800) {
    const boxes = document.querySelectorAll(".tilt-el");
    VanillaTilt.init(boxes);
}

Answer 3

document.querySelectorAll(".tilt-el"); - это возвращаемый массив элементов, поэтому ваша функция должна выглядеть следующим образом:

function myFunction(i){ 
  if( w  <= 800) {
    destroy[i].vanillaTilt.destroy();
  }
}