suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Reduzieren Sie die Deckkraft des Scroll-Hintergrundbilds und begrenzen Sie die minimale Deckkraft

Ich versuche, die Deckkraft des Hintergrundbilds beim Scrollen und außerhalb der Zielseite zu verringern, indem ich Vanilla-Javascript verwende, um sie auf mindestens 0,5 zu senken. Ich habe versucht, Math.max() in die Bildlauffunktion einzufügen, um den Wert nur auf 0,5 zu senken, aber dadurch blieb das Bild auf allen Seiten bei 0,5.

Ich möchte, dass die Zielseite immer eine Deckkraft von 1 und alle anderen Seiten eine Deckkraft von 0,5 haben. Ich kann den Bildlauf animieren, muss ihn aber bei 0,5 stoppen. 

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 Tage vor1479

Antworte allen(1)Ich werde antworten

  • P粉558478150

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

    您需要添加 Math.min 而不是 Math.max ，如下所示： （我还添加了一个 window.onload 以便在代码片段中运行，但如果您的脚本加载是 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

    Antwort
    0
  • StornierenAntwort