Although js and html are not my strong points, I am attempting to create two simple effects on a single page.
As the user scrolls down the page, I want the background image or color to change as different divs come into view and then move off the screen.
The colors represented by the .panel class are working perfectly fine, but I'm having trouble with the background image specified in the .fadeimage class.
Here is an example of the HTML code:
<div class="fadeimage">
<h2>image panel</h2>
</div>
<div class="panel" data-color="green">
<h2>Indigo panel</h2>
</div>
<div class="panel" data-color="blue">
<h2>Blue panel</h2>
</div>
<div class="fadeimage">
<h2>image panel</h2>
</div>
<div class="panel" data-color="yellow">
<h2>Yellow panel</h2>
</div>
Additionally, here is the CSS code snippet:
body {
color: #000;
background-color: #f4f4f4;
transition: background-color 1s ease;
}
.panel {
min-height: 100vh;
}
.fadeimage {
opacity: 0;
transition: 0.3s;
background-image: url("/New Page/images/testtakeall.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* colours */
.color-blue {
background-color: #2F8FED;
}
.color-green {
background-color: #4DCF42;
}
.color-yellow {
background-color: #FAEB33;
}
In terms of Javascript, there seems to be an issue with the implementation. The opacity of the divs with the class .fadeimage remains at 0 throughout.