I'm trying to make the background image reduce the opacity on scroll and once away from the landing page, using vanilla javascript to lower it to a minimum of 0.5. I tried adding Math.max() in the scroll function to only drop it to 0.5, but it causes the image to stay at 0.5 for all pages.
I want the landing page to always have an opacity of 1, and all other pages to have an opacity of 0.5. I am able to animate the scroll but need it to stop at 0.5.
const landingHeight = document.getElementById("section-landing").offsetHeight;
window.onscroll = function() {
const opcFilter = (window.pageYOffset/ landingHeight);
document.body.style.background = "linear-gradient(rgba(255, 255, 255, " + opcFilter + "), rgba(255, 255, 255, " + opcFilter + ")), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg) no-repeat";
}
body{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
scroll-behavior: smooth;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg);
background-repeat: no-repeat;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center top !important;
}
nav{
width: 100%;
background: #C1C8D0;
overflow:hidden;
position: fixed;
top:0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
float: right;
}
a{
padding: 5px;
width: 130px;
display: block;
text-align: center;
font-weight: bold;
color: black;
text-decoration: none;
}
div{
height: 1000px;
overflow: scroll;
}
<body>
<nav>
<ul>
<li><a href="#section-page2">Page 2</a></li>
<li><a href="#section-page1">Page 1</a></li>
<li><a href="#section-landing">Landing Page</a></li>
</ul>
</nav>
<div class="section" id="section-landing">
<h1 class="title ">Landing Page</h1>
<p>
The background image here will have an opacity of 1. As we scroll to the next page, the opacity will transition to 0.5.
</p>
</div>
<div class="section" id="section-page1">
<h1>Page 1</h1>
<p>
Opacity is now have 0.5 and will stay there for the remaining pages. Scrolling back up to the landing page will set opacity to 1.
</p>
</div>
<div class="section" id="section-page2">
<h1>Page 2</h1>
<p>
Another page of opacity 0.5
</p>
</div>
</body>
P粉5584781502024-04-05 12:56:14
You need to add Math.min instead of Math.max like this:
(I also added a window.onload to run in the snippet, but it's not mandatory if your script load is defered)
window.onload = () => {
const landingHeight = document.getElementById("section-landing").offsetHeight;
window.onscroll = () => {
const opcFilter = Math.min(0.5, window.pageYOffset / landingHeight);
document.body.style.background = `linear-gradient(rgba(255, 255, 255, ${ opcFilter }), rgba(255, 255, 255, ${ opcFilter })), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg) no-repeat`;
}
}
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
scroll-behavior: smooth;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg);
background-repeat: no-repeat;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center top !important;
}
nav {
width: 100%;
background: #C1C8D0;
overflow: hidden;
position: fixed;
top: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
float: right;
}
a {
padding: 5px;
width: 130px;
display: block;
text-align: center;
font-weight: bold;
color: black;
text-decoration: none;
}
div {
height: 1000px;
overflow: scroll;
}
Landing Page
The background image here will have an opacity of 1. As we scroll to the next page, the opacity will transition to 0.5.
Page 1
Opacity is now have 0.5 and will stay there for the remaining pages. Scrolling back up to the landing page will set opacity to 1.
Page 2
Another page of opacity 0.5