Плагин не работает правильно
Есть плагин Vanila Tilt https://micku7zu.github.io/vanilla-tilt.js/, у него есть функция "destroy" но почему то она не работает как надо.
Вот тут демо: https://codepen.io/anakin-skywalker94/pen/yLLbELe Помогите разобраться в чем дело... 1. При срабатывание функций "destroy", плагин удаляется только с первого элемента. Как сделать что бы удалилось со всех? 2. При срабатывание функций "enable", плагин включается обратно... Но его заданные начальные параметры пропадают. Как это исправить? Помогите кто знает. Заранее спасибо! |
VanillaTilt destroy
ethereal,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.items{
display: flex;
justify-content: space-around;
}
.items div {
width: 150px;
height: 150px;
background: coral;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>
</head>
<body>
<div class="items">
<div class="js-tilt"></div>
<div class="js-tilt"></div>
<div class="js-tilt"></div>
</div>
<button id="destroy-button">Destroy</button>
<button id="enable-button">Enable</button>
<script>
let destroyBox = document.querySelectorAll(".js-tilt");
let settings = {
max: 10,
speed: 3000,
scale: 0.8,
perspective: 1000
};
const init = () => VanillaTilt.init(destroyBox, settings);
init();
document.querySelector("#destroy-button").addEventListener("click", function () {
destroyBox.forEach(el => el.vanillaTilt.destroy());
});
document.querySelector("#enable-button").addEventListener("click", init);
</script>
</body>
</html>
|
Спасибо большое
|
| Часовой пояс GMT +3, время: 19:19. |