使用鼠标滚轮插件更改背景图像

Question

我正在尝试在使用鼠标滚轮滚动/向下滚动时更改页面的背景图像。某事like this page here。

我希望更改三个不同的背景图像（即当用户向下滚动时增加/当用户向上滚动时减少）。

See jsfiddle here（实际上并没有像希望的那样工作）。

另请参阅下面的代码。

我希望很清楚我想要达到的目标。如果没有，请告诉我，我可以提供更多信息。

CSS

.bgImage {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  z-index: 1;
}

body, html, #scene, .bgImage {
  height: 100%; 
}

.home{
  background: url("http://cdn3-www.wrestlezone.com/assets/uploads/gallery/ric-flair/gettyimages-93353438.jpg") center center no-repeat;
  background-size: cover;
}

.brett {
  background: url("http://2.bp.blogspot.com/-69o3lsK5MrQ/ThhlOTxGQlI/AAAAAAAAEfY/e0AJF-6sKBw/s1600/bret_hart_-_bret_hart_74.jpg") center center no-repeat;
  background-size: cover;
}

.hulk{
background: url("https://tse3.mm.bing.net/th?id=OIP.M44755b5d2bade01af176621c77ebe279o2&pid=15.1&P=0&w=300&h=300") center center no-repeat;
  background-size: cover;
}

HTML

<div class="bgImage"></div>

JS

var pages = ['home','brett','hulk'];
var page = 0;

$(document).ready(function(){

    $('.bgImage').on('mousewheel', function (e) {
        if (e.deltaY>0) {
            page += 1;
            if(page >= pages.length){
                return;
            }else{
                jQuery('.bgImage').addClass(pages[page]);
            }
        } else {
            page -= 1;
            jQuery('.bgImage').removeClass(pages[page]);
        }
        e.preventDefault();
    });
});

Answer 1

马上我可以告诉您，您可能需要一个更强大的滚动框架来模拟您链接的网站。尝试查看scrollmagic.io 了解如何执行此操作的想法。一种看待它的方法是，如果您愿意的话，您实际上是在捕捉滚动并将它们应用于事件的“时间线”。

要让您的示例正常工作，请查看此小提琴：

https://jsfiddle.net/1nrL5gv1/20/

我添加的一件重要的事情是在应用新类之前删除所有现有类。这样，只会显示最近的图像，您不必担心 css 特异性/顺序。

function cleanUpBg() { for(i = 0; i < pages.length; i++) { bgEl.removeClass(pages[i]); } }

我还添加了超时功能，因此您实际上可以一次触发一个图像更改。同样，我强烈建议您查看现有的滚动库，因为它们可以让您更快地进入这样的项目。