recherche

Maison  >  Questions et réponses  >  le corps du texte

Opacité inférieure de l'image d'arrière-plan de défilement, limite l'opacité minimale

J'essaie de faire en sorte que l'image d'arrière-plan réduise l'opacité lors du défilement et une fois éloignée de la page de destination, en utilisant le javascript Vanilla pour la réduire à un minimum de 0,5. J'ai essayé d'ajouter Math.max() dans la fonction de défilement pour le laisser tomber uniquement à 0,5, mais cela a fait que l'image reste à 0,5 pour toutes les pages.

Je souhaite que la page de destination ait toujours une opacité de 1 et que toutes les autres pages aient une opacité de 0,5. Je suis capable d'animer le défilement mais j'ai besoin qu'il s'arrête à 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粉166675898P粉166675898231 Il y a quelques jours1422

répondre à tous(1)je répondrai

  • P粉558478150

    P粉5584781502024-04-05 12:56:14

    Vous devez ajouter Math.min 而不是 Math.max comme indiqué ci-dessous : (J'ai aussi ajouté un window.onload 以便在代码片段中运行,但如果您的脚本加载是 defered qui n'est pas obligatoire)

    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

    répondre
    0
  • Annulerrépondre