与背景图像创建一个JavaScript库

Question

需要帮助建立一个完整的页面画廊。我尝试过各种选项。我试图创建完整的网页库，让用户垂直滚动虽然1个图像在同一时间。

这里是我的代码：

<style>

#img1 {
background-image: url("<?php echo $image ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

#img2 {
background-image: url("<?php echo $image2 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

#img3 {
background-image: url("<?php echo $image3 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>

<div id="img1"></div>
<div id="img2"></div>
<div id="img2"></div>

我的Javascript / jQuery的解决方案卡住检测用户是否滚动。我想改变的图像，如果用户向上滚动10个像素或向下10个像素。

下面是我想要达到一个例子：http://themes.themegoods.com/photome/demo/gallery-archive/gallery-archive-fullscreen/

Answer 1

这将是更好地用js库，如“fullPage.js，智能滚动条，pagePiling.js”那些帮助你做出一个完美的网页或画廊滚动像你想实现，以获取更多信息如下链接如下内容：

• https://alvarotrigo.com/fullPage/
• http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/
• https://alvarotrigo.com/pagePiling/