html - 如何使用垂直堆叠的 div 作为每个填充浏览器窗口的页面？

Question

我已经在一些网站上看到了一种效果，它们为您提供了基本上垂直的“页面”，每个页面都填满了浏览器窗口。例子：

http://www.bleed.no/

http://www.weworkonsunday.com/

第一个是更清洁和更复杂的交易。

我一直在想如何实现这种效果。如果高度不是问题，那么使用页面锚等就足够简单了，但是填充窗口的垂直方向（以及宽度）是让我失望的原因。

有没有我想念的简单方法？或者都是一些复杂的java tomfoolery？

非常感谢您的帮助

Answer 1

此结果确实需要一些 javascript 专业知识（以您的示例中实现的方式）。

有一个 jquery 库试图简化这个过程。

http://stephband.info/jparallax/

即使没有真正简单的实现方法。效果非常依赖于布局并且是一种“新”的网站制作方式的原因之一......直到有人解决这个问题需要一些时间。

这是另一个如何在没有库帮助的情况下以您描述的方式实现视差的示例。

操作方法：http : //net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/ 演示： http: //nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/index。 html

如果您搜索“视差滚动”，您会发现很多其他资源。

Answer 2

从概念上讲，我将构建一个带有堆叠 div 的垂直页面，所有这些都具有响应窗口高度的相同类（并且在调整浏览器大小时也会响应）。使用 jQuery 的未经测试的代码：

<div id="page1" class="page">content</div>
<div id="page2" class="page">content</div>
<div id="page3" class="page">content</div>

<script>

    // set up onResize event handler
    window.onresize = onResizeScreen;

    // run onResize event handler once on load
    $.(function() { onResizeScreen(); });

    // onResize event handler
    function onResizeScreen(event) {
        $(".page").attr("height", screen.height);
    }

    // function to scroll to specific page
    function gotoPage(pageNumber){
        window.scroll(screen.height*pageNumber-1);
    }

</script>

<style>
    .page {
        width: 100%;
    }
</style>

你对解决这类问题听起来很陌生。如果您不知道上述内容的含义，请检查 jQuery 并处理 JavaScript 事件。