3D hover-эффект ориентированный на направление курсора

Пример:

Название фотографии

Описание фотографии.
Название фотографии

Описание фотографии.
Название фотографии

Описание фотографии.
Название фотографии

Описание фотографии.
Название фотографии

Описание фотографии.
Название фотографии

Описание фотографии.
Название фотографии

Описание фотографии.
Название фотографии

Описание фотографии.
Название фотографии

Описание фотографии.
Название фотографии

Описание фотографии.
Название фотографии

Описание фотографии.
Название фотографии

Описание фотографии.

Обратите внимание: переход корректно работает только на квадратных блоках

HTML:

<div class="hover3d">
	<ul>
		<li>
			<div class="data">
				<a href="#link">
					<img src="/photo-1.jpg"/>
				</a>
				<div class="info">
					<h3>Название фотографии</h3>
					<p>Описание фотографии.</p>
				</div>
			</div>  
		</li>
<!-- ... -->
		<li>
			<div class="data">
				<a href="#link">
					<img src="/photo-12.jpg"/>
				</a>
				<div class="info">
					<h3>Название фотографии</h3>
					<p>Описание фотографии.</p>
				</div>
			</div>  
		</li>	
	</ul>
</div>

<ul>

<li>

</a>

<h3>Название фотографии</h3>

<p>Описание фотографии.</p>

</div>

</li>

<li>

</a>

<h3>Название фотографии</h3>

<p>Описание фотографии.</p>

</div>

</li>

</ul>

</div>

CSS:

