Ефекти нахилу при наведенні миші

41

Від автора: сьогодні ми поділимося з вами експериментальними ефектами. Ми надихалися ефектом hover, який побачили на сайті Kikk 2015, створених студією Dogstudio. Нам потрібно анімувати зображення (це може бути посилання або просто елемент сітки) з ефектом нахилу окремих частин. На одному елементі у нас буде кілька наклоняемых частин (важелів), за допомогою яких можна створити безліч цікавих ефектів. Для створення ефекту нам знадобиться зображення, шар з відблиском, напівпрозорий шар з кольоровим градієнтом, рамка і підпис. У прикладах показано, як їх можна анімувати. Сподіваємося, вам сподобається.

демо скачать исходники

Попередження: деякі з технік занадто експериментальні і не будуть працювати ні в одному браузері. Ми використовуємо такі речі, як flexbox, перспективу, а в останньому прикладі — режими накладення.

HTML структура важеля

Ось так буде виглядати наш важіль. Ми використовуємо посилання:

img03

Helen Portland

Seattle

Як видно, в коді представлені всі вищезазначені елементи.

Стилі для важеля

.tilter {
position: relative;
display: block;
flex: none;
width: 300px;
height: 415px;
margin: 1.5 em 2.5 em;
color: #fff;
perspective: 1000px;
}
.tilter * {
pointer-events: none;
}
.tilter:hover,
.tilter:focus {
color: #fff;
outline: none;
}
.tilter__figure,
.tilter__image {
display: block;
width: 100%;
height: 100%;
margin: 0;
}
.tilter__figure > * {
transform: translateZ(0px); /*Примусово виправляємо порядок стека */
}
.tilter__figure {
position: relative;
}
.tilter__figure::before {
content: «;
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
box-shadow: 0 30px 20px rgba(35,32,39,0.5);
}
.tilter__deco {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.tilter__deco—overlay {
background-image: linear-gradient(45deg, rgba(226, 60, 99, 0.4), rgba(145, 58, 252, 0.4), rgba(16, 11, 192, 0.4));
}
.tilter__deco—shine div {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
}
.tilter__deco—lines {
fill: none;
stroke: #fff;
stroke-width: 1.5 px;
}
.tilter__caption {
position: absolute;
bottom: 0;
width: 100%;
padding: 4em;
}
.tilter__title {
font-family: ‘Abril Fatface’, serif;
font-size: 2.5 em;
font-weight: normal;
line-height: 1;
margin: 0;
}
.tilter__description {
font-size: 0.85 em;
margin: 1em 0 0 0;
letter-spacing: 0.15 em;
}

JavaScript

У налаштуваннях можна вказати, які рухи будуть мати анимируемые елементи:

Можна передати трансформацію і обертання по всіх осях і для всіх анімацій, щоб повернутися до стилів за замовчуванням (тривалість, функція анімації і пружність – як у anime.js).

Для властивості translate і обертання можна задавати значення для кожної осі наступним чином:

number: наприклад, translation : {x: 10, y: -10}. Елемент буде рухатися вздовж осі Х від -10px до 10px (при русі миші зліва направо) і по осі У від 10px до -10зч (при русі миші зверху вниз).

array: наприклад, translation : {z: [10,100]}. Елемент буде рухатися вздовж осі Z від 10px до 100px (при русі миші зверху вниз)

Initialize:
new TiltFx(el, [options]);
The options:
var options = {
movement: {
// Головний контейнер.
imgWrapper : {
translation : {x: 10, y: 10, z: 30},
rotation : {x 0, y: -10, z: 0},
reverseAnimation : {duration : 200, easing : ‘easeOutQuad’}
},
// SVG лінії.
lines : {
translation : {x: 10, y: 10, z: [0,70]},
rotation : {x 0, y: 0, z: -2},
reverseAnimation : {duration : 2000, easing : ‘easeOutExpo’}
},
// підпис.
caption : {
rotation : {x 0, y: 0, z: 2},
reverseAnimation : {duration : 200, easing : ‘easeOutQuad’}
},
// Перекриває шар.
overlay : {
translation : {x: 10, y: -10, z: 0},
rotation : {x 0, y: 0, z: 2},
reverseAnimation : {duration : 2000, easing : ‘easeOutExpo’}
},
// шар з відблиском.
shine : {
translation : {x: 100, y: 100, z: 0},
reverseAnimation : {duration : 200, easing : ‘easeOutQuad’}
}
}
}

Сподіваємося, вам сподобалися ефекти, і ви винесли з цього уроку щось корисне і надихає! Проект на Github.