Question

我遇到了一个我在网站上看到的很酷的功能。向下滚动页面上的主图像时会获得深色不透明度。我知道如何添加不透明度，但具体如何使用滚动添加不透明度？

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

只需给出具有以下样式的div，并使用jquery滚动函数来增加不透明度

.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%;
}

使用以下jquery代码

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

如何在页面向下滚动时获取图像以获得不透明度

2 个答案: