To create a scroll-like animation using CSS, I want to have one HTML div act as a "window" that shows another div beneath it. This lower div can then be animated to move up and down, covering the content as it moves in and out of view. The background div will only contain text on separate lines, while the front or "window" div is empty but has the height of one line of text.
Many suggestions mention making the parent element "position: relative;" and the child element "absolute;". However, when I try moving the child element, it goes outside the viewport. For some reason, overflow:hidden; doesn't work for the window div.
<div class="sometext">
hello I am
<div class="window">
funny
<div class="view">
funny<br>great<br>dull<br>silly
</div>
</div>
</div>
CSS:
.sometext{
background-color:pink;
}
.window{
display:inline;
position:relative;
color:transparent;
overflow:hidden;
background-color:green;
z-index:1;
}
.view{
position:absolute;
top:0;
right:0;
color:black;
overflow:hidden;
}
Check out the code here: https://jsfiddle.net/u23hv1dx/
Note:
The viewport should only show the green rectangle initially, displaying only the word "funny." You can change this by adjusting the .view's top parameter.
The .window element contains the (transparent) word "funny" simply to provide the necessary width for the child element.
By the way, why is the child element positioned slightly to the right of its ancestor?