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

Christopher Gammon
Christopher Gammon

利用 CSS 和浏览器布局工具,您可以为 Web 内容实现出色的可视化效果。使用 CSS 滤镜、WebGL、HTML5 视频、SVG、画布等 Web 功能,以及 CSS 区域、CSS 形状和 CSS 自定义滤镜等不断发展的未来技术,可大大拓展创意空间。Adobe 长期以来一直与热衷于布局和设计的内容创作者合作,因此一直积极将这些知识应用于 Web,为不断演变的许多 Web 标准做出了贡献。

在国家地理学会的帮助下,我们使用其名为“森林巨人”的专题内容构建了一个原型,展示了这些功能如何实现丰富的 Web 布局和响应式技术。本文将介绍我们如何打造该网站的一些特别有趣的特性。如需简要了解该网站,不妨观看下面的视频,Christian Cantrell 将为您详细介绍该网站的各种功能。

布局细节

优秀的布局和背后的功能可能很细微,因此我们创建了“编辑器叠加层”,以突出显示更值得注意的功能。如需启用编辑器标记,请点击文章底部的栏。

编辑者标记图片

布局无关

在当今的 Web 中,布局通常由内容决定,容器会垂直放大以适应文本。在制作复杂的布局时,对文案或其他内容所做的更改可能会对整体布局产生不必要的影响,导致需要根据意外更改重新设计内容。借助区域,我们可以通过将某个元素定义为内容,然后指定我们希望该内容流经的布局部分,真正将内容与布局分离。

在“森林巨人”示例中,故事包含在单个元素中。然后,在整个页面中,我们将使用布局脚手架,其中包含照片和文本区域。使用 CSS,我们可以定义要让内容流经的元素。当复制操作到达某个元素的末尾时,它会继续复制 DOM 顺序中的下一个元素。这样一来,我们就可以充分发挥想象力,根据设计对列进行偏移并调整其高度,而无需担心文本是否会超出元素的高度。这样一来,我们就可以在布局中添加元素(例如全宽图片),同时让故事继续流动。

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

在上面的 CSS 中,我们将创建一个名为 “story” 的命名流程。此命名流程的内容是 ID 为 "storyContent" 的元素。然后,它会流经所有类名为 "story" 的元素。CSS 区域是响应式设计的绝佳工具,可让您使用多列和偏移列等功能在大屏设备上实现丰富的布局,同时在小屏设备上调整为单列布局。对于区域,您还可以使用 vw 或 vh 等响应式单位来设置区域的大小。这可用于确保列不超过布局中的视口高度,而无需担心内容被截断,因为内容会自然流入区域链中的下一个元素。

首字母放大

借助 CSS 排除项,我们可以将文本换行显示在不规则形状周围或内部。这对于设计花哨的效果(例如首字母大写)很有用。大号首字母是一种常见的设计做法,即放大故事或章节的第一个字母,让其余文本环绕字母轮廓。此效果与内嵌内容如何环绕浮点数非常相似,但有了排除项,我们不再局限于矩形框。通过在浮点数上使用 shape-outside,我们可以定义几何图形,以便内容紧密地环绕字符的形状。

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

这将创建一个椭圆形,以便内容环绕圆形。此外,由于我们为形状使用的是相对单位,因此更改元素的大小将反映在形状的大小中。

首字母大写图片

形状

除了首字母大写之外,排除项还支持使用 shape-inside 在形状中换行文本。我们在整个网站中都使用了此功能,尤其是在大型图片说明中,利用照片的负空间来为文本设置边框。它还支持沿其他图片和图形的轮廓换行文本,从而模拟以前在网络上很难实现的布局。

形状还可以与响应式布局搭配使用,只需使用相对单位来定义形状即可。这样,我们就可以制作根据容器或视口进行伸缩的形状,甚至可以使用媒体查询完全更改形状或将其移除,因为所有这些都是在 CSS 中定义的。以下示例展示了网站中使用的多边形形状之一,其中包含用于定义点的值:

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

平衡文本

平衡文本是一项功能,可在换行时查看元素中的整个文本块,而不是逐字换行。它会换行,以便在元素中实现大小均等的行,从而避免出现单行中只有一个或两个字词的情况。借助这种控制级别,我们可以轻松创建美观的文字块,尤其是对于拉出引号或字幕等短文本。

这正是我们在文章中使用平衡文本的位置。由于此功能是 Adobe 提出的一项标准,因此我们使用 Randy Edmunds 创建的 polyfill 来实现相同的结果。此功能最适合在响应式版式中使用。调整浏览器大小时,您会发现该块会继续平衡文本,使各行大致具有相同的宽度。使用平衡文本 polyfill 很简单,因为它是一个 jQuery 插件,我们只需在布局发生变化时将“balanceText()”应用于选择器,即可获得平衡的文本,如下所示:

$('.balance').balanceText();
平衡的文本图片

滤镜转场效果

转场效果是引导用户注意力并传达网站中各项状态的重要方式。我们发现,不透明度(以及最近的 3D 转换)可用于在用户滚动或与您网站的某些部分互动时创建流畅的转换和动画。现在,我们有过滤器可用于相同用途。

在“森林巨人”中,我们使用滤镜在某些图片显示时从灰度渐变为彩色。这些滤镜可以与不透明度或其他滤镜结合使用,以创建复杂的图像效果和转场效果。我们可以利用强大的自定义滤镜来添加更具戏剧性的效果。

自定义滤镜使用 GLSL 编写,该语言与 WebGL 使用的是相同的着色语言。借助它们,您可以通过 CSS 将这些着色器应用于 DOM 元素,从而实现复杂的混合效果和 3D 失真效果。在该网站底部,点击“探索总统树”后,您会看到页面卷起,露出下方的另一个部分。这只是自定义过滤器如何在内容之间实现丰富转换的一个示例。您可以使用 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 等功能,内容创作者无需再在覆盖面和设计质量之间做出选择。“森林巨人”是一个明显的信号,表明未来的网络将同时支持这两者。