Issue
I am trying to have a background image reduce the opacity on scroll, down to a minimum of 0.5 once off the landing page using vanilla javascript. I tried adding a Math.max()
within the scroll function to only have it drop to 0.5, but it causes the image to remain at 0.5 for all pages.
I would like the landing page to always have opacity=1, with all other pages at 0.5. I was able to do the scrolling animation, 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>
Solution
You need to add Math.min
not Math.max
like so :
(I also added a window.onload
for this to run in the snippets but it's not mandatory if your script loading is defer
ed)
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;
}
<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>
Answered By - Lucasbk38
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.