SM - Стильные решения для вашего сайта

Создайте магию на сайте: 3D Parallax Card с эффектами наклона и слайда

3D Parallax Card с Tilt и Slide эффектами на HTML, CSS и JS

3D Parallax Card с Tilt и Slide эффектами на HTML, CSS и JS

Хотите удивить пользователей эффектным и современным дизайном? Попробуйте создать 3D Parallax Card. Это визуальное чудо оживит ваш сайт и придаст ему ощущение глубины и интерактивности.

Карточка парит над поверхностью и реагирует на движения мыши, словно играя с гравитацией. Эффекты реализуются с помощью HTML, CSS и JS, что делает их доступными для использования на любом сайте.

Основные преимущества:

  • Динамика движения. Карточка меняет угол и позицию в зависимости от движений мыши, создавая ощущение трёхмерного пространства.
  • Простая реализация. Минимум кода на HTML, CSS и JS позволяет быстро добавить этот элемент в любой проект.
  • Улучшенный пользовательский опыт. Современные эффекты захватывают внимание и создают уникальное взаимодействие с пользователем.

Это решение подойдёт как для портфолио, так и для коммерческих сайтов, где важно выделиться и подчеркнуть свой стиль. Настраивайте эффекты под свои нужды, экспериментируя с углами наклона и скоростью слайда, чтобы добиться идеального результата.

Впечатлите своих клиентов и сделайте ваш сайт более современным и запоминающимся!

See the Pen 3D Parallax Card with Tilt & Slide by Alexandre Vacassin (@alexandrevacassin) on CodePen.

        
HTML

<div class="card">
    <div class="parallax-layer bg">
        <img src="https://drive.google.com/thumbnail?id=1gjk_fcB6iho1oHmzY-10eSKIE9TpQisx&sz=w1000">
    </div>
    <div class="parallax-layer">
        <img src="https://drive.google.com/thumbnail?id=1TK9pzfnoR_AHoyGopthRaQZsQWjbwMHH&sz=w1000">
    </div>
    <div class="parallax-layer">
        <img src="https://drive.google.com/thumbnail?id=1yKj48wNNwg17-JecguxMASwDNvp65tCb&sz=w1000">
    </div>
    <div class="parallax-layer">
        <img src="https://drive.google.com/thumbnail?id=1MDbZZfKIrKwLhTiYXl9im3OMwwNT0Wu2&sz=w1000">
    </div>
    <div class="parallax-layer">
        <img src="https://drive.google.com/thumbnail?id=1jkpUucNkaQOPCLClpZKMdTdEzAYEszsn&sz=w1000">
    </div>
    <div class="parallax-layer">
        <img src="https://drive.google.com/thumbnail?id=1G58IxzEgQnnWnd1vAdRmtQHfWpvb1Ipt&sz=w1000">
    </div>
    <div class="parallax-layer">
        <img src="https://drive.google.com/thumbnail?id=1I7mg1tYxTI3EBpbNoRAXhzSua6n0XDDF&sz=w1000">
    </div>
    <div class="card-content">
        <h1>The Forest</h1>
    </div>
</div>

        
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
 
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #000;
font-family: "Poppins", serif;
font-weight: 700;
}
 
.card {
position: relative;
width: 350px;
height: 566px;
perspective: 1000px;
overflow: hidden;
border-radius: 32px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
background-color: #c4d9e9;
}
 
.parallax-layer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transform-origin: center;
}
 
.parallax-layer img {
height: 115%;
margin-left: -90%;
}
 
.bg {
height: 100%;
max-height: 600px;
}
 
.parallax-layer:nth-child(1) {
z-index: 0;
filter: blur(5px);
}
.parallax-layer:nth-child(2) {
z-index: 1;
filter: blur(3px);
}
.parallax-layer:nth-child(3) {
z-index: 2;
filter: blur(2px);
}
.parallax-layer:nth-child(4) {
z-index: 3;
filter: blur(0px);
}
.parallax-layer:nth-child(5) {
z-index: 4;
filter: blur(2px);
}
.parallax-layer:nth-child(6) {
z-index: 5;
filter: blur(3px);
}
.parallax-layer:nth-child(7) {
z-index: 6;
filter: blur(5px);
}
 
.parallax-layer img {
margin-top: calc(-13% + var(--layer-offset, 0%));
}
 
.card-content {
position: absolute;
z-index: 10;
text-align: left;
color: white;
pointer-events: none;
bottom: 0;
padding: 32px;
font-size: 20px;
line-height: 0;
}
        
JS
const card = document.querySelector(".card");
const layers = document.querySelectorAll(".parallax-layer");
let isHovered = false;
 
function applyParallaxEffect(x, y) {
const tiltY = (x - 0.5) * 60;
layers.forEach((layer, index) => {
const depthX = index * 30;
const depthY = index * 13;
const moveX = (x - 0.5) * depthX;
const moveY = (y - 0.5) * depthY;
layer.style.transform = `translate(${moveX}px, ${moveY}px) rotateY(${tiltY}deg)`;
});
}
 
card.addEventListener("mousemove", (e) => {
const rect = card.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width;
const y = (e.clientY - rect.top) / rect.height;
isHovered = true;
applyParallaxEffect(x, y);
});
 
window.addEventListener("load", () => {
let progress = 0;
 
function animate() {
if (isHovered) return;
progress += 0.005;
const x = Math.sin(progress) * 0.5 + 0.5;
const y = 0.5;
applyParallaxEffect(x, y);
if (progress < Math.PI * 2) {
requestAnimationFrame(animate);
}
}
animate();
});

3d-parallax-card-with-tilt-slide.zip
0 10.32 Kb
Нашли ошибку? Сообщите нам, мы исправим!
1 лайков 2 просмотров
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!

Сайт SATAMAX.RU