VanillaTilt.js and querySelectorAll to destroy tilt in divs

user_12210808 0
Viewed 426

Im trying to destroy VanillaTilt on few divs when screen size is smaller than 800px. Of course my function works with one div but not with few ones. I thought that i can use a querySelectorAl but i know right now that its not so simple. So i wrote down that code and im stuck. I dont know what's wrong with that. Can somebody help me with it ? Cheers

<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);
}
html jquery javascript
3 Answers

document.querySelectorAll(".tilt-el"); is return array of element so your function should be like:

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

So i rebuild my code and maybe somebody will use it or make it better but... Too divs you cant put data-tilt etc. Why? I don't know but when im using it as a part of html it's not working.

Html should looks like :

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

Not like mine previous one :

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

and JS 

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

Of course VanilltaTilt supports Nodelist so you dont have to do all loops etc.

I think it will works fine for you too.

user_122108080

Assuming vanillaTilt is already instantiated and must be destroyed, you could use this code. It iterates through the divs and desroys them one by one.

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></code></pre>

However, if you don't want the library loaded for users with smaller screens, it would be more effecient to check screen size before deciding whether to instatiate vanillaTilt. This will save you from loading and then immediately destroying

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