Question

我正在开发的这个网站使用的是HTML5，CSS3，Bootstrap 4和Jquery。我希望在我的页面顶部的全屏背景图像上有一个滚动效果（100vh英雄横幅类型的东西）。当用户向下滚动时，我试图逐渐增加图像的对比度（css滤镜：对比度（某些％））（如果图像在离开视口时完全无法识别，则会很好）。

我有一些Jquery在某种程度上影响我正在寻找的效果，但我希望效果更加渐进。

我遇到的主要问题是，当用户滚动回页面顶部时，对比度值将设置为0％，从而使图像完全变灰。我想要的是对比度逐渐降低到正常（100％），因为用户向上滚动到页面顶部。

我已经设置了一个非常简化的codepen。我无法获得css background-image url值来引用codepen的外部链接，因此我将效果定位到全屏图像（）。

谢谢！

Link to the Pen: [codepen-link][1]


[1]: http://codepen.io/wdzajicek/pen/MVovZE

请参阅以下代码在代码段

中

$(document).ready(function (){
      $(window).scroll(function(){
        var pixelstop = $(window).scrollTop();
        $(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
      });
    });

.header {
      height: 100vh;
    }

    .myimage {
      position:absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      width; 100%;
      z-index: -1;
    }

    .jumbotron {
      position: relative;
      background-color: unset;
      margin-top: 150px;
      z-index: 999;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header text-center">
    <img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
    </header>

Answer 1

ex <- matrix( c(1,2,3,2,3,4,3,4,5),nrow=3) p <- ggplot(melt(ex), aes(x=Var1,y=Var2, fill=value)) + geom_raster() x <- c(1,3) y <- c(2,3) pts <- cbind(x,y) p <- p + ...?中存在主要问题，它将返回0值这就是为什么对比度值设置为0％，留下完全灰显的图像

$(window).scrollTop();

用

替换代码

var pixelstop = $(window).scrollTop();

不要只是复制此代码，请理解谢谢。

Answer 2

＆＃13;

$(document).ready(function (){
  $(window).scroll(function(){
    
    var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
    console.log(pixelstop);
    $(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
  });
});

＆＃13;

.header {
  height: 100vh;
}

.myimage {
  position:absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  width; 100%;
  z-index: -1;
}

.jumbotron {
  position: relative;
  background-color: unset;
  margin-top: 150px;
  z-index: 999;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>

＆＃13;

100是滤镜对比度的默认值而不是0.这就是背景因为达到零而变灰的原因。

jquery在滚动时增加/减少图像对比度

2 个答案: