I'm creating some text animation using css and javascript. I have two sections that share the same classes. I'm selecting the classes in javascript using querySelectorAll and then using forEach to apply my if statement to each section of the two sections that share the same classes. However I'm getting the console error textMessage.getBoundingClientRect is not a function.
I'm not sure what I'm doing wrong. Can anyone shed any light?
function scrollAppear() {
const textMessage = document.querySelectorAll('.home-message-text');
let textPosition = textMessage.getBoundingClientRect().top;
let screenPosition = window.innerHeight;
textMessage.forEach(function(textMessage) {
if (textPosition < screenPosition) {
textMessage.classList.add('.home-message-text-appear');
}
});
}
.homepage-message {
display: flex;
flex-direction: row;
padding-top: 7rem;
padding-right: 6rem;
border-radius: .5rem;
}
.homepage-message-text {
align-items: center;
justify-content: center;
max-width: 70rem;
padding-top: 10rem;
opacity: 0;
transform: translateY(20px);
transition: 1.5s all ease-in-out;
}
.home-message-text-appear {
opacity: 1;
transform: translateY(0px);
}
<html>
<body>
<section class="homepage-message container">
<div class="homepage-message-text">
<h2 class="title">Some Type Of Title One</h2>
<p class="message">Lorem ipsum dolor sit amet consectetur adipisicing elit. A eligendi ipsum, veniam aliquid assumenda incidunt? Rem perspiciatis eveniet exercitationem velit repellat eaque est ad, vitae animi saepe, dolorem quos officia. Corrupti, accusamus! Maxime
exercitationem accusamus quibusdam similique minus, recusandae veniam veritatis sequi aliquid labore, ad sit minima! Porro ut officia repudiandae facilis, similique officiis sapiente. Dolorum vitae sint quaerat facere.
</p>
</div>
</section>
<section class="homepage-message container">
<div class="homepage-message-text">
<h2 class="title">Some Type Of Title Two</h2>
<p class="message">Lorem ipsum dolor sit amet consectetur adipisicing elit. A eligendi ipsum, veniam aliquid assumenda incidunt? Rem perspiciatis eveniet exercitationem velit repellat eaque est ad, vitae animi saepe, dolorem quos officia. Corrupti, accusamus! Maxime
exercitationem accusamus quibusdam similique minus, recusandae veniam veritatis sequi aliquid labore, ad sit minima! Porro ut officia repudiandae facilis, similique officiis sapiente. Dolorum vitae sint quaerat facere.
</p>
</div>
</section>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
