下一代网页布局 - 国家地理森林巨人组织

Christopher Gammon
Christopher Gammon
X 首页

通过使用 CSS 和浏览器布局中的工具，可以为 Web 内容实现令人惊叹的可视化。通过使用 CSS 过滤器、WebGL、HTML5 视频、SVG、画布等 Web 功能，以及 CSS 区域、CSS 形状和 CSS 自定义过滤器等不断发展的未来技术，可以实现前所未有的广阔创意环境。长久以来，Adobe 一直与热衷于布局和设计的内容创作者合作，因此一直积极将这一知识应用于网络，为许多不断演变的网络标准做出贡献。

在《国家地理》的帮助下，我们使用他们名为《森林巨人》的专题内容构建了一个原型，展示这些功能如何实现丰富的网页布局和响应式技术。本文将介绍我们如何构建一些特别有趣的网站特征。为了简要了解网站功能，建议您观看下面的视频，Christian Cantrell 将为您详细介绍网站的各项功能。

布局的细微差别

优秀的布局的构成及其背后的特征可能很微妙，因此我们创建了“编辑器叠加层”，其中突出显示了更值得注意的功能。要启用编辑标记，请点击文章底部的栏。

编辑者标记图片

独立于布局

在当今的 Web 中，布局通常是由内容决定的，容器会垂直扩大以适应文本。创建复杂布局时，对文案或其他内容的更改可能会对整体布局产生不必要的影响，导致需要根据意外更改重新设计内容。借助区域，我们可以将内容与布局真正分离开来，具体方法是：将元素定义为内容，然后指定布局中我们希望该内容贯穿的部分。

在“森林巨人”示例中，我们的故事只包含一个元素。然后，在整个页面内，我们有了布局基架，由照片和文本区域组成。利用 CSS，我们可以定义希望内容流经的元素。当复制到达某个元素的末尾时，它会继续执行 DOM 顺序中的下一个元素。这样，我们就可以在列上发挥创意，根据设计调整列的位置并调整高度，而不必担心文本是否适合或超出元素的高度。它还让我们能够在布局中添加各种元素（例如全宽图片），同时故事情节仍在延续。

#storyContent {
    flow-into: story;
}
.story {
    flow-from: story;
}

在上面的 CSS 中，我们创建了一个名为 "story" 的命名流。这个已命名 flow 的内容是 ID 为 "storyContent" 的元素。然后，该操作会流经类名称为 "story" 的所有元素。CSS 区域是自适应设计的绝佳工具，它支持使用多列和偏移列等功能，在大屏幕上实现丰富布局，同时在较小屏幕上调整为单列布局。对于区域，您还可以使用 vw 或 vh 等自适应单位设置区域大小。这可用于确保列不超过布局中的视口高度，而不必担心内容被截断，因为它会自然而然地流入区域链中的下一个元素。

帽子

借助 CSS 排除功能，我们可以将文本环绕或不规则形环绕。这对于像帽子这样的设计非常有用。外壳是一种常见的设计做法，在这种设计中，故事或章节的首字母会放大，让文字的其余部分环绕着角色的轮廓。这种效果与内嵌内容环绕浮点数的方式非常相似，不过，有了排除功能，我们不再局限于矩形框。通过对浮点数使用 shape-outside，我们可以定义几何形状，使内容能够紧密环绕角色的形状。

.drop-caps {
    height: 100px;
    width: 100px;
    float: left;
    shape-outside: ellipse(50%, 50%, 50%, 50%);
}

这样就会创建一个椭圆形，从而使内容能够环绕该圆形。此外，由于我们对形状使用的是相对单位，因此更改元素的大小将反映在形状的大小上。

折叠帽图片

形状

与下封盖一样，排除功能也能够使用形状向内封装形状中的文本。我们在整个网站上使用此功能，特别是大的图片说明，利用照片的负空间来加框文本。它还允许我们将文本封装在其他图像和图形的轮廓上，而这些图像和图形以前很难在网络上实现。

形状还可以与响应式布局搭配使用，方法是使用相对单位来定义形状。这样一来，我们就可以根据容器或视口制作可拉伸的形状，甚至可以使用媒体查询来完全更改形状或移除形状，因为形状都是在 CSS 中定义的。以下是网站中使用的一个多边形形状示例，其值用于定义点：

