Параллакс исчезает без 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>