AnimateX: Card Elevation

<!--Добавить в Zero-блок-->
<div class="card-elevation-wrapper">
<div class="gallery-inner-elevation">
<div class="card-elevation-box-1"></div>
<div class="card-elevation-box-2"></div>
<div class="card-elevation-box-3"></div>
<div class="card-elevation-box-4"></div>
<div class="card-elevation-box-5"></div>
</div>
</div>
<!---->
<style>
:root {
--MainHeightElevation1200: 650px;
--MainHeightElevation960: 650px;
--MainHeightElevation640: 650px;
--MainHeightElevation480: 650px;
--MainHeightElevation320: 450px;
--ChildHeightElevation1200: 360px;
--ChildHeightElevation960: 360px;
--ChildHeightElevation640: 360px;
--ChildHeightElevation480: 360px;
--ChildHeightElevation320: 240px;
}
@media screen and (min-width: 1200px) {
.card-elevation-wrapper { height: var(--MainHeightElevation1200); }
.gallery-inner-elevation { height: var(--ChildHeightElevation1200); }
}
@media screen and (min-width: 960px) and (max-width: 1199px) {
.card-elevation-wrapper { height: var(--MainHeightElevation960); }
.gallery-inner-elevation { height: var(--ChildHeightElevation960); }
}
@media screen and (min-width: 640px) and (max-width: 959px) {
.card-elevation-wrapper { height: var(--MainHeightElevation640); }
.gallery-inner-elevation { height: var(--ChildHeightElevation640); }
}
@media screen and (min-width: 480px) and (max-width: 639px) {
.card-elevation-wrapper { height: var(--MainHeightElevation480); }
.gallery-inner-elevation { height: var(--ChildHeightElevation480); }
}
@media screen and (min-width: 320px) and (max-width: 479px) {
.card-elevation-wrapper { height: var(--MainHeightElevation320); }
.gallery-inner-elevation { height: var(--ChildHeightElevation320); }
}
.card-elevation-wrapper {
position: relative;
overflow: visible;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.gallery-inner-elevation {
pointer-events: none; 
}
.gallery-inner-elevation div {
pointer-events: all !important; 
}
@media screen and (max-width: 959px) {
.card-elevation-wrapper {
cursor: default;
}
}
.gallery-inner-elevation {
position: relative;
width: 100%;
max-width: 1200px;
perspective: 2000px;
pointer-events: none;
transform-style: preserve-3d;
}
.gallery-inner-elevation a {
pointer-events: all !important;
}
[class*="card-elevation-box-"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
will-change: transform, opacity;
}
[class*="card-elevation-box-"] div {
zoom: 1 !important;
}
.tn-elem[class*="card-elevation-child-"] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.card-elevation-wrapper.dragging {
user-select: none;
cursor: grabbing;
}
.card-elevation-wrapper img {
pointer-events: none;
}
</style>
<script src="https://matilda-design.ru/library/GSAP.js"></script>
<script src="https://matilda-design.ru/library/ScrollTrigger.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
if (window.innerWidth < 320) {
if (window.ScrollTrigger) {
ScrollTrigger.getAll().forEach(st => st.kill());
}
return;
}
gsap.registerPlugin(ScrollTrigger);
function initCardElevationGallery(container) {
const gallery = container.querySelector(".gallery-inner-elevation");
const triggerStart = container.querySelector(".elevation-top");
const triggerEnd = container.querySelector(".elevation-bottom");
if (!gallery || !triggerStart || !triggerEnd) return;
const childs = container.querySelectorAll('[class*="card-elevation-child-"]');
childs.forEach(child => {
const match = Array.from(child.classList)
.find(c => /^card-elevation-child-\d+$/.test(c));
if (!match) return;
const num = match.split('-')[3];
let box = gallery.querySelector(".card-elevation-box-" + num);
if (!box) {
box = document.createElement("div");
box.classList.add("card-elevation-box-" + num);
gallery.appendChild(box);
}
box.appendChild(child);
});
const boxes = Array.from(
gallery.querySelectorAll('[class*="card-elevation-box-"]')
);
const total = boxes.length;
if (!total) return;
const offsetY = 30; // смещение карточек вниз
const scaleStep = 0.06; // уменьшение карточек
const tiltAngle = 65; // угол наклона карточек
const zDepth = 250; // движение вперед
function getEffectiveHeight(elem) {
if (!elem) return 0;
const height = elem.offsetHeight;
const zoom = parseFloat(getComputedStyle(elem).zoom || "1");
return height * zoom;
}
const offsetTop = getEffectiveHeight(triggerStart);
const offsetBottom = getEffectiveHeight(triggerEnd);
const containerHeight = container.offsetHeight;
const startTrigger = `top+=${offsetTop} center`;
const endTrigger = `top+=${containerHeight - offsetBottom} center`;
boxes.forEach((box, i) => {
gsap.set(box, {
y: i * offsetY,
scale: 1 - i * scaleStep,
rotationX: 0,
z: -i * 80,
transformOrigin: "center bottom",
zIndex: total - i
});
});
const tl = gsap.timeline({
scrollTrigger: {
trigger: container,
start: startTrigger,
end: endTrigger,
scrub: true,
markers: false
}
});
boxes.forEach((box, i) => {
if (i === total - 1) return;
const nextBoxes = boxes.slice(i + 1);
tl.to(box, {
y: -550,
rotationX: tiltAngle,
z: zDepth,
scale: 1.05,
ease: "none"
});
nextBoxes.forEach((b, index) => {
tl.to(b, {
y: index * offsetY,
scale: 1 - index * scaleStep,
rotationX: 0,
z: -index * 80,
ease: "none"
}, "<");
});
});
}
document.querySelectorAll('[class*="uc-card-elevation-"]').forEach(container => {
initCardElevationGallery(container);
});
});
</script>