.shape {
    shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
CSS 形状图片

平衡文字

均衡文字功能会在换行（而不是逐字换行）时查看元素内的整个文本块。这种划分方式可以避免在单行中包含一两个字词的情况，即通过换行文字来实现元素内各行大小相同的行。这种级别的控制使我们能够轻松创建具有美感美感的文本块，尤其是对于引言或字幕等简短内容。

这正是我们在文章中使用“平衡文字”的地方。由于此功能是 Adobe 提议的标准，因此我们使用 Randy Edmunds 创建的 polyfill 来实现相同的效果。最好在响应式用例中实现此功能。调整浏览器大小时，您会注意到，该块会继续平衡文本，使多行文字具有相同的宽度。使用平衡文本 polyfill 很简单，因为这是一个 jQuery 插件，我们只需在布局发生变化时对选择器应用“balanceText()”，即可获得平衡的文本，如下所示：

$('.balance').balanceText();
均衡文字图片

滤镜过渡

过渡是吸引用户注意力的重要方式，并有助于传达网站中发生的事情。借助不透明度以及最近推出的 3D 转换，我们看到用户在滚动或与网站的不同部分互动时，可以采用这种转换制作流畅的过渡和动画效果。现在，我们有了可用于此用途的过滤器。

在《森林巨人》中，我们使用滤镜让部分图片进入视野范围，从灰度模式淡化为彩色。这些滤镜可与不透明度或其他滤镜结合使用，以创建复杂的成像效果和转场。我们可以使用自定义滤镜功能来添加更加戏剧化的效果。

自定义滤镜使用 GLSL 编写，GLSL 是与 WebGL 相同的着色语言。借助它们，您可以通过 CSS 将这些着色器应用于 DOM 元素，从而实现复杂的混合效果和 3D 失真。在网站的底部，当您点击“Explore the Internal Tree”（探索总统树）时，您会看到页面处于卷曲状态，以显示下面的另一部分。这只是一个示例，说明自定义过滤条件可如何实现内容之间的丰富过渡。动画可以使用 CSS 过渡来实现。不过，如果您想要使用比过渡允许更强健的动画或互动，可以使用 JavaScript 设置样式，将值传递给着色器，如下所示。这样一来，您就可以更精细地控制加/减速，甚至允许使用用户输入方法来操控着色器。

function applyCurl(value) {
    $("#map").css("webkitFilter",
    "custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
    + " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
    + " rotateY(0deg) rotateZ(0deg), curlPosition "
    + value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}

我们的滤镜会在 GPU 上将内容光栅化为纹理，以应用该效果。因此，我们需要确保在完成后将其移除，否则我们的内容可能会模糊不清。

$("#map").css("webkitFilter", "none");

CSS 自定义过滤器可实现有趣的效果，例如换页看起来就像在真实的书里翻页一样。借助这些库，Web 开发者可以使用一种名为 GLSL 的语言编写复杂的效果，并将其应用到 Web 内容中。要详细了解自定义过滤器、所有这些参数以及如何使用它们，请查看此教程。

翻页图片

在 WebGL 中预渲染纹理

这篇文章中的珠宝是第一张完整的“总统”照片，据说是世界上第二大树。这张图片是通过将数百张树木照片拼接成一张完整的照片拼接而成的。为了模拟这一过程，我们希望将图片拆分成一堆小照片，然后飞到合适的位置上就能看到完整的照片。这是使用 WebGL 实现的，具体而言是 Three.js 库，后者是 WebGL 的更高级别 API 封装容器。

巨树图片

每次尝试在屏幕上绘制新纹理时，如果渲染大量纹理，会很快导致性能问题，更不用说产生额外的网络请求。为了减少这种情况，我们将纹理尽可能大，并针对每个图块对其进行偏移。这项技术通常称为精灵映射，在游戏开发中很常见。这为整棵树生成了三个大型纹理。为了避免每次首次在屏幕上出现纹理时对性能造成影响，我们会在动画开始播放前为每个纹理渲染 1 像素的方形图片，将性能影响移到开头。这样，我们就可以顺畅地飞过树的整个高度并为其添加动画效果，即使在平板电脑上也是如此。

为了偏移纹理，我们需要更改将纹理映射到几何图形的 UV。在 Three.js 中，代码如下所示：

geometry.faceVertexUvs[0][0] = [
    new THREE.Vector2(xOffset, yOffset + 1),
    new THREE.Vector2(xOffset, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset + 1)
];

可以看到，我们为纹理的 x 轴和 y 轴偏移量使用了变量。自定义 GLSL 着色器材质可以偏移几何图形上绘制的坐标，实现相同的效果。

实验性功能

此演示使用的某些功能仍处于实验阶段，因此您需要在 Chrome Canary 中阅读这篇文章，并在此网站中启用 Chrome Canary 版提到的所有标记。

安装并正确配置 Chrome Canary 版后，请查看演示。（请注意，整个项目是开源的，并可在 GitHub 上找到）。

总结

我们也一直在探索如何在移动应用环境中使用这些功能，更像电子书一样。您可以看到这个原型的进展中，以及我们如何利用不同的互动和触摸范式在平板电脑上展示这些功能。

随着网络浏览器布局的不断发展，我们看到希望继续保留过去在传统阅读内容中已习惯的制作价值和布局质量。借助 CSS 区域、排除对象、平衡文字、自定义过滤条件和 WebGL 等功能，内容创作者无需再在覆盖面和设计质量之间做出取舍。“Forest Giant”是一个明确的信号，表明未来的网络将允许二者兼而有之。