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

  1. Статьи
  2. Верстка сайта
  3. CSS
0 ∞

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

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

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

Содержание

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

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

Скольжение изображений при наведении с использованием CSS3

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;
}
Анимация при наведении на анонс записи на чистом CSS

Код 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»