jqueryを使用しない視差フェード

Question

私は視差スクロールでウェブサイトを作ろうとしています。私は基本的なコードを持っていますが、次の画像にスクロールしてスクリーンに来るとフェードインすると画像が消えてしまいます。私は純粋なHTMLとCSSを使用していますが、プラグインはありません。私はこれをどのようにするべきですか？ここに私のコードは次のとおりです。

#divname { 
 
    background-image: url('http://lorempixel.com/1024/600/abstract/'); 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
\t background-position: center center; 
 
    width: 100vw; 
 
\t height: auto; 
 
\t background-attachment: fixed; 
 
} 
 

 
.text { 
 
\t background-color: rgba(255, 255, 255, 0.75); 
 
} 
 

 
.header { 
 
\t font-size: 10vw; 
 
}

\t \t <div id="divname"> 
 
       <div class="text"> 
 
\t \t \t \t <p class="header">Headername</p> 
 
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis dictum mi ac euismod. Aenean fermentum nisl ut lorem cursus, in consectetur est eleifend.</p> 
 
\t \t \t </div> 
 
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

PS：ところで、私はJavaScriptを使用してと罰金ですが、私はむしろjQueryのを使用することはありません。

Answer 1

ない、これはあなたが 、何をしたいんですが、あなたは他のテキストから別のあなたのイメージする必要がある場合は必ず、それ以外のすべてのあなたの#divanameは、スクロール時にフェードアウトします。

var myDiv = document.getElementById('divname'); 
 

 
function scrolled() { 
 
    
 
    if (window.pageYOffset < 100) { 
 
     myDiv.style.opacity = 1; 
 
    } else { 
 
     myDiv.style.opacity = 0.3; 
 
    } 
 
} 
 

 
window.addEventListener('scroll', scrolled);

#divname { 
 
    background-image: url('http://lorempixel.com/1024/600/abstract/'); 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
\t background-position: center center; 
 
    width: 100vw; 
 
\t height: auto; 
 
\t background-attachment: fixed; 
 
    transition: opacity 1s ease; 
 
} 
 

 
.text { 
 
\t background-color: rgba(255, 255, 255, 0.75); 
 
} 
 

 
.header { 
 
\t font-size: 10vw; 
 
}

<div id="divname"> 
 
       <div class="text"> 
 
\t \t \t \t <p class="header">Headername</p> 
 
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis dictum mi ac euismod. Aenean fermentum nisl ut lorem cursus, in consectetur est eleifend.</p> 
 
\t \t \t </div> 
 
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>