I'm trying to create a scrolling effect in pure CSS where "pages" emerge/slide over each other instead of moving in and out the screen as usually.
My intention was to have a parent element which is position relative and overflow scroll. Inside of that are "windows" containing a "page". The windows have overflow hidden, and the pages are positioned absolutely at the top of the parent, and have the same size.
If this would work as expected, you would only be able to see a page when its window is in view.
In reality, I just see all the pages at the same time, ignoring their parent's overflow hidden property, while they are way outside of its boundaries.
I've seen this effect in the wild once, but I can't remember where and how. Anyone know how it's done?
The 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>
the 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;
}