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粉166675898262 Il y a quelques jours1482

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