Question

一旦以下元素（再次按类）位于视口中，我想在滚动时淡化由类名称标识的元素的背景图像。使用香草JS（不是JQuery）。

我的代码：

var heroScroll = document.querySelector(".hero").offsetTop;
window.onscroll = function() {
  if (window.pageYOffset > 0) {
    var opac = window.pageYOffset / heroScroll;
    document.getElementByClassName("now").style.background = "linear-gradient(rgba(255, 255, 255, " + opac + "), 
        rgba(255, 255, 255, " + opac + ")), 
        url(myImage.jpg) no-repeat";
    }
}

Answer 1

尝试这个：

function fadeOutEffect() {
    var fadeTarget = document.getElementById("target");
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.2;
        } else {
            clearInterval(fadeEffect);
        }
    }, 200);
}

document.getElementById("target").addEventListener('click', fadeOutEffect);

#target {
    height: 100px;
    background-color: blue;
}

<div id="target">Click to fade</div>

让我知道它是否对您有用或您是否需要任何帮助。

逐元素褪色的背景图片（香草JS）

1 个答案: