I’m trying to get text and images to fade as the user scrolls down. The code isn’t working and I’m not sure if it’s the CSS, HTML, or JS. I set the opacity in CSS to 0, but it doesn’t fade to 1 when I scroll down. It just stays 0.
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">
<script src="script.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<title>Discover</title>
</head>
<body>
<div class="container">
<header>
<img src="images/discover.jpg" alt="Not Loading" width="1470px" height="800px" class="background">
<img src="images/logo.png" alt="Not Loading" class="logo" width="400px" height="75px">
<div class="title">DISCOVER</div>
<div class="subText">Find Your Dream House From The Relaxation Of Your Couch</div>
<a href="#text">
<div class="learnMore">
<h3>Learn More</h3>
</div>
</a>
</header>
<section class="bellow">
<div class="UniqueStyle">
<div class="UniqueStyleText">
<h2 class="hidden">Unique Style</h2>
<p class="hidden"></p>
</div>
<img src="image.jpg" alt="Not Loading" class="hidden">
</div>
</section>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
height: 1000vh;
}
a {
text-decoration: none;
}
section {
font-size: 2rem;
background-color: #333;
padding: 40px;
color: blueviolet;
}
.container {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
scroll-behavior: smooth;
}
header {
position: relative;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(2);
filter: brightness(70%);
}
.logo {
position: relative;
right: 20spx;
top: 10px;
}
.title {
z-index: 1;
color: rgb(255, 255, 255);
font-size: 120px;
font-family: 'Nunito';
position: relative;
top: 15%;
left: 10%;
width: 400px;
text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}
.subText {
z-index: 1;
color: rgb(255, 255, 255);
font-size: 25px;
font-family: 'Nunito';
position: relative;
top: 13%;
left: 10.5%;
width: 700px;
text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}
.learnMore {
background-color: white;
width: 200px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
position: relative;
top: 17%;
left: 10%;
color: black;
font-family: 'Nunito';
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}
.learnMore:hover {
background-color: gray;
}
.bellow {
background-color: white;
}
.hidden {
opacity: 0;
}
.show {
opacity: 1;
}
JavaScript
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('show')
} else {
entry.target.classList.remove('show')
}
})
})
const hiddenElement = document.querySelectorAll('.hidden')
hiddenElement.forEach(el => observer.observe(el))
The program is supposed to add the class show to the divs with hidden. This would show the text and image.
2
Answers
I think u should add the
hiddenclass from the element you want to fade-in by default.Then add some transition in
hiddenclass in css file:It works on my local, hope it will helps you 🙂
Looking at the docs for intersection observer, I think you should adjust the threshold inside of the options for the intersection observer. That way you can be informed every time a target’s visibility passes backward or forward through each X% mark.
Add a value to threshold (other than 0) and check for that in the intersection observer callback.
Intersection Observer docs