Question

我想在Nexus 5网站（http://www.google.com/nexus/5/）上产生相同的效果 - 这与我在滚动时保持Nexus和可更改的屏幕（这是第4部分）。

我的情况是我的网站上有相同的部分，但中间有一个iPad，两边都有文字内容，我想在我滚动的时候更改iPad内部的图像。

请问任何想法？

非常感谢！

Answer 1

看看这个：的 http://jsfiddle.net/sTH5w/47/show/

基本上通过滚动＆＃39;滚动来控制滑块。事件和职位 - scrollTop() 例如：

if(/* some condition with $(document).scrollTop() */) { if($('#img2').css("margin-top") == "295px") { // if the image is down $('#img2').animate({"margin-top": "0px"}, 300); // slide the image up } }

请在此处查看完整代码：http://jsfiddle.net/sTH5w/47/

注意：在我的示例中，滑块后面的所有内容都必须显示在<div id="after-slider">中。

Answer 2

要做第4部分
首先，您要做的是使用透明中心制作一个IPG的PNG。这可以通过谷歌搜索“IPad”并找到你喜欢的图像来完成，然后进入你最喜欢的图像编辑程序并屏蔽并删除IPad的中心部分（内容将去的地方）。

接下来您需要做的是将IPad的图像置于网页上。这可以通过将图片放在<img>标签中来完成 <img src="pathToIpadPicture" id="mainPic">
然后添加一些CSS

#mainPic {
    display: block;
    margin: auto;
    margin-top: calc(50% - heightOfYourPictureHere);
}

这应该使图片在页面中垂直和水平居中。

现在您要添加交互式滚动部分。这就是为什么我们使用具有透明中心的IPad制作IPad的原因。现在你已经做了一些内容。使此内容与您的IPad中心一样大。然后将这些内容图片添加到您的网页，并以与我们为IPad图片相同的方式对其进行居中。确保用中隐藏它们 display: none
直到他们需要。然后，当用户在特定点滚动时，向上动画内容图片。使用Jquery进行动画制作的好库是JS Transit。通过适当的动画，它应该看起来就像Nexus 5页面。如果你想要一些文字气泡来说明内容是什么（比如“HDR”），那就做同样的事情，但把它们放在IPad框架上面（图层化）并以同样的方式动画它们。

Nexus 5网站 - 设备内滚动滑块 - 怎么做？

2 个答案: