Небольшая JS-библиотека на jQuery, которая использует requestAnimationFrame для создания легкого параллакса в 60+ кадров в секунду.
Tilt-эффект — это популярный эффект наклона элемента, в зависимости от положения наведенного курсора пользователя. Очень интересно данная технология смотрится на постера или баннерных изображениях с надписью. Уже существует множество примеров создания tilt эффекта средствами CSS3 и JavaScript. Плагин tilt.js отличается тем, что обеспечивает высокую производительность самой анимации на любом устройстве. Подробнее с демо-примерами Вы можете ознакомиться на лендинг-страницы разработчика.
Использование плагина tilt.js:
<!DOCTYPE html>
<body>
<div data-tilt></div> <!-- Tilt element -->
<script src="jquery.js" ></script> <!-- Load jQuery first -->
<script src="tilt.js"></script> <!-- Load Tilt.js library -->
</body>
Опции плагина:
{
maxTilt: 20,
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
scale: 1, // 2 = 200%, 1.5 = 150%, etc..
speed: 300, // Speed of the enter/exit transition.
transition: true, // Set a transition on enter/exit.
axis: null, // What axis should be disabled. Can be X or Y.
reset: true, // If the tilt effect has to be reset on exit.
glare: false, // Enables glare effect
maxGlare: 1 // From 0 - 1.
}
События плагина:
const tilt = $('.js-tilt').tilt();
tilt.on('change', callback); // parameters: event, transforms
tilt.on('tilt.mouseLeave', callback); // parameters: event
tilt.on('tilt.mouseEnter', callback); // parameters: event
Методы плагина:
const tilt = $('.js-tilt').tilt();
// Destroy instance
tilt.tilt.destroy.call(tilt);
// Get values of instance
tilt.tilt.getValues.call(tilt); // returns [{},{},etc..]
// Reset instance
tilt.tilt.reset.call(tilt);
Скачать исходный код плагина jQuery можно по ссылкам выше.
