3D-параллакс эффект с карточками

HTML:

<div class="cards-wrap">
	<div class="cards">
		<div class="cards-title">South Korean actresses</div>
		<div class="cards-row">
			<div class="card">
				<div class="card-bg" style="background-image: url(bg-1.jpg)"></div>
				<img class="card-img" src="photo-1.png" />
				<div class="card-text">Park Shin-hye</div>
			</div>
			<div class="card">
				<div class="card-bg" style="background-image: url(bg-2.jpg)"></div>
				<img class="card-img" src="photo-2.png" />
				<div class="card-text">Krystal Jung</div>
			</div>
			<div class="card">
				<div class="card-bg" style="background-image: url(bg-3.jpg)"></div>
				<img class="card-img" src="photo-3.png" />
				<div class="card-text">Hyeri</div>
			</div>
		</div>
	</div>
</div>

<div class="cards-title">South Korean actresses</div>

</div>

<div class="card-text">Krystal Jung</div>

</div>

<div class="card-text">Hyeri</div>

</div>

Фоны из примера: bg-1.jpg, bg-2.jpg, bg-3.jpg
Фото из примера: photo-1.png, photo-2.png, photo-3.png

CSS:

.cards-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 50px 20px;
	margin: 20px 0;
	background: url("bg.jpg") center/cover no-repeat;
	perspective: 1800px;
}
.cards {
	padding: 20px;
	text-align: left;
	perspective: 1800px;
	transform-origin: 50% 50%;
	transform-style: preserve-3d;
	transform: rotateX(11deg) rotateY(16.5deg);
	border-radius: 20px;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, .4);
	transition: 0.1s;
	display: inline-block;
	position: relative;
}
.cards:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(6px);  
	border-radius: 20px;
	z-index: -1;
}
.cards-title {
	transform: translateZ(35px);
	font-size: 28px;
	font-weight: bold;
	color: #FFF;
	margin: 5px 20px 20px;
	text-shadow: 0px 0 10px rgba(0, 0, 0, 0.4);  
}
.cards-row {
	display: flex;
	transform-origin: 50% 50%;
	transform-style: preserve-3d; 
}
.card {
	border-radius: 15px;
	box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 0.6);
	height: 250px;
	width: 188px;
	overflow: hidden;
	transform: translateZ(20px);
	user-select: none; 
	margin: 0 10px;
}
.card-bg {
	position: absolute;
	bottom: -50px;
	left: -50px;
	right: -50px;
	top: -50px;
	transform-origin: 50% 50%;
	transform: translateZ(-50px);
	z-index: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transition-property: background-position, transform;  
	transition-delay: 0s;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;  		
}
.card-img {
	position: relative;
	width: 110%;
	max-width: unset;
	left: -5%;
	filter: drop-shadow(6px 6px 10px rgba(0, 0, 0, 0.3));
	transition-property: transform, left, width;  
	transition-delay: 0s;
	transition-duration: 0.4s;
	transition-timing-function: ease-out;
}
.card:hover .card-bg {
	transform: translateZ(-50px) scale(1.2);
	transition-delay: 0s, 0.3s;
}
.card:hover .card-img {
	left: -30%;
	width: 160%;
	transition-delay: 0s, 0.3s, 0.3s; 
}
.card-text {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	height: 80px;
	width: 100%;
	justify-content: flex-end;
	align-items: center;
	padding: 0 10px 14px;
	position: absolute;
	z-index: 2;
	font-size: 18px;  
    color: #fff;
	font-weight: bold;
	box-sizing: border-box;
}
@media screen and (max-width: 991px) {
	.cards-wrap {
		padding: 40px 20px;
	}
	.cards-title {
		font-size: 22px;
		margin: 5px 15px 15px;
	}
	.cards {
		padding: 15px;
	}
	.card {
		height: 192px;
		width: 145px;
	}
	.card-text {
		font-size: 16px;  
	}
}
@media screen and (max-width:767px) {
	.cards-title {
		text-align: center;
	}
	.cards-row {
		display: block;
	}
	.card {
		margin: 0 auto 10px;
	}
}

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

.cards-wrap {

display: flex;

align-items: center;

justify-content: center;

text-align: center;

padding: 50px 20px;

margin: 20px 0;

background: url("bg.jpg") center/cover no-repeat;

perspective: 1800px;

}

.cards {

padding: 20px;

text-align: left;

perspective: 1800px;

transform-origin: 50% 50%;

transform-style: preserve-3d;

transform: rotateX(11deg) rotateY(16.5deg);

border-radius: 20px;

box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);

border: 1px solid rgba(255, 255, 255, .4);

transition: 0.1s;

display: inline-block;

position: relative;

}

.cards:after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(255, 255, 255, 0.35);