.hover3d * {
    box-sizing: border-box;
}	
.hover3d {
	margin: 20px 0;
}
.hover3d .info {
	transform: rotate3d(1, 0, 0, 90deg);
	width: 100%;
	height: 100%;
	padding: 20px;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 4px;
	pointer-events: none;
	background-color: #337AB7;
}
.hover3d ul {
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
.hover3d li {
	perspective: 500px;
	position: relative;
	width: calc(25% - 10px);
	margin: 5px;
	padding: 0;
	list-style: none;
	border: 6px solid #BFE2FF;
	overflow: hidden;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
}
@media (max-width:767px){
	.hover3d li {
		width: calc(33% - 10px);
	}
}
@media (max-width:560px){
	.hover3d li {
		width: calc(50% - 10px);
	}
}	
@media (max-width:420px){
	.hover3d li {
		width: 100%;
	}
}
.hover3d li a {
	display: block;
	text-decoration: none;
	width: 100%;
	height: 100%; 
}
.hover3d li a img {
	object-fit: cover;
	width: 100%;
}
.hover3d li h3 {
	margin: 0;
	font-size: 20px;
	color: #BFE2FF;
	font-family: 'Roboto', sans-serif; 
}
.hover3d li p {
	color: #FFF;
}
.in-top .info {
	transform-origin: 50% 0%;
	animation: in-top 300ms ease 0ms 1 forwards;
}
.in-right .info {
	transform-origin: 100% 0%;
	animation: in-right 300ms ease 0ms 1 forwards;
}
.in-bottom .info {
	transform-origin: 50% 100%;
	animation: in-bottom 300ms ease 0ms 1 forwards;
}
.in-left .info {
	transform-origin: 0% 0%;
	animation: in-left 300ms ease 0ms 1 forwards;
}
.out-top .info {
	transform-origin: 50% 0%;
	animation: out-top 300ms ease 0ms 1 forwards;
}
.out-right .info {
	transform-origin: 100% 50%;
	animation: out-right 300ms ease 0ms 1 forwards;
}
.out-bottom .info {
	transform-origin: 50% 100%;
	animation: out-bottom 300ms ease 0ms 1 forwards;
}
.out-left .info {
	transform-origin: 0% 0%;
	animation: out-left 300ms ease 0ms 1 forwards;
}
@keyframes in-top {
	from {
		transform: rotate3d(-1, 0, 0, 90deg);
	}
	to {
		transform: rotate3d(0, 0, 0, 0deg);
	}
}
@keyframes in-right {
	from {
		transform: rotate3d(0, -1, 0, 90deg);
	}
	to {
		transform: rotate3d(0, 0, 0, 0deg);
	}
}
@keyframes in-bottom {
	from {
		transform: rotate3d(1, 0, 0, 90deg);
	}
	to {
		transform: rotate3d(0, 0, 0, 0deg);
	}
}
@keyframes in-left {
	from {
		transform: rotate3d(0, 1, 0, 90deg);
	}
	to {
		transform: rotate3d(0, 0, 0, 0deg);
	}
}
@keyframes out-top {
	from {
		transform: rotate3d(0, 0, 0, 0deg);
	}
	to {
		transform: rotate3d(-1, 0, 0, 104deg);
	}
}
@keyframes out-right {
	from {
		transform: rotate3d(0, 0, 0, 0deg);
	}
	to {
		transform: rotate3d(0, -1, 0, 104deg);
	}
}
@keyframes out-bottom {
	from {
		transform: rotate3d(0, 0, 0, 0deg);
	}
	to {
		transform: rotate3d(1, 0, 0, 104deg);
	}
}
@keyframes out-left {
	from {
		transform: rotate3d(0, 0, 0, 0deg);
	}
	to {
		transform: rotate3d(0, 1, 0, 104deg);
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

.hover3d * {

box-sizing: border-box;

}

.hover3d {

margin: 20px 0;

}

.hover3d .info {

transform: rotate3d(1, 0, 0, 90deg);

width: 100%;

height: 100%;

padding: 20px;

position: absolute;

top: 0;

left: 0;

border-radius: 4px;

pointer-events: none;

background-color: #337AB7;

}

.hover3d ul {

padding: 0;

display: flex;

flex-wrap: wrap;

}

.hover3d li {

perspective: 500px;

position: relative;

width: calc(25% - 10px);

margin: 5px;

padding: 0;

list-style: none;

border: 6px solid #BFE2FF;

overflow: hidden;

box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);

}

@media (max-width:767px){

.hover3d li {

width: calc(33% - 10px);

}

@media (max-width:560px){

.hover3d li {

width: calc(50% - 10px);

}

@media (max-width:420px){

.hover3d li {

width: 100%;

}

.hover3d li a {

display: block;

text-decoration: none;

width: 100%;

height: 100%;

}

.hover3d li a img {

object-fit: cover;

width: 100%;

}

.hover3d li h3 {

margin: 0;

font-size: 20px;

color: #BFE2FF;

font-family: 'Roboto', sans-serif;

}

.hover3d li p {

color: #FFF;

}

.in-top .info {

transform-origin: 50% 0%;

animation: in-top 300ms ease 0ms 1 forwards;

}

.in-right .info {

transform-origin: 100% 0%;

animation: in-right 300ms ease 0ms 1 forwards;

}

.in-bottom .info {

transform-origin: 50% 100%;

animation: in-bottom 300ms ease 0ms 1 forwards;

}

.in-left .info {

transform-origin: 0% 0%;

animation: in-left 300ms ease 0ms 1 forwards;

}

.out-top .info {

transform-origin: 50% 0%;

animation: out-top 300ms ease 0ms 1 forwards;

}

.out-right .info {

transform-origin: 100% 50%;

animation: out-right 300ms ease 0ms 1 forwards;

}

.out-bottom .info {

transform-origin: 50% 100%;

animation: out-bottom 300ms ease 0ms 1 forwards;

}

.out-left .info {

transform-origin: 0% 0%;

animation: out-left 300ms ease 0ms 1 forwards;

}

@keyframes in-top {

from {

transform: rotate3d(-1, 0, 0, 90deg);

}

to {

transform: rotate3d(0, 0, 0, 0deg);

}

@keyframes in-right {

from {

transform: rotate3d(0, -1, 0, 90deg);

}

to {

transform: rotate3d(0, 0, 0, 0deg);

}

@keyframes in-bottom {

from {

transform: rotate3d(1, 0, 0, 90deg);

}

to {

transform: rotate3d(0, 0, 0, 0deg);

}

@keyframes in-left {

from {

transform: rotate3d(0, 1, 0, 90deg);

}

to {

transform: rotate3d(0, 0, 0, 0deg);

}

@keyframes out-top {

from {

transform: rotate3d(0, 0, 0, 0deg);

}

to {

transform: rotate3d(-1, 0, 0, 104deg);

}

@keyframes out-right {

from {

transform: rotate3d(0, 0, 0, 0deg);

}

to {

transform: rotate3d(0, -1, 0, 104deg);

}

@keyframes out-bottom {

from {

transform: rotate3d(0, 0, 0, 0deg);

}

to {

transform: rotate3d(1, 0, 0, 104deg);

}

@keyframes out-left {

from {

transform: rotate3d(0, 0, 0, 0deg);

}

to {

transform: rotate3d(0, 1, 0, 104deg);

}

Обратите внимание: если всплывающий блок при уходе курсора пропадает не полностью (возможно на квадратах большого размера) - нужно увеличить значение perspective: 500px;

JS:

const nodes = [].slice.call(document.querySelectorAll('li .data'), 0);
const directions  = { 0: 'top', 1: 'right', 2: 'bottom', 3: 'left' };
const classNames = ['in', 'out'].map((p) => Object.values(directions).map((d) => `${p}-${d}`)).reduce((a, b) => a.concat(b));
const getDirectionKey = (ev, node) => {
	const { width, height, top, left } = node.getBoundingClientRect();
	const l = ev.pageX - (left + window.pageXOffset);
	const t = ev.pageY - (top + window.pageYOffset);
	const x = (l - (width/2));
	const y = (t - (height/2));
	return Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;
}
class hovItem {
	constructor(element) {
		this.element = element;    
		this.element.addEventListener('mouseover', (ev) => this.update(ev, 'in'));
		this.element.addEventListener('mouseout', (ev) => this.update(ev, 'out'));
	}
	update(ev, prefix) {
		this.element.classList.remove(...classNames);
		this.element.classList.add(`${prefix}-${directions[getDirectionKey(ev, this.element)]}`);
	}
}
nodes.forEach(node => new hovItem(node));

const nodes = [].slice.call(document.querySelectorAll('li .data'), 0);

const directions = { 0: 'top', 1: 'right', 2: 'bottom', 3: 'left' };

const classNames = ['in', 'out'].map((p) => Object.values(directions).map((d) => `${p}-${d}`)).reduce((a, b) => a.concat(b));

const getDirectionKey = (ev, node) => {

const { width, height, top, left } = node.getBoundingClientRect();

const l = ev.pageX - (left + window.pageXOffset);

const t = ev.pageY - (top + window.pageYOffset);

const x = (l - (width/2));

const y = (t - (height/2));

return Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;

}

class hovItem {

constructor(element) {

this.element = element;

this.element.addEventListener('mouseover', (ev) => this.update(ev, 'in'));

this.element.addEventListener('mouseout', (ev) => this.update(ev, 'out'));

}

update(ev, prefix) {

this.element.classList.remove(...classNames);

this.element.classList.add(`${prefix}-${directions[getDirectionKey(ev, this.element)]}`);

}

nodes.forEach(node => new hovItem(node));

Решение найдено на codepen.io у пользователя Noel Delgado

Пример:

Название фотографии

Название фотографии

Название фотографии

Название фотографии

Название фотографии

Название фотографии

Название фотографии

Название фотографии

Название фотографии

Название фотографии

Название фотографии

Название фотографии

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий:

Комментарии: