How to use vanilla-tilt - 7 common examples

To help you get started, we’ve selected a few vanilla-tilt examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github durancristhian / futbol / src / js / shirts.js View on Github external
<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');
}
github DefinitelyTyped / DefinitelyTyped / types / vanilla-tilt / vanilla-tilt-tests.ts View on Github external
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;
github DefinitelyTyped / DefinitelyTyped / types / vanilla-tilt / vanilla-tilt-tests.ts View on Github external
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;
github DefinitelyTyped / DefinitelyTyped / types / vanilla-tilt / vanilla-tilt-tests.ts View on Github external
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'
});
github vanderb / vue-tilt.js / src / index.js View on Github external
Vue.directive('tilt', function (el, binding) {
            VanillaTilt.init(el, Object.assign({}, binding.value) );
        });
github Luminqi / Palette / src / demo / button.js View on Github external
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 = ''

vanilla-tilt

A smooth 3D tilt javascript library forked from Tilt.js

MIT
Latest version published 7 months ago

Package Health Score

66 / 100
Full package analysis