How can we make a text that is only visible to a rectangle? (think of the rectangle like a container, the text is only visible when it is right in the rectangle)
Then I want to animate the text from bottom to above like this:
Then:
and finally:
Here is the animation code but I have no idea how can we limit the visibility of the text to a container:
Note: I only can use viewport units like vw and vh and absolute positions
html {
overflow: hidden;
}
#Text {
position: absolute;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 7.5vw;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0vh;
animation: rollUp 3s ease-out infinite;
animation-fill-mode: forwards ;
}
@-webkit-keyframes rollUp {
from {
top: 150vh
}
to {
top: 0vh
}
}<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="style.css"> </head><body><div ><p id="Text">Revealing Text</p></div></body></html>