Nexus 5网站-滚动滑块内的设备-如何做到这一点

Nexus 5 site - scroll slider inside device - how to do that?

本文关键字：何做 这一点 网站 滚动 Nexus      更新时间：2023-09-26

我想让Nexus 5网站(http://www.google.com/nexus/5/)的效果相同-这与保持Nexus和可变屏幕在它里面，而我在滚动(这是第四部分)。

我的情况是，我的网站上有相同的部分，但是iPad在中心，两侧是文本内容，我想在iPad内更改图像，而我将滚动

有什么想法吗?

非常感谢!

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

基本上通过'scroll'事件和位置- 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">中显示

做第4部分
首先你要做的是创建一个IPad的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
直到需要的时候。然后，当用户在某些点滚动时，将内容图片动画化。JS Transit是一个很好的Jquery动画库。通过适当的动画，它看起来就像Nexus 5的页面。如果你想要一个小的文本框来说明内容(比如"HDR")，只需做同样的事情，但把它们放在IPad框架的上方(图层方向)，并以同样的方式动画化它们。

相关文章：