I made an animation to the h1 element using CSS, now I want the animation to occur when the h1 element comes into the viewport completely when the user scrolls down.
By the time the user scrolls down the page, the animation has already occurred.
I want the animation to occur only when the h1 element enters the viewport by adding the class .showtext to the span element.
Cannot set up a proper intersection observer, plz help
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.text {
display: inline-block;
overflow: hidden
}
.page1{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.page2{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.showtext{
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}
@keyframes reveal {
0% {
transform: translate(0,100%);
}
100% {
transform: translate(0,0);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LNPD02</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="page1">
<h1>Scroll down</h1>
</div>
<div class="page2">
<h1 class="text"><span class="hidetext showtext">Animated Text</span></h1>
</div>
</body>
</html>You can check it with javascript. A function is triggered every time the user scrolls the page. If the element's position is greater than the screen's top and less than the screen's bottom that is in the viewport, toggle the classes to make the animaiton.
var text = document.querySelector('.text')
function scrolListener(e){
var screenTop = document.scrollingElement.scrollTop;
var screenBottom = screenTop + innerHeight;
var textTop = text.getBoundingClientRect().top
if ( textTop < screenBottom && textTop < screenTop)
{
text.children[0].classList.add("showtext");
text.children[0].classList.remove("hidetext");
}
}
document.onscroll = scrolListener* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.text {
display: inline-block;
overflow: hidden;
}
.page1 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.page2 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.text span {
transition: .3s;
}
.showtext {
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}
.hidetext {
opacity: 0;
transform: translate(0, 100%);
}
@keyframes reveal {
0% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LNPD02</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="page1">
<h1>Scroll down</h1>
</div>
<div class="page2">
<h1 class="text"><span class="hidetext">Animated Text</span></h1>
</div>
</body>
</html>