Галерея для проектов

<!--Галерея для проектов-->
<!--https://mt-webdesign.ru/gallery-for-projects-->
<div class="scroll">
<div class="scroll---inner">
<div class="scroll---innest">
<div class="article">
<div class="article---image-inner post-1">
</div>
</div>
<div class="article">
<div class="article---image-inner post-2">
</div>
</div>
<div class="article">
<div class="article---image-inner post-3">
</div>
</div>
<div class="article">
<div class="article---image-inner post-4">
</div>
</div>
</div>
</div>
</div>
<div class="article---mask-wrap">
<div class="article---mask x-left"></div>
<div class="article---mask x-right"></div>
</div>
<script>
$('.article---mask-wrap').appendTo('.uc-scroll .t396__artboard');
$('.scroll').appendTo('.uc-scroll .t396__artboard');
$('.uc-post-1').appendTo('.post-1');
$('.uc-post-2').appendTo('.post-2');
$('.uc-post-3').appendTo('.post-3');
$('.uc-post-4').appendTo('.post-4');
</script>
<style>
.uc-post-1,
.uc-post-2,
.uc-post-3,
.uc-post-4 {
position: absolute;
left: 0px;
top: 0;
width: 100%;
height: auto;
max-height: 100%;
max-width: none;
object-fit: contain;
display: block;
}
.article---mask {
width: 150vh;
height: 300vh;
transform-style: preserve-3d;
background-color: #000;
border-radius: 50%;
position: fixed !important;
top: 50%;
transform: translate3d(0, -50%, 1px);
}
.scroll {
height: 100vh;
position: fixed;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
transform: rotate(-10deg);
background: #000;
}
.uc-scroll .t396__artboard {
height: 100vh !important;
top: 0% !important;
position: absolute;
}
.uc-scroll {
position: fixed !important;
height: 100vh !important;
}
.article {
height: 100vh;
justify-content: center;
align-items: center;
display: flex;
}
.article---image-inner {
perspective: 600px;
position: relative;
width: 100%;
height: 100%;
}
.article---mask.x-left, .article---mask.x-left.x-square {
right: 89%;
}
.article---mask.x-right, .article---mask.x-right.x-square {
left: 89%;
}
.article---mask-wrap {
width: 80%;
margin-left: auto;
margin-right: auto;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-10deg);
}
.page {
z-index: 5;
position: relative;
}
.article---image-wrap {
position: relative;
}
@media screen and (max-width: 479px) {
.article---mask.x-left, .article---mask.x-left.x-square {
right: 95%;
}
.article---mask.x-right, .article---mask.x-right.x-square {
left: 95%;
}
.scroll {
transform: rotate(0deg);
}
.article---mask-wrap {
transform: translate(-50%, -50%) rotate(0deg);
}
.article---mask {
width: 120vh;
height: 350vh;
}
}
</style>
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@0.2.28/bundled/lenis.js"></script>
<script>
const lenis = new Lenis({
duration: 3.2, // Длительность анимации (в секундах)
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Функция плавности анимации
direction: 'vertical', 
gestureDirection: 'vertical', 
smooth: true, // Плавность анимации
mouseMultiplier: 1, // Множитель скорости прокрутки мыши
smoothTouch: false, // Плавность анимации при касании
touchMultiplier: 2, // Множитель скорости прокрутки при касании
infinite: false, // Бесконечная анимация
});
const scrollInner = document.querySelector('.scroll---innest');
lenis.on('scroll', ({ scroll }) => {
scrollInner.style.transform = `translateY(${-scroll}px)`;
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
</script>