简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Lower opacity of scroll background image, limit minimum opacity
P粉166675898
P粉166675898 2024-04-04 23:50:53
0
1
1338

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粉166675898
P粉166675898

reply all(1)
P粉558478150
P粉5584781502024-04-05 12:56:14 1 floor

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
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！