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

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

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

 const boxes = document.querySelectorAll(".tilt-el"); VanillaTilt.init(boxes); document.querySelector('#w').innerText = window.innerWidth; if (window.innerWidth {amp}lt;= 800) { boxes.forEach(box ={amp}gt; { 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; } 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class='container'{amp}gt; {amp}lt;div class='tilt-el' data-tilt data-tilt-max="50"{amp}gt;one{amp}lt;/div{amp}gt; {amp}lt;div class='tilt-el' data-tilt data-tilt-max="60"{amp}gt;two{amp}lt;/div{amp}gt; {amp}lt;div class='tilt-el' data-tilt data-tilt-max="70"{amp}gt;three{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;pre{amp}gt;{amp}lt;code{amp}gt;window.innerWidth = {amp}lt;span id="w"{amp}gt;?{amp}lt;/span{amp}gt;{amp}lt;/code{amp}gt;{amp}lt;/pre{amp}gt; 

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

 if (window.innerWidth {amp}gt; 800) { const boxes = document.querySelectorAll(".tilt-el"); VanillaTilt.init(boxes); } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector