Я пытаюсь создать эффект прокрутки в чистом CSS, где «страницы» появляются / скользят друг над другом вместо того, чтобы как обычно двигаться по экрану.
Мое намерение состояло в том, чтобы иметь родительский элемент, который является относительным положением и прокруткой переполнения. Внутри этого находятся «окна», содержащие «страницу». В окнах скрыто переполнение, а страницы расположены абсолютно в верхней части родительского элемента и имеют одинаковый размер.
Если это будет работать так, как ожидалось, вы сможете увидеть страницу только тогда, когда ее окно отображается.
На самом деле, я просто вижу все страницы одновременно, игнорируя скрытое свойство переполнения их родителей, пока они находятся далеко за его пределами.
Я однажды видел этот эффект в дикой природе, но не могу вспомнить, где и как. Кто-нибудь знает, как это делается?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Newspaper Scroll Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="content">
<div class="post">
<h3>Test</h3>
<div>
lorem ipsum dolor sit amet.
</div>
</div>
<div class="post">
<h3>Test</h3>
<div>
aap noot mies.
</div>
</div>
<div class="post">
<h3>Testje</h3>
<div>
fietspomp
</div>
</div>
<div class="post">
<h3>ttpttp</h3>
<div>
lorem ipsum dolor sit amet.
</div>
</div>
</div>
</body>
</html>
css:
#content {
height: 200px;
width: 200px;
overflow: auto;
position: relative;
}
.post {
overflow: hidden;
height: 200px;
}
.post div {
position: absolute;
top: 50px;
left: 0;
}
.post h3 {
position: absolute;
top: 0;
left: 0;
}