Эффекты наклона при наведении

Сегодня мы поделимся с вами идеями нескольких анимационных CSS эффектов при наведении:

Посмотреть демо
Скачать исходный код

Мы собираемся “оживить” изображение, которое может представлять собой как ссылку, так и просто находиться в галерее вместе с другими картинкам, с помощью эффекта со смещением при наведении.

Комбинируя несколько эффектов в одном, можно добиться достаточно интересных результатов: эффект “сияния”, полупрозрачное наложение, а также яркий градиент, контур и рамка. Эти примеры демонстрируют сразу несколько идей для оформления анимации.

Примечание: некоторые из рассматриваемых примеров представлены исключительно в экспериментальных целях, и могут не работать в некоторых браузерах. Сегодня мы будем использовать свойства flexbox, perspective, а в последнем примере еще и поэкспериментируем с режимами смешивания.

HTML создаваемого эффекта

Примерно так будет устроен элемент для применения CSS эффекта при наведении. В данном случае мы используем анкор:

<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>

Стилизация эффекта

Стили создаваемого CSS эффекта:

.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

В настройках можно определять, какие движения будут выполнять элементы, к которым применяются эффекты при наведении на картинку CSS:

  • Можно использовать translation и rotation по всем осям, и animation (продолжительность, ускорение и эластичность; все примерно то же, что можно видеть в настройках anime.js), чтобы вернуться к исходной стилизации;
  • Мы указываем значения для каждой оси как для translation, так и для rotation следующим образом:
  • number: или translation: {x: 10, y: -10} означает, что элемент будет двигаться по оси Х от значения -10px до 10px (по мере того, как перемещается курсор мыши слева направо), а также по оси Y от 10px до -10px (в зависимости от того, как курсор мыши перемещается сверху вниз);
  • array: или translation: {z: [10,100]} означает, что элемент будет перемещаться по оси Z от 10px к 100px.

Инициализация:

new TiltFx(el, [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'}
		}
	}
}

Надеемся, вам понравились сегодняшние hover CSS эффекты, и вы найдете им применение в собственных проектах!

Поддержка браузерами: Chrome, Firefox, Internet Explorer, Safari, Opera.

Ссылки и материалы

  • anime.js;
  • Изображения взяты с Pexels, а также с Unsplash.com;
  • ImagesLoaded.

Пожалуйста, оставьте ваши отзывы по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, лайки, дизлайки, подписки, отклики!

Пожалуйста, оставляйте ваши мнения по текущей теме материала. За комментарии, лайки, отклики, дизлайки, подписки низкий вам поклон!

Данная публикация является переводом статьи «Tilt Hover Effects» , подготовленная редакцией проекта.

Меню
Posting....