Приветствую, друзья, сегодня я покажу как создать эффект наклона карточки для вашего сайта. Поможет нам в этом библиотека Tilt.js. Это простая библиотека, которая помогает создавать эффект 3d наклона при наведении. Обратите внимание, что это форк оригинальной библиотеки, но без зависимостей от jQuery. Если вы предпочитаете использовать jQuery в проекте, то вот оригинальная jQuery версия. Давайте начнем!

Подготовка карточки для Tilt.js

Для этого урока я сверстал вот такую карточку товара (расположена ниже). Она выглядит максимально просто, что и нужно для демонстрации эффекта. Если нужно, код данной карточки будет расположен ниже. Вы же можете использовать свои карточки/блоки, для которых нужен эффект. Обратите внимание, что если вам нужен параллакс эффект, то вам нужно в стили карточки добавить transform-style: preserve-3d, а для элемента, к которому и будет применяться параллакс transform: translateZ(20px) (Со значением 20px можно поиграться)

Alexandr

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat illum explicabo atque quia nemo beatae earum quisquam eum voluptate saepe, facere delectus odit eveniet necessitatibus iste sint qui dignissimos rem.

Contact me

<div class="card">
    <div class="photo">
        <img src="images/photo.jpg" alt="Photo">
    </div>
    <h1 class="name">Alexandr</h1>
    <p class="description">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat illum explicabo atque quia nemo beatae earum quisquam eum voluptate saepe, facere delectus odit eveniet necessitatibus iste sint qui dignissimos rem.
    </p>
    <a href="#" class="button">
        Contact me
    </a>
</div>

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

img {
    max-width: 100%;
}

.wrapper {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.card {
    max-width: 400px;
    border-radius: 10px;
    background: linear-gradient(142deg, rgba(27,30,52,1) 0%, rgba(91,95,128,1) 100%);
    padding: 25px;
    box-shadow: 0 0 25px rgba(27,30,52,0.3);
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card .photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    padding: 5px;
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    display: block;
    margin: 0 auto;
    transform: translateZ(10px); // Нужно для паралакс эффекта
}

.card .photo img {
    border-radius: 50%;
}

.card .name {
    color: #fff;
    margin: 25px 0;
    font-weight: 500;
    text-align: center;
    font-size: 32px;
}

.card .description {
    color: #fff;
    font-size: 18px;
    margin: 0;
    text-align: center;
}

.card .button {
    margin-top: 25px;
    text-align: center;
    background: linear-gradient(30deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    padding: 10px;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 20px;
    border-radius: 10px;
    transform: translateZ(30px); // Нужно для паралакс эффекта
}

Делаем эффект наклона карточки

Далее необходимо подключить плагин к HTML страничке. Так как файл библиотеки у меня лежит в той же директории, что и html файл, я напишу только его название.

<script src="tilt.min.js"></script>

Далее переходим в тот JavaScript файл, в котором вы пишите основной код и инициализируем плагин. Так как эффект мне нужен для всех элементов с class=«card», то я и пишу его в селекторе. Так же вы можете управлять отображением с помощью опций. Ниже я приведу пример использования опций, а так же, перечислю все доступные опции, с описанием того, на что они влияют.

let cards = document.querySelectorAll('.card');

VanillaTilt.init(cards, {
    max: 15,  // Максимальный угол поворота карточки
    glare: true,  // Включаем эффект блика
    'max-glare': 0.5,  // Регулируем интенсивность блика
});

Все доступные опции для Tilt.js

А вот и все доступные опции. Те значения, которые указаны сейчас — это значения по умолчанию.

{
    reverse: false,  // Включает/выключает реверсию наклона
    max:  35,  // Максимальный угол поворота карточки
    startX:  0,  // Начальное положение по X
    startY:  0,  // Начальное положение по Y
    perspective:  1000,   // Перспектива (чем меньше, тем ярче эффект)
    scale:  1,  // Масштабирование
    speed:  300,  // Скорость анимации в начале/в конце
    transition:  true,  // Нужна ли анимация в начале/конце
    axis:  null,  // Отключение одной оси (X/Y)
    reset:  true,  // Сбрасывать ли положение
    easing:  "cubic-bezier(.03,.98,.52,.99)",  // Анимация при старте/в конце
    glare:  false,  //Нужен ли эффект блика
    "max-glare":  1,  // Интенсивность (непрозрачность) блика (от 0 до 1)
    gyroscope:  true,  // Нужен ли эффект при наклоне телефона/другого устройства
    /* Максимальные и минимальные углы эффекта при наклоне устройства */
    gyroscopeMinAngleX:  -45,
    gyroscopeMaxAngleX:  45,
    gyroscopeMinAngleY:  -45,
    gyroscopeMaxAngleY:  45,
}

Результат

Alexandr

Contact me

Спасибо, что прочитали! Если у вас остались любые вопросы — задавайте их в комментариях на Youtube, или напишите мне в Telegram. С радостью помогу и отвечу на ваши вопросы.

Так же буду очень благодарен, если вы ознакомитесь с другими моими уроками:

1. Анимация при скролле в несколько строк кода
2. Плавная прокрутка по клику на ссылку Jquery

Эффект наклона карточки для сайта (Tilt.js)

Подготовка карточки для Tilt.js

Alexandr

Делаем эффект наклона карточки

Все доступные опции для Tilt.js

Результат

Alexandr