backdrop-filter: blur(6px);

border-radius: 20px;

z-index: -1;

}

.cards-title {

transform: translateZ(35px);

font-size: 28px;

font-weight: bold;

color: #FFF;

margin: 5px 20px 20px;

text-shadow: 0px 0 10px rgba(0, 0, 0, 0.4);

}

.cards-row {

display: flex;

transform-origin: 50% 50%;

transform-style: preserve-3d;

}

.card {

border-radius: 15px;

box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 0.6);

height: 250px;

width: 188px;

overflow: hidden;

transform: translateZ(20px);

user-select: none;

margin: 0 10px;

}

.card-bg {

position: absolute;

bottom: -50px;

left: -50px;

right: -50px;

top: -50px;

transform-origin: 50% 50%;

transform: translateZ(-50px);

z-index: 0;

background-position: center center;

background-repeat: no-repeat;

background-size: cover;

transition-property: background-position, transform;

transition-delay: 0s;

transition-duration: 0.3s;

transition-timing-function: ease-out;

}

.card-img {

position: relative;

width: 110%;

max-width: unset;

left: -5%;

filter: drop-shadow(6px 6px 10px rgba(0, 0, 0, 0.3));

transition-property: transform, left, width;

transition-delay: 0s;

transition-duration: 0.4s;

transition-timing-function: ease-out;

}

.card:hover .card-bg {

transform: translateZ(-50px) scale(1.2);

transition-delay: 0s, 0.3s;

}

.card:hover .card-img {

left: -30%;

width: 160%;

transition-delay: 0s, 0.3s, 0.3s;

}

.card-text {

background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);

bottom: 0;

left: 0;

display: flex;

flex-direction: column;

height: 80px;

width: 100%;

justify-content: flex-end;

align-items: center;

padding: 0 10px 14px;

position: absolute;

z-index: 2;

font-size: 18px;

color: #fff;

font-weight: bold;

box-sizing: border-box;

}

@media screen and (max-width: 991px) {

.cards-wrap {

padding: 40px 20px;

}

.cards-title {

font-size: 22px;

margin: 5px 15px 15px;

}

.cards {

padding: 15px;

}

.card {

height: 192px;

width: 145px;

}

.card-text {

font-size: 16px;

}

@media screen and (max-width:767px) {

.cards-title {

text-align: center;

}

.cards-row {

display: block;

}

.card {

margin: 0 auto 10px;

}

Фоновая картинка из примера: bg.jpg
Для того, чтобы фото и фон не дергались, когда над ними быстро проходит курсор, для их увеличения задана задержка в 0.2 секунды.

JS:

const cards = document.querySelector(".cards");
const images = document.querySelectorAll(".card-img");
const backgrounds = document.querySelectorAll(".card-bg");
const range = 25;
const calcValue = (a, b) => (a/b*range-range/2).toFixed(1);
let timeout;
document.addEventListener('mousemove', ({x, y}) => {
	if (timeout) {
		window.cancelAnimationFrame(timeout);
	} 	
	timeout = window.requestAnimationFrame(() => {
		const yValue = calcValue(y, window.innerHeight);
		const xValue = calcValue(x, window.innerWidth);
		cards.style.transform = `rotateX(${yValue}deg) rotateY(${xValue}deg)`;
		[].forEach.call(images, (image) => {
			image.style.transform = `translateX(${-xValue}px) translateY(${yValue}px)`;
		});
		[].forEach.call(backgrounds, (background) => {
			background.style.backgroundPosition = `${xValue*.45}px ${-yValue*.45}px`;
		})
	})
}, false);

const cards = document.querySelector(".cards");

const images = document.querySelectorAll(".card-img");

const backgrounds = document.querySelectorAll(".card-bg");

const range = 25;

const calcValue = (a, b) => (a/b*range-range/2).toFixed(1);

let timeout;

document.addEventListener('mousemove', ({x, y}) => {

if (timeout) {

window.cancelAnimationFrame(timeout);

}

timeout = window.requestAnimationFrame(() => {

const yValue = calcValue(y, window.innerHeight);

const xValue = calcValue(x, window.innerWidth);

cards.style.transform = `rotateX(${yValue}deg) rotateY(${xValue}deg)`;

[].forEach.call(images, (image) => {

image.style.transform = `translateX(${-xValue}px) translateY(${yValue}px)`;

});

[].forEach.call(backgrounds, (background) => {

background.style.backgroundPosition = `${xValue*.45}px ${-yValue*.45}px`;

})

}, false);

Константа range задает диапазон смещения блока и фотографий.

За основу взято решение, найденное на codepen.io у пользователя Adrian Payne

Пример:

HTML:

CSS:

JS:

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

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

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