cari

Rumah  >  Soal Jawab  >  teks badan

Kurangkan kelegapan imej latar belakang tatal, hadkan kelegapan minimum

Saya cuba menjadikan imej latar belakang mengurangkan kelegapan pada tatal dan sekali sahaja meninggalkan halaman pendaratan, menggunakan javascript vanila untuk menurunkannya kepada minimum 0.5. Saya cuba menambah Math.max() dalam fungsi tatal untuk hanya menjatuhkannya kepada 0.5, tetapi ia menyebabkan imej kekal pada 0.5 untuk semua halaman.

Saya mahu halaman pendaratan sentiasa mempunyai kelegapan 1 dan semua halaman lain mempunyai kelegapan 0.5. Saya dapat menghidupkan tatal tetapi memerlukannya berhenti pada 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 hari yang lalu1424

membalas semua(1)saya akan balas

  • P粉558478150

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

    Anda perlu menambah Math.min 而不是 Math.max seperti yang ditunjukkan di bawah: (Saya juga menambah window.onload 以便在代码片段中运行，但如果您的脚本加载是 defered yang tidak wajib)

    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

    balas
    0
  • Batalbalas