Question

我正在为我的应用构建一个网站，并希望实现这样的目标：http://letspip.com。屏幕居中的图像，当页面滚动时内容在内部变化。谷歌四处搜索，不知道如何实现。可以在HTML5中完成吗？只是想知道技术的名称或其他什么，所以我可以开始。任何指针都会非常感激！感谢

Answer 1

看看他们的源代码。

HTML：

<div class="device"> <!-- The phone -->
<div class="mask"> <!-- The inner phone -->
<div class="service-bar"></div> <!-- Phone's navbar -->
<div class="screen skrollable skrollable-between" data-175p="transform:translate3d(0,0%,0)" data-150p="transform:translate3d(0,-100%,0)" data-75p="transform:translate3d(0,-100%,0)" data-50p="transform:translate3d(0,-200%,0)" data-0="transform:translate3d(0,-200%,0)" style="transform: translate3d(0px, -100%, 0px);"> <!-- The part that changes -->
<section class="panel"></section><!-- Image 1 -->
<section class="panel"></section><!-- Image 2 -->
<section class="panel"></section><!-- Image 3 -->
</div>
</div>
</div>

第一部分的CSS：

.device .panel:nth-child(1) {
    background-image: url("http://o.aolcdn.com/os/aol/aol-alpha/pip-website/img/slide1.png");
}
.device .panel {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

所以他们手机里面有一个div，它固定在屏幕的中央。在滚动时，屏幕可滚动div的样式元素从transform: translate3d(0px, -200%, 0px);（第一个图像）变为transform: translate3d(0px, -100%, 0px);（第二个img），然后变为transform: translate3d(0px, 0%, 0px);（第三个img）。每次到达页面的新部分时，这都会更改。

有关详细信息，请参阅插件Skrollr或尝试使用自己的javascript技能实现：）

Answer 2

如您所见，这可以通过固定位置和相对位置来管理。您引用的图像已设置为固定。在给定的网站skroller中，插件用于管理不同部分的滚动。

在图片中滚动图片以查找网页

2 个答案: