How to use vanilla-tilt - 7 common examples

<div class="mh3">
                            <p class="b f2 mv0">${shirt.Empates}</p>
                            <p class="black-50 mv0">Empate${shirt.Empates === 1 ? '' : 's'}</p>
                        </div>
                        <div class="mh3">
                            <p class="b f2 mv0">${shirt.Derrotas}</p>
                            <p class="black-50 mv0">Derrota${shirt.Derrotas === 1 ? '' : 's'}</p>
                        </div>
                    
                
            `
        );
    });

    // cada camiseta tiene un efecto divertido en el hover
    vanillaTilt.init(document.querySelectorAll('[data-tilt]'));

    // muestro las portadas porque las mismas ya están en el DOM
    shirtsContainerEl.classList.remove('dn');
}

const element: VanillaTilt = new VanillaTilt(document.createElement('a'), {
    axis: 'y',
    easing: 'cubic-besizer(0.9, 0.9, 0.9)',
    max: 2,
    perspective: 100,
    reset: true,
    reverse: true,
    scale: 2,
    speed: 200,
    glare: true,
    "max-glare": 1,
    "glare-prerender": true,
});

VanillaTilt.init(document.createElement('a'), {
    axis: 'x'
});

element.removeEventListener();

VanillaTilt.init([document.createElement('a')], {
    axis: null
});

const values: VanillaTilt.TiltValues = element.getValues();
values.percentageX;
values.percentageY;
values.tiltX;
values.tiltY;

reset: true,
    reverse: true,
    scale: 2,
    speed: 200,
    glare: true,
    "max-glare": 1,
    "glare-prerender": true,
});

VanillaTilt.init(document.createElement('a'), {
    axis: 'x'
});

element.removeEventListener();

VanillaTilt.init([document.createElement('a')], {
    axis: null
});

const values: VanillaTilt.TiltValues = element.getValues();
values.percentageX;
values.percentageY;
values.tiltX;
values.tiltY;

import { VanillaTilt } from 'vanilla-tilt';

const element: VanillaTilt = new VanillaTilt(document.createElement('a'), {
    axis: 'y',
    easing: 'cubic-besizer(0.9, 0.9, 0.9)',
    max: 2,
    perspective: 100,
    reset: true,
    reverse: true,
    scale: 2,
    speed: 200,
    glare: true,
    "max-glare": 1,
    "glare-prerender": true,
});

VanillaTilt.init(document.createElement('a'), {
    axis: 'x'
});

Vue.directive('tilt', function (el, binding) {
            VanillaTilt.init(el, Object.assign({}, binding.value) );
        });

const btnWrapper = document.getElementById('button-wrapper')
const svgContainer = document.getElementById('svg-container')
const btn = document.getElementById('button')
const input = document.getElementById('input')

function remove (e) {
  const event = e || window.event
  const target = event.target || event.srcElement
  svgContainer.removeChild(target)
}

function rand(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

VanillaTilt.init(btn, {
  scale: 1.1, speed: 1000
})

function explode () {
  
  const symbolArray = [
    '#donut',
    '#circle',
    '#tri_hollow',
    '#triangle',
    '#square',
    '#squ_hollow'
  ];
  
  const particles = 10
  let children = ''