От автора: сегодня мы поделимся с вами экспериментальными эффектами. Мы вдохновлялись эффектом hover, который увидели на сайте Kikk 2015, созданным студией Dogstudio. Нам нужно анимировать изображение (это может быть ссылка или просто элемент сетки) с эффектом наклона отдельных частей. На одном элементе у нас будет несколько наклоняемых частей (рычагов), с помощью которых можно создать множество интересных эффектов. Для создания эффекта нам понадобится изображение, слой с бликом, полупрозрачный слой с цветным градиентом, рамка и подпись. В примерах ниже показано, как их можно анимировать. Надеемся, вам понравится.
Предупреждение: некоторые из техник слишком экспериментальные и не будут работать ни в одном браузере. Мы используем такие вещи, как flexbox, перспективу, а в последнем примере — режимы наложения.
HTML структура рычага
Вот так будет выглядеть наш рычаг. Мы используем ссылку:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<a href="#" class="tilter tilter--2"> <figure class="tilter__figure"> <img class="tilter__image" src="img/3.jpg" alt="img03" /> <div class="tilter__deco tilter__deco--shine"><div></div></div> <div class="tilter__deco tilter__deco--overlay"></div> <figcaption class="tilter__caption"> <h3 class="tilter__title">Helen Portland</h3> <p class="tilter__description">Seattle</p> </figcaption> <svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415"> <path d="M20.5,20.5h260v375h-260V20.5z" /> </svg> </figure> </a> |
Как видно, в коде представлены все вышеупомянутые элементы.
Стили для рычага
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
.tilter { position: relative; display: block; flex: none; width: 300px; height: 415px; margin: 1.5em 2.5em; 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.5px; } .tilter__caption { position: absolute; bottom: 0; width: 100%; padding: 4em; } .tilter__title { font-family: 'Abril Fatface', serif; font-size: 2.5em; font-weight: normal; line-height: 1; margin: 0; } .tilter__description { font-size: 0.85em; margin: 1em 0 0 0; letter-spacing: 0.15em; } |
JavaScript
В настройках можно указать, какие движения будут иметь анимируемые элементы:
Можно передать трансформацию и вращение по всем осям и для всех анимаций, чтобы вернуться к стилям по умолчанию (длительность, функция анимации и упругость – как в anime.js).
Для свойства translate и вращения можно задавать значения для каждой оси следующим образом:
number: например, translation : {x: 10, y: -10}. Элемент будет двигаться вдоль оси Х от -10px до 10px (при движении мыши слева направо) и по оси У от 10px до -10зч (при движении мыши сверху вниз).
array: например, translation : {z: [10,100]}. Элемент будет двигаться вдоль оси Z от 10px до 100px (при движении мыши сверху вниз)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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.
Автор: Mary Lou
Источник: //tympanus.net/
Редакция: Команда webformyself.
