HTML/CSS
Создаем длинный контейнер
<div class="sticky-container"></div>
.sticky-container {
height: 800vh;
}
Добавляем в него секцию с position:sticky
она будет привязана к верху экрана пока контейнер не прокручен
<div class="sticky-container">
<div class="section sticky"></div>
</div>
.section {
height: 100vh;
}
.sticky {
position: sticky;
top: 0;
overflow: hidden;
}
В эту секцию добавляем слайды
<div class="sticky-container">
<div class="section sticky">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
.item {
position: absolute;
width: 100%;
height: 100%;
}
JS
Получаем ссылки на необходимые элементы
const scrollContainer = document.querySelector('.scroll-container')
const stickyContainer = document.querySelector('.sticky-container')
const stickySection = document.querySelector('.sticky')
const items = document.querySelectorAll('.item')
Меняем z-index
слайдов
это можно сделать и в CSS
items.forEach((item, i) => {
item.style.zIndex = items.length - i
})
Добавляем слушателя на событие scroll
scrollContainer.addEventListener('scroll', () => {
...
})
Получаем объекты которые содержат позицию и размер элементов
scrollContainer.addEventListener('scroll', () => {
const scb = stickyContainer.getBoundingClientRect()
const ssb = stickySection.getBoundingClientRect()
})
Делаем общие расчеты
scrollContainer.addEventListener('scroll', () => {
const scb = stickyContainer.getBoundingClientRect()
const ssb = stickySection.getBoundingClientRect()
// Длина пути
const distance = scb.height - ssb.height
// Сколько пройдено на текущий момент
const passed = ssb.top - scb.top
// Длина одного отрезка(слайда)
const segment = distance / (items.length - 1)
})
Перебираем все слайды и применяем к ним трансформацию
scrollContainer.addEventListener('scroll', () => {
const scb = stickyContainer.getBoundingClientRect()
const ssb = stickySection.getBoundingClientRect()
// Длина пути
const distance = scb.height - ssb.height
// Сколько пройдено всего пути на текущий момент
const passed = ssb.top - scb.top
// Длина одного отрезка(слайда)
const segment = distance / (items.length - 1)
items.forEach((item, i) => {
// Сколько пройдено этого отрезка на текущий момент
const ty = clamp(passed - segment * i, 0, segment)
// Перегоняем полученное число выше в диапазон 0 - 1
const progress = ty / segment
// Передвигаем слайд вверх
item.style.transform = `translateY(${100 * progress * -1}%)`
})
})
const scrollContainer = document.querySelector('.scroll-container')
const stickyContainer = document.querySelector('.sticky-container')
const stickySection = document.querySelector('.sticky')
const items = document.querySelectorAll('.item')
items.forEach((item, i) => {
item.style.zIndex = items.length - i
})
scrollContainer.addEventListener('scroll', () => {
const scb = stickyContainer.getBoundingClientRect()
const ssb = stickySection.getBoundingClientRect()
const distance = scb.height - ssb.height
const passed = ssb.top - scb.top
const segment = distance / (items.length - 1)
items.forEach((item, i) => {
const ty = clamp(passed - segment * i, 0, segment)
const progress = ty / segment
item.style.transform = `translateY(${100 * progress * -1}%)`
})
})
function clamp(num, min, max) {
return Math.min(Math.max(num, min), max)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
font-family: sans-serif;
font-size: 30vmin;
}
.scroll-container {
width: 100%;
height: 100%;
overflow: hidden auto;
}
.section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.sticky-container {
position: relative;
height: 800vh;
}
.sticky {
position: sticky;
top: 0;
overflow: hidden;
}
.item {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.item:nth-child(1) {
background-color: lightblue;
}
.item:nth-child(2) {
background-color: lightpink;
}
.item:nth-child(3) {
background-color: tomato;
}
.item:nth-child(4) {
background-color: lightgreen;
}
.item:nth-child(5) {
background-color: coral;
}
<div class="scroll-container">
<div class="section">SCROLL</div>
<div class="sticky-container">
<div class="section sticky">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
<div class="section">END</div>
</div>
const scrollContainer = document.querySelector('.scroll-container')
const stickyContainer = document.querySelector('.sticky-container')
const stickySection = document.querySelector('.sticky')
const slides = document.querySelectorAll('.slide')
stickySection.style.setProperty('--slides', slides.length)
slides.forEach((slide, i) => {
slide.style.setProperty('--index', slides.length - 1 - i)
})
addEventListener('resize', resize)
resize()
scrollContainer.addEventListener('scroll', () => {
const scb = stickyContainer.getBoundingClientRect()
const ssb = stickySection.getBoundingClientRect()
const d = scb.height - ssb.height
const p = ssb.top - scb.top
const s = d / (slides.length - 1)
slides.forEach((slide, i) => {
const t = clamp(p - s * i, 0, s)
const progress = t / s
slide.style.transform = `translateY(${100 * progress * -1}%)`
})
})
function clamp(num, min, max) {
return Math.min(Math.max(num, min), max)
}
function resize() {
document.documentElement.style.setProperty('--lvh', innerHeight + 'px')
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
font-family: sans-serif;
font-size: 15vmin;
color: white;
background-color: black;
text-align: center;
}
.scroll-container {
width: 100%;
height: 100%;
overflow: hidden auto;
}
.section {
height: var(--lvh, 100vh);
display: flex;
align-items: center;
justify-content: center;
}
.sticky-container {
position: relative;
height: calc(var(--lvh, 100vh) * 6);
}
.sticky {
position: sticky;
top: 0;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--index);
display: flex;
justify-content: center;
align-items: flex-end;
}
.slide-content {
--offset: calc(var(--lvh, 100vh) * 0.3);
--height: calc(var(--lvh, 100vh) - var(--offset));
width: 95%;
height: var(--height);
display: flex;
align-items: center;
justify-content: center;
border-radius: 4vmin;
background-color: hsl(262, 74%, calc(30% + var(--index) * 5%));
transform: translateY(calc(var(--index) * (var(--offset) / (var(--slides) - 1)) * -1));
}
.slide:last-child .slide-content {
background-color: #b7f507;
}
<div class="scroll-container">
<div class="section">Что мы делаем<br>с халапеньо?</div>
<div class="sticky-container">
<div class="section sticky">
<div class="slide">
<div class="slide-content">🤜</div>
</div>
<div class="slide">
<div class="slide-content">🤛</div>
</div>
<div class="slide">
<div class="slide-content">👊</div>
</div>
<div class="slide">
<div class="slide-content">✊</div>
</div>
<div class="slide">
<div class="slide-content">🔪</div>
</div>
<div class="slide">
<div class="slide-content">💣</div>
</div>
</div>
</div>
<div class="section">🚮</div>
</div>