Question

我正在尝试使用Angular JS 1创建此效果，当您滚动div的背景图像时，从模糊的一个更改为更清晰的一个。我使用基本的HTML，CSS和JS完成了这个，我已经读过你可以在角度应用中使用简单的JS函数。我之前的代码是这样的：

HTML：

<div class="intro">
   <div class="img-src"></div>
   <div class="img-src scroll-img"></div>
   Hello
</div>

CSS：

html,body{
    height: 100%;
.intro{
    position: relative;
    height: 100%;
}
.img-src{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url('../assets/cover-image-blur.png');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: -10;
    background-color: #222;
}
.scroll-img{
    background-image: url('../assets/cover-image.png');
    background-size: cover;
    opacity: -0.006677;
}

JS：

(function () {
    $(window).scroll(function () {
        var oVal;
        oVal = $(window).scrollTop() / 240;
        return $('.scroll-img').css('opacity', oVal);
    });
}.call(this));

我在WAMP服务器上测试了它，图像甚至没有显示出来。然后我尝试将它放在Github页面上。图像确实显示但高度只是直到文本＆＃34;你好＆＃34;。我希望它完全100％的浏览器窗口，所以我在CSS中使用高度100％。请帮忙！谢谢！

使用Angular JS 1滚动时的unblur图像

0 个答案: