Wie bekomme ich ein Bild, um eine Opazität zu erhalten, während die Seite gescrollt wird

Question

Ich stieß auf eine coole Funktion, die ich auf einer Website sah. Wenn Sie nach unten scrollen, erhält das Hauptbild auf der Seite eine dunkle Deckkraft. Ich weiß, wie man Deckkraft hinzufügt, aber wie kann ich die Deckkraft mit der Rolle hinzufügen?

http://designgroup.us.com/?utm_source=skycatchfire

Answer 1

<div id="home-main-img"> 
    <img src="http:optimumwebdesigns.com/images/demolition1.jpg" alt="Demolition and Wrecking" id="demolition1"> 
</div> 

<div class="height"> 
</div> 


#home-main-img img{ 
    width: 100%; 
    height: auto; 
    margin: 0; 
} 

#home-main-img { 
    background: #000; 
} 

.height { 
    height:500px; 
} 

var scrollPosition = $(this).scrollTop(); 
var docHeight = $(document).height(); 
var diff = docHeight - scrollPosition; 
console.log(scrollPosition); 
$('#demolition1').css({'opacity':diff/docHeight}); 

https://jsfiddle.net/v5chxhwn/2/

Answer 2

einfach ein div mit den folgenden Arten geben und die jquery Scroll-Funktion verwenden, um die Opazität

.black-out { 
    background-color: rgba(0, 0, 0, 0.6); 
    height: 100%; 
    left: 0; 
    margin: 0 auto; 
    max-width: 1800px; 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 

Verwenden Sie den folgenden jQuery-Code

zu erhöhen

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    if (currentScroll > previousScroll){ 
     //Increase opacity using .css() 
    } else { 
     //Decrease opacity using .css() 
    } 
    previousScroll = currentScroll; 
});