const presenter = document.querySelector('.presenter');
const slides = [...document.querySelectorAll('.presenter > .slide')].map((element, index) => ({
index,
element,
isFirst: element.classList.contains('first'),
isLast: element.classList.contains('last'),
animIn: [...element.classList.values()].filter(cls => /^in-/.test(cls))[0].substr(3),
animOut: [...element.classList.values()].filter(cls => /^out-/.test(cls))[0].substr(4),
title: element.querySelector('h2').innerHTML,
color: null,
scrollPos: null,
scrollIn: null,
scrollOut: null,
}));
let totalScroll;
// Распорка для скролинга
const space = document.createElement('div');
space.classList.add('space');
presenter.appendChild(space);
// Пересчитать слайды
recalculate();
for (let index = 0; index < slides.length; index++) {
const slide = slides[index];
// Разукрасим слайды
slide.element.style.backgroundColor = randomColor();
// Добавим в распорку слайд нужного размера
const spaceSlide = document.createElement('div');
spaceSlide.classList.add('slide', ['up', 'down'].includes(slide.animIn) ? 'vert' : 'horiz');
space.appendChild(spaceSlide);
}
presenter.onscroll = () => reposition();
window.onresize = () => {
recalculate();
reposition();
};
// Функция перерасчитывает положения и размеры слайдов
function recalculate() {
// Расчет
totalScroll = 0;
for (let index = 0; index < slides.length; index++) {
const slide = slides[index];
slide.scrollPos = totalScroll;
totalScroll += ['up', 'down'].includes(slide.animOut)
? innerHeight
: ['left', 'right'].includes(slide.animOut)
? innerWidth
: innerHeight;
}
space.style.height = totalScroll + 'px';
for (let index = 0; index < slides.length; index++) {
const slide = slides[index];
slide.element.style.top =
slide.animIn == 'up' ? innerHeight + 'px' : slide.animIn == 'down' ? -innerHeight + 'px' : 0;
slide.element.style.left =
slide.animIn == 'left' ? innerWidth + 'px' : slide.animIn == 'right' ? -innerWidth + 'px' : 0;
slide.scrollIn =
slide.animIn == 'up' || slide.animIn == 'down'
? slide.scrollPos - innerHeight
: slide.animIn == 'left' || slide.animIn == 'right'
? slide.scrollPos - innerWidth
: slide.scrollPos;
slide.scrollOut =
slide.animOut == 'up' || slide.animOut == 'down'
? slide.scrollPos + innerHeight
: slide.animOut == 'left' || slide.animOut == 'right'
? slide.scrollPos + innerWidth
: slide.scrollPos;
}
}
// Фнкция репозиционирует слайды при сколле
function reposition() {
let scrollTop = document.scrollingElement.scrollTop;
for (let index = 0; index < slides.length; index++) {
const slide = slides[index];
let left, top;
if (slide.scrollIn < scrollTop && scrollTop < slide.scrollOut) {
// Слайд в пределах видимости
if (scrollTop < slide.scrollPos) {
// Следующий слайд
[left, top] = (
slide.animIn == 'up'
? [0, slide.scrollPos - scrollTop]
: slide.animIn == 'left'
? [slide.scrollPos - scrollTop, 0]
: slide.animIn == 'right'
? [scrollTop - slide.scrollPos, 0]
: slide.animIn == 'down'
? [0, scrollTop - slide.scrollPos]
: [0, 0]
).map(v => `${v}px`);
} else {
// Предыдущий слайд
[left, top] = (
slide.animOut == 'up'
? [0, slide.scrollPos - scrollTop]
: slide.animOut == 'left'
? [slide.scrollPos - scrollTop, 0]
: slide.animOut == 'right'
? [scrollTop - slide.scrollPos, 0]
: slide.animOut == 'down'
? [0, scrollTop - slide.scrollPos]
: [0, 0]
).map(v => `${v}px`);
}
} else {
// Слайд вне диапазона видимости
if (slide.scrollIn > scrollTop) {
// Слайд еще впереди
[left, top] = (
slide.animIn == 'up'
? [0, 0 - innerHeight]
: slide.animIn == 'left'
? [0 - innerWidth, 0]
: slide.animIn == 'right'
? [innerWidth, 0]
: slide.animIn == 'down'
? [0, innerHeight]
: [0, 0]
).map(v => `${v}px`);
} else if (slide.scrollOut < scrollTop) {
// Слайд уже позади
[left, top] = (
slide.animOut == 'up'
? [0, innerHeight]
: slide.animOut == 'left'
? [innerWidth, 0]
: slide.animOut == 'right'
? [0 - innerWidth, 0]
: slide.animOut == 'down'
? [0, 0 - innerHeight]
: [0, 0]
).map(v => `${v}px`);
}
}
Object.assign(slide.element.style, { left, top });
}
}
presenter.querySelector('.first').style.top = 0;
// Функция возвращает рандомный цввет
function randomColor() {
// Берем цвета более светлые (>128)
const red = (128 + ~~(128 * Math.random())).toString(16);
const grn = (128 + ~~(128 * Math.random())).toString(16);
const blu = (128 + ~~(128 * Math.random())).toString(16);
return `#${red}${grn}${blu}`;
}
/** @format */
html {
scroll-snap-type: y mandatory;
}
* {
box-sizing: border-box;
}
/* Головной элемент */
.presenter {
margin: 0;
min-height: 100vh;
scroll-snap-type: y mandatory;
}
/* Слайд */
.presenter > .slide {
width: 100vw;
height: 100vh;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
}
/* Заголовок слайда */
.presenter > .slide h2 {
font-size: 5em;
color: black;
}
/* Слайд в распорке */
.presenter > .space > .slide {
scroll-snap-align: end;
scroll-snap-stop: normal;
}
/* Вертикальное позиционирование */
.presenter > .space > .slide.horiz {
height: 100vw;
}
/* Горизонтальное позиционирование */
.presenter > .space > .slide.vert {
height: 100vh;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href='data:image/svg+xml,<svg%20xmlns="http://www.w3.org/2000/svg"></svg>' />
<link rel="stylesheet" href="./presenter.css" />
</head>
<body class="presenter">
<div class="slide first in-up out-up"><h2>1</h2></div>
<div class="slide in-up out-up"><h2>2</h2></div>
<div class="slide in-up out-left"><h2>3</h2></div>
<div class="slide in-left out-left"><h2>4</h2></div>
<div class="slide in-left out-up"><h2>5</h2></div>
<div class="slide in-up out-up"><h2>6</h2></div>
<div class="slide in-up out-right"><h2>7</h2></div>
<div class="slide in-right out-right"><h2>8</h2></div>
<div class="slide in-right out-up"><h2>9</h2></div>
<div class="slide in-up out-up"><h2>10</h2></div>
<div class="slide in-up out-up last"><h2>11</h2></div>
<script src="./presenter.js"></script>
</body>
</html>