Question

问候语，

滚动时我有3个背景图像会互相叠加。所以我创建了如下的html：

<body>
<section class="bg1"></section>
<section class="bg2"></section>
<section class="bg3"></section>
<section class="content">
     <h1>This is main content</h1> 
</section>
</body>

我把css：

 body {
    font-family : 'Ropa Sans', sans-serif;
    color: #ffffff;
    background-color: #000000;
    background-image: url("http://idproz.com/rasterman/img/bg1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}
bg2.scrolled {
    background:url("http://idproz.com/rasterman/img/bg2.jpg");
    background-size: cover;
    position : absolute;
    width: 100%;
    min-height: 1600px;
    overflow: hidden;
    top: 0;
    bottom: 0;
    opacity: .4;
}
.bg3.scrolled2 {
    background:url("http://idproz.com/rasterman/img/bg3.jpg");
    background-size: cover;
    position : absolute;
    width: 100%;
    min-height: 1600px;
    overflow: hidden;
    top: 0;
    bottom: 0;
    opacity: .4;
}
.content {
    height: 1800px;
}

最后是剧本：

jQuery(window).scroll(function () {
    var JarakScroll = 150; // jarak scrol
    var JumlahJarakPasScroll = jQuery(window).scrollTop();
    if (JumlahJarakPasScroll > JarakScroll) {
        jQuery('.bg2').addClass('scrolled');
    } else {
        jQuery('.bg2').removeClass('scrolled');
    }
});
jQuery(window).scroll(function () {
    var JarakScroll = 700; // jarak scrol
    var JumlahJarakPasScroll = jQuery(window).scrollTop();
    if (JumlahJarakPasScroll > JarakScroll) {
        jQuery('.bg3').addClass('scrolled2');
    } else {
        jQuery('.bg3').removeClass('scrolled2');
    }
});

(function ($) {
    var x = 0;
    var y = 0;
    //cache a reference to the banner
    var banner = $("body");

    // set initial banner background position
    banner.css('backgroundPosition', x + 'px' + '' + y + 'px');

    // scroll up background position every 90 milliseconds
    window.setInterval(function () {
        banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
        y--;
        //x--;

        //if you need to scroll image horizontally -
        // uncomment x and comment y

    }, 20);
})(jQuery);

当滚动遇到某个点时，我需要帮助为背景图像应用效果。目前它只是出现而没有任何过渡或影响。

任何类型的影响都无关紧要。

这里是小提琴Js Fiddle

感谢。

将效果应用于叠加背景图像

0 个答案: