AnimateX: Windows

<!--Добавить в Zero-блок-->
<div class="uc-image-tr">
<section class="grid">
<!-- Левая колонка -->
<div class="grid__column">
<div class="grid__column-inner grid__column-inner_left">
<div class="grid__item item-1"></div>
<div class="grid__item item-2"></div>
<div class="grid__item item-3"></div>
<div class="grid__item item-4"></div>
</div>
</div>
<!-- Центральная колонка -->
<div class="grid__column">
<div class="grid__column-inner grid__column-inner_center">
<div class="grid__item mid-top"></div>
<!-- прозрачное окно -->
<div class="grid__window"></div>
<div class="grid__item mid-bottom"></div>
</div>
</div>
<!-- Правая колонка -->
<div class="grid__column">
<div class="grid__column-inner grid__column-inner_right">
<div class="grid__item item-5"></div>
<div class="grid__item item-6"></div>
<div class="grid__item item-7"></div>
<div class="grid__item item-8"></div>
</div>
</div>
</section>
</div>
<style>
:root {
--image-tr-gap-w: 20px; /* Горизонтальный отступ между колонками */
--image-tr-gap-h: 20px; /* Вертикальный отступ между карточками */
--image-tr-item-w: 430px; /* Ширина обычной карточки */
--image-tr-item-h: 320px; /* Высота обычной карточки */
--image-tr-center-w: 430px; /* Стартовая ширина центральной колонки */
--image-tr-window-h: 320px; /* Стартовая высота центрального окна */
--image-tr-bg-w: 1200px; /* Ширина фонового изображения */
--image-tr-bg-h: 650px; /* Высота фонового изображения */
--image-tr-bg-image: none; /* Фоновая картинка, если нужна */
--image-tr-dark-color: #111111; /* Основной темный цвет карточек */
--image-tr-outline-size: 20px; /* Толщина обводки вокруг карточек */
--image-tr-outline-color: #111111; /* Цвет обводки вокруг карточек */
--image-tr-side-move: 600px;
--image-tr-center-w-final: 2000px;
--image-tr-window-h-final: 1200px;
--image-tr-scrub: 1.1;
--image-tr-duration: 0.6;
/* Изображения */
--screen-1-item-1-bg: url('https://static.tildacdn.com/tild3930-6665-4237-b637-613239306430/ChatGPT_Image_31__20.png') center/cover no-repeat;
--screen-1-item-2-bg: url('https://static.tildacdn.com/tild3132-3662-4863-b666-653731333331/Mask_group-2.jpg') center/cover no-repeat;
--screen-1-item-3-bg: url('https://static.tildacdn.com/tild3061-3035-4736-b932-633961363030/ChatGPT_Image_31__20.png') center/cover no-repeat;
--screen-1-item-4-bg: url('https://static.tildacdn.com/tild6561-3538-4162-b464-653330613139/Mask_group-4.jpg') center/cover no-repeat;
--screen-1-item-5-bg: url('https://static.tildacdn.com/tild6433-3431-4633-b561-663938363162/Mask_group-3.jpg') center/cover no-repeat;
--screen-1-item-6-bg: url('https://static.tildacdn.com/tild3930-6665-4237-b637-613239306430/ChatGPT_Image_31__20.png') center/cover no-repeat;
--screen-1-item-7-bg: url('https://static.tildacdn.com/tild6431-3039-4062-b539-653162333162/Mask_group-1.jpg') center/cover no-repeat;
--screen-1-item-8-bg: url('https://static.tildacdn.com/tild3962-6137-4430-a339-326234393733/Mask_group.jpg') center/cover no-repeat;
/* Верхняя и нижняя части центральной картинки */
--screen-1-mid-top-bg: url('https://static.tildacdn.com/tild3135-6634-4337-b637-393034653234/ChatGPT_Image_31__20.png') bottom/cover no-repeat;
--screen-1-mid-bottom-bg: url('https://static.tildacdn.com/tild6235-6436-4564-b431-366630613665/ChatGPT_Image_31__20.png') top/cover no-repeat;
--screen-2-bg: #111111; /* Основной темный цвет карточек */
}
@media screen and (max-width: 480px) {
:root {
/* Размер карточек на мобильных */
--image-tr-item-w: 300px;
--image-tr-item-h: 220px;
/* Размер центрального окна на мобильных */
--image-tr-center-w: 300px;
--image-tr-window-h: 220px;
}
}
@media screen and (max-width: 375px) {
:root {
/* Размер карточек на маленьких мобильных */
--image-tr-item-w: 220px;
--image-tr-item-h: 180px;
/* Размер центрального окна на маленьких мобильных */
--image-tr-center-w: 220px;
--image-tr-window-h: 180px;
}
}
.uc-image-tr {
--gap-w: var(--image-tr-gap-w);
--gap-h: var(--image-tr-gap-h);
--item-w: var(--image-tr-item-w);
--item-h: var(--image-tr-item-h);
--center-w: var(--image-tr-center-w);
--window-h: var(--image-tr-window-h);
position: relative;
width: 100%;
height: 100% !important;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
display: flex;
justify-content: center;
align-items: center;
}
.uc-image-tr .image-tr-1 {
position: absolute;
top: 50%;
left: 50%;
width: var(--image-tr-bg-w);
height: var(--image-tr-bg-h);
transform: translate(-50%, -50%);
background-image: var(--image-tr-bg-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none;
}
.uc-image-tr .grid {
position: absolute;
top: 50%;
left: 50%;
width: max-content;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: var(--gap-w);
transform: translate(-50%, -50%);
transform-origin: center center;
z-index: 2;
}
.uc-image-tr .grid__column {
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.uc-image-tr .grid__column-inner {
display: flex;
flex-direction: column;
gap: var(--gap-h);
align-items: center;
justify-content: center;
flex-shrink: 0;
will-change: transform;
transform: translate3d(0, 0, 0);
}
.uc-image-tr .grid__item {
width: var(--item-w);
height: var(--item-h);
background-color: var(--image-tr-dark-color);
flex-shrink: 0;
box-sizing: border-box;
overflow: hidden;
position: relative;
z-index: 2;
outline: var(--image-tr-outline-size) solid var(--image-tr-outline-color);
}
.uc-image-tr .grid__column:nth-child(2) .grid__item,
.uc-image-tr .grid__column:nth-child(2) .grid__window {
width: var(--center-w);
}
.uc-image-tr .grid__window {
position: relative;
height: var(--window-h);
flex-shrink: 0;
background: transparent !important;
overflow: hidden;
z-index: 3;
box-shadow: none !important;
border: none !important;
outline: var(--image-tr-outline-size) solid var(--image-tr-outline-color);
}
.uc-image-tr .mid-top,
.uc-image-tr .mid-bottom {
width: 100% !important;
}
.uc-screen-1 .item-1 { background: var(--screen-1-item-1-bg) !important; }
.uc-screen-1 .item-2 { background: var(--screen-1-item-2-bg) !important; }
.uc-screen-1 .item-3 { background: var(--screen-1-item-3-bg) !important; }
.uc-screen-1 .item-4 { background: var(--screen-1-item-4-bg) !important; }
.uc-screen-1 .item-5 { background: var(--screen-1-item-5-bg) !important; }
.uc-screen-1 .item-6 { background: var(--screen-1-item-6-bg) !important; }
.uc-screen-1 .item-7 { background: var(--screen-1-item-7-bg) !important; }
.uc-screen-1 .item-8 { background: var(--screen-1-item-8-bg) !important; }
.uc-screen-1 .mid-top { background: var(--screen-1-mid-top-bg) !important; }
.uc-screen-1 .mid-bottom { background: var(--screen-1-mid-bottom-bg) !important; }
.uc-screen-2 .item-1,
.uc-screen-2 .item-2,
.uc-screen-2 .item-3,
.uc-screen-2 .item-4,
.uc-screen-2 .item-5,
.uc-screen-2 .item-6,
.uc-screen-2 .item-7,
.uc-screen-2 .item-8,
.uc-screen-2 .mid-top,
.uc-screen-2 .mid-bottom {
background: var(--screen-2-bg) !important;
}
</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 () {
gsap.registerPlugin(ScrollTrigger);
function getRootVar(name, fallback) {
const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
return value || fallback;
}
function getRootNumber(name, fallback) {
const value = parseFloat(getRootVar(name, fallback));
return isNaN(value) ? fallback : value;
}
function getEffectiveHeight(selector) {
const elem = document.querySelector(selector);
if (!elem) return 0;
const height = elem.offsetHeight;
const zoom = parseFloat(getComputedStyle(elem).zoom || '1');
return height * zoom;
}
function getScreens() {
return [...document.querySelectorAll('[class]')].filter(el =>
[...el.classList].some(cls => /^uc-screen-\d+$/.test(cls))
);
}
function init(screen, index) {
const section = screen.querySelector('.uc-image-tr');
if (!section) return;
const left = section.querySelector('.grid__column-inner_left');
const right = section.querySelector('.grid__column-inner_right');
if (!left || !right) return;
const offsetTop = getEffectiveHeight('.image-top');
const offsetBottom = getEffectiveHeight('.image-bottom');
const sideMove = getRootNumber('--image-tr-side-move', 600);
const centerWidthFinal = getRootVar('--image-tr-center-w-final', '2000px');
const windowHeightFinal = getRootVar('--image-tr-window-h-final', '1200px');
const scrubValue = getRootNumber('--image-tr-scrub', 1.1);
const tweenDuration = getRootNumber('--image-tr-duration', 0.6);
gsap.set(left, { y: 0, force3D: true });
gsap.set(right, { y: 0, force3D: true });
const tl = gsap.timeline({
scrollTrigger: {
trigger: screen,
start: `top+=${offsetTop} top`,
end: `bottom-=${offsetBottom} top`,
scrub: scrubValue,
invalidateOnRefresh: true,
id: 'screen-' + index
}
});
tl.to(left, {
y: -sideMove,
duration: tweenDuration
}, 0);
tl.to(right, {
y: sideMove,
duration: tweenDuration
}, 0);
tl.to(section, {
'--center-w': centerWidthFinal,
duration: tweenDuration
}, 0);
tl.to(section, {
'--window-h': windowHeightFinal,
duration: tweenDuration
}, 0);
}
const screens = getScreens();
screens.forEach((screen, i) => init(screen, i));
ScrollTrigger.refresh();
});
</script>