I recently discovered that images require different intersection observer code than text in order to function properly. After making the necessary changes to the code, my intersection observer is behaving quite oddly. As I scroll down, the image stays hidden (opacity: 0), but when I scroll back up and then down again, it suddenly appears. Interestingly, on the second cycle of scrolling up and down, the image remains visible (opacity: 1). My goal is to achieve a smooth fade-in effect for the image as it enters the screen. Any help or suggestions would be greatly appreciated!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Mynerve&family=Nunito&family=Open+Sans&family=Poppins&family=Roboto&display=swap" rel="stylesheet"></head>
<body>
<div class="container">
<header class='header'>
<img src="images/bgImage.png" alt="Not Loading..." class="bgImage">
<div class="bgImageScreen"></div>
<img src="images/logo.png" alt="Not Loading..." class="logo" width="150px" height="40px">
<div class="title">Build Your<br>Business</div>
<div class="subText">Work with experts to create and grow<br>your business.</div>
<a href="#section1"><div class="learnMore"><h3>Learn More</h3></div></a>
</header>
<section class="section1" id="section1">
<div class="businessTitle hidden">80% of Business Fail</div>
<div class="businessText hidden">Start up businesses fail all around the world.
The majority of times, the business lacks funding, market research, and is poorly planned.
Failure could also stem from the founder having unrealistic expectations about the future of the business.
This has become an issue, for businesses drive economic growth.
Here at Trelp, we've addressed this issue, and have found a perfect solution.
</div>
<img data-lazy="images/business.png" alt="Not Loading..." class="img">
</section>
<section class="section2">
<div class="expertSec">
<div class="title2">Advising from Experts</div>
<div class="subText2">Struggling and need help to create your business, no problem.</div>
<div class="bullets">
<div class="bp hidden1">Experts work with you to expand and innovate your business idea.</div>
<div class="bp hidden1">Help from experts on designing your product or service.</div>
<div class="bp hidden1">Advice from experts on selling your product.</div>
<div class="bp hidden1">Experts available 24/7 for 1 on 1 meetings.</div>
</div>
</div>
</section>
</div>
<script defer src="script.js"></script>
</body>
</html>
CSS
(body content here)
JavaScript
(javascript content here)