整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者：伯乐在线/chokcoco
http://web.jobbole.com/95068/
何为滚动视差
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。
通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗的能力。下面就让我们来见识一二：
认识 background-attachment
background-attachment 算是一个比较生僻的属性，基本上平时写业务样式都用不到这个属性。但是它本身很有意思。
background-attachment：如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。
单单从定义上有点难以理解，随下面几个 Demo 了解下 background-attachment 到底是什么意思：
background-attachment: scroll
scroll 此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动。
background-attachment: local
local 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
background-attachment: fixed
fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
注意一下 scroll 与 fixed，一个是相对元素本身固定，一个是相对视口固定，有点类似 position 定位的 absolute 和 fixed。
可以感受下 3 种不同取值的不同效果：
CodePen Demo — bg-attachment Demo（https://codepen.io/Chokcoco/pen/xJJorg）
使用 background-attachment: fixed 实现滚动视差
首先，我们使用 background-attachment: fixed 来实现滚动视差。fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
这里的关键在于，即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。也就是说，背景图从一开始就已经被固定死在初始所在的位置。
我们使用，图文混合排布的方式，实现滚动视差，HTML 结构如下，.g-word 表示内容结构，.g-img 表示背景图片结构：
<section class="g-word">Header</section>
<section class="g-img">IMG1</section>
<section class="g-word">Content1</section>
<section class="g-img">IMG2</section>
<section class="g-word">Content2</section>
<section class="g-img">IMG3</section>
<section class="g-word">Footer</section>
关键 CSS：
section {
height: 100vh;
}
.g-img {
background-image: url(...);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
效果如下：
CodePen Demo — https://codepen.io/Chokcoco/pen/JBaQoY（https://codepen.io/Chokcoco/pen/JBaQoY）
嗯？有点神奇，为什么会是这样呢？可能很多人会和我一样，第一次接触这个属性对这样的效果感到懵逼。
我们把上面 background-attachment: fixed 注释掉，或者改为 background-attachment: local，再看看效果：
CodePen Demo — bg-attachment:local（https://codepen.io/Chokcoco/pen/ZjMdJz）
这次，图片正常跟随滚动条滚动了，按常理，这种效果才符合我们大脑的思维。
而滚动视差效果，正是不按常理出牌的一个效果，重点来了：
当页面滚动到图片应该出现的位置，被设置了 background-attachment: fixed 的图片并不会继续跟随页面的滚动而跟随上下移动，而是相对于视口固定死了。
好，我们再来试一下，如果把所有 .g-word 内容区块都去掉，只剩下全部设置了 background-attachment: fixed 的背景图区块，会是怎么样呢？
HTML 代码如下：
<section class="g-img">IMG1</section>
<section class="g-img">IMG2</section>
<section class="g-img">IMG3</section>
section {
height: 100vh;
}
.g-img {
background-image: url(...);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
效果如下：
CodePen Demo（https://codepen.io/Chokcoco/pen/oMPrGZ）
结合这张 GIF，相信能对 background-attachment: fixed 有个更深刻的认识，移动的只有视口，而背景图是一直固定死的。
综上，就是 CSS 使用 background-attachment: fixed 实现滚动视差的一种方式，也是相对而言比较容易的一种。当然，background-attachment: fixed 本身的效果并不仅只是能有用来实现滚动视差效果，合理运用，还可以实现其他很多有趣的效果，这里简单再列一个：
background-attachment: fixed 实现图片点击水纹效果
利用图片相对视口固定，可以有很多有趣的效果，譬如下面这个，来源于这篇文章CSS Water Wave (水波效果)：
CodePen Demo — bg-attachment:fixed Wave（https://codepen.io/Chokcoco/pen/wxYZWO）
利用图片相对视口固定的特性实现点击的水纹效果。
上面这个效果有点瑕疵，图片在放大容器变大的过程中发生了明显的抖动。当然，效果还是可以的，background-attachment 还有很多有意思的效果可以挖掘。
使用 transform: translate3d 实现滚动视差
言归正传，下面介绍另外一种使用 CSS 实现的滚动视差效果，利用的是 CSS 3D。
原理就是：
关于 transform-style: preserve-3d 以及 perspective 本文不做过多篇幅展开，默认读者都有所了解，还不是特别清楚的，可以先了解下 CSS 3D。
核心代码表示就是：
<div class="g-container">
<div class="section-one">translateZ(-1)</div>
<div class="section-two">translateZ(-2)</div>
<div class="section-three">translateZ(-3)</div>
</div>
html {
height: 100%;
overflow: hidden;
}
body {
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.g-container {
height: 150%;
.section-one {
transform: translateZ(-1px);
}
.section-two {
transform: translateZ(-2px);
}
.section-three {
transform: translateZ(-3px);
}
}
总结就是父元素设置 transform-style: preserve-3d 和 perspective: 1px，子元素设置不同的 transform: translateZ，滚动滚动条，效果如下：
CodePen Demo — CSS 3D parallax（https://codepen.io/Chokcoco/pen/EpOeRm）
很明显，当滚动滚动条时，不同子元素的位移程度从视觉上看是不一样的，也就达到了所谓的滚动视差效果。
滚动视差文字阴影/虚影效果
那么，运用 translate3d 的视差效果，又能有一些什么好玩的效果呢？下面这个滚动视差文字阴影/虚影效果很有意思：
CodePen Demo — CSS translate3d Parallax（https://codepen.io/Chokcoco/pen/XBgBBp）
当然，通过调整参数（perspective: ?px 以及 transform: translateZ(-?px);），还能有其他很有意思的效果出现：
CodePen Demo — CSS translate3d Parallax 2（https://codepen.io/Chokcoco/pen/PBXwdX）
是不是很有电影开片的厂商 LOGO 的特效的感觉 joy 。
师父领进门，修行在个人，怎么制作更好更有意思的效果还是需要花时间钻研和琢磨，这里我仅仅是抛砖引玉，希望能见到更多 Nice 的效果。
好了，本文到此结束，希望对你有帮助 :)
为滚动视差
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。
通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗的能力。下面就让我们来见识一二：
认识 background-attachment
background-attachment 算是一个比较生僻的属性，基本上平时写业务样式都用不到这个属性。但是它本身很有意思。
background-attachment：如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。
单单从定义上有点难以理解，随下面几个 Demo 了解下 background-attachment 到底是什么意思：
background-attachment: scroll
scroll 此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动。
background-attachment: local
local 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
background-attachment: fixed
fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
注意一下 scroll 与 fixed，一个是相对元素本身固定，一个是相对视口固定，有点类似 position 定位的 absolute 和 fixed。
可以感受下 3 种不同取值的不同效果：
CodePen Demo — bg-attachment Demo（https://codepen.io/Chokcoco/pen/xJJorg）
使用 background-attachment: fixed 实现滚动视差
首先，我们使用 background-attachment: fixed 来实现滚动视差。fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
这里的关键在于，即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。也就是说，背景图从一开始就已经被固定死在初始所在的位置。
我们使用，图文混合排布的方式，实现滚动视差，HTML 结构如下，.g-word 表示内容结构，.g-img 表示背景图片结构：
<section class="g-word">Header</section> <section class="g-img">IMG1</section> <section class="g-word">Content1</section> <section class="g-img">IMG2</section> <section class="g-word">Content2</section> <section class="g-img">IMG3</section> <section class="g-word">Footer</section>
关键 CSS：
section {
height: 100vh;
}
.g-img {
background-image: url(...);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
效果如下：
CodePen Demo — https://codepen.io/Chokcoco/pen/JBaQoY（https://codepen.io/Chokcoco/pen/JBaQoY）
嗯？有点神奇，为什么会是这样呢？可能很多人会和我一样，第一次接触这个属性对这样的效果感到懵逼。
我们把上面 background-attachment: fixed 注释掉，或者改为 background-attachment: local，再看看效果：
CodePen Demo — bg-attachment:local（https://codepen.io/Chokcoco/pen/ZjMdJz）
这次，图片正常跟随滚动条滚动了，按常理，这种效果才符合我们大脑的思维。
而滚动视差效果，正是不按常理出牌的一个效果，重点来了：
当页面滚动到图片应该出现的位置，被设置了 background-attachment: fixed 的图片并不会继续跟随页面的滚动而跟随上下移动，而是相对于视口固定死了。
好，我们再来试一下，如果把所有 .g-word 内容区块都去掉，只剩下全部设置了 background-attachment: fixed 的背景图区块，会是怎么样呢？
HTML 代码如下：
<section class="g-img">IMG1</section> <section class="g-img">IMG2</section> <section class="g-img">IMG3</section>
section {
height: 100vh;
}
.g-img {
background-image: url(...);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
效果如下：
CodePen Demo（https://codepen.io/Chokcoco/pen/oMPrGZ）
结合这张 GIF，相信能对 background-attachment: fixed 有个更深刻的认识，移动的只有视口，而背景图是一直固定死的。
综上，就是 CSS 使用 background-attachment: fixed 实现滚动视差的一种方式，也是相对而言比较容易的一种。当然，background-attachment: fixed 本身的效果并不仅只是能有用来实现滚动视差效果，合理运用，还可以实现其他很多有趣的效果，这里简单再列一个：
background-attachment: fixed 实现图片点击水纹效果
利用图片相对视口固定，可以有很多有趣的效果，譬如下面这个，来源于这篇文章CSS Water Wave (水波效果)：
CodePen Demo — bg-attachment:fixed Wave（https://codepen.io/Chokcoco/pen/wxYZWO）
利用图片相对视口固定的特性实现点击的水纹效果。
上面这个效果有点瑕疵，图片在放大容器变大的过程中发生了明显的抖动。当然，效果还是可以的，background-attachment 还有很多有意思的效果可以挖掘。
使用 transform: translate3d 实现滚动视差
言归正传，下面介绍另外一种使用 CSS 实现的滚动视差效果，利用的是 CSS 3D。
原理就是：
关于 transform-style: preserve-3d 以及 perspective 本文不做过多篇幅展开，默认读者都有所了解，还不是特别清楚的，可以先了解下 CSS 3D。
核心代码表示就是：
<div class="g-container"> <div class="section-one">translateZ(-1)</div> <div class="section-two">translateZ(-2)</div> <div class="section-three">translateZ(-3)</div> </div>
html {
height: 100%;
overflow: hidden;
}
body {
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.g-container {
height: 150%;
.section-one {
transform: translateZ(-1px);
}
.section-two {
transform: translateZ(-2px);
}
.section-three {
transform: translateZ(-3px);
}
}
总结就是父元素设置 transform-style: preserve-3d 和 perspective: 1px，子元素设置不同的 transform: translateZ，滚动滚动条，效果如下：
CodePen Demo — CSS 3D parallax（https://codepen.io/Chokcoco/pen/EpOeRm）
很明显，当滚动滚动条时，不同子元素的位移程度从视觉上看是不一样的，也就达到了所谓的滚动视差效果。
滚动视差文字阴影/虚影效果
那么，运用 translate3d 的视差效果，又能有一些什么好玩的效果呢？下面这个滚动视差文字阴影/虚影效果很有意思：
CodePen Demo — CSS translate3d Parallax（https://codepen.io/Chokcoco/pen/XBgBBp）
当然，通过调整参数（perspective: ?px 以及 transform: translateZ(-?px);），还能有其他很有意思的效果出现：
CodePen Demo — CSS translate3d Parallax 2（https://codepen.io/Chokcoco/pen/PBXwdX）
是不是很有电影开片的厂商 LOGO 的特效的感觉 joy 。
师父领进门，修行在个人，怎么制作更好更有意思的效果还是需要花时间钻研和琢磨，这里我仅仅是抛砖引玉，希望能见到更多 Nice 的效果。
动页面是一个很常规的操作，结合这个交互行为可以在设计上有哪些可以发挥的点呢？可能这对很多人来说，算是一块知识盲区，那么就跟着这篇文章一起来学习吧！
设计师应该要了解网页上各种效果的实现能力，才能给用户创造出非常吸引人的视觉体验。
滚动页面是一个很常规的操作，结合这个交互行为可以在设计上有哪些可以发挥的点呢？可能这对很多人来说，算是一块知识盲区，那么就跟着这篇文章一起来学习吧！
视差滚动特效是用户在滚动页面的过程当中，页面中不同元素随之进行不同速率的运动，所营造出的接近3D的视觉效果。设计中增添音频和视觉为内容赋予了更多的生机，传达出许多纯文字无法捕捉到的内容。滚动视差以步步推进的方式传达出内容，以吸引人们阅读，它利用了网页的优势呈现出非常棒的视觉效果。
滚动视差设计特别适合用来叙述一些细腻内容，随着内容慢慢铺开，通过设计能使得内容变得更加鲜活。滚动视差能够突出故事内容，并把你吸引到它的叙述中。优秀的设计能够使得每一页的衔接自然流畅，使你在下滑页面的过程中更加专注于内容。
我收集了一些非常好的滚动视差设计案例来帮助大家设计出属于自己的网页效果。
Snow Fall：The Avalanche at Tunnel Creek(http://www.nytimes.com/projects/2012/snow-fall/index.html#/?part=tunnel-creek) 是一部引人入胜的杰作。这是2012年华盛顿雪崩的悲惨故事，这个故事的每个部分都有自己独立的页面。
这是一份引人入胜的读物，配有音频和视频媒体，可以让大家更全面的了解那悲惨的一天到底发生了什么。我们不仅能读到相关人员的故事，还能了解导致这次雪崩的地形和天气条件。
这是一种多媒体讲故事的方式，它揭示了本质原因，是什么促使了人们在寻求刺激的过程中不顾危险。
我们经常都喜欢拿千禧一代来开玩笑，但这一代确实面临着一些重大的挑战。 Millennials are screwed（https://highline.huffingtonpost.com/articles/en/poor-millennials/）这个网站通过一位年轻人的眼睛向我们展示了这个世界，以便清楚地了解他们所面临的挑战。
故事是由一位千禧一代的自述，用一种比较幽默的手段讲述了他们所面临的财务困境和其他现实问题。
这个网页是通过怀旧的视频动画游戏，结合像素化的图形和一些有趣的视觉效果来呈现的。它抓住了千禧一代人的复杂情感，同时也是为了让年轻人更容易接受和阅读。
读了网页上的内容，不禁让我对千禧一代产生了更多的同情。这就是一个很好的例子，使用智能，有趣的网页设计来连接更多的读者。
对大多数人来说，世界标准时间（UTC）并不是一个特别吸引人的话题。但Zach Holman做了一个网站，解释了它的工作原理以及使用时的复杂性。他的网站风趣幽默，把枯燥的理论讲的通俗易懂。
在每一个分割内容之间会插入一些动态视频背景，这些设计既特别，又不会令人生厌。这些惊艳的视觉冲突吸引了读者的注意力，让大家有兴趣接下来会出现什么样的炫目视觉效果。
任何读过枯燥技术文章的人，都可能会昏昏入睡。这个案例在说明一件事，那就是富有创造力的展现形式可以将最枯燥的话题变得有趣。对于那些对程序设计不感兴趣的人来说，这个网站应该算是一份非常有吸引力的读物了。
慢慢滚动鼠标浏览网页设计和艺术史（https://webflow.com/web-design-art-history）就像真的是在一座博物馆里消磨时间（译者注：我滑了好久）。每一个内容区间都像一个画廊分支，展示了某一段时间内的流行趋势。这个网站，记录了艺术的演变。
由于网页设计和视觉艺术有一些共通的语言，熟悉艺术史可以启发自己创作出优秀的作品。如果你对艺术和设计感兴趣，这个网站将会是一份很好的入门读物。
滚动视差设计的使用打破了传统故事展示的局限，充分使用网页这种载体将创意发挥到极致。
Introduction to Interactions 2.0(https://webflow.com/ix2) ，这个网站带着读者围观了从web最初始的阶段一直到现如今不会写代码也能创造出很棒的网站的突破。网站里包含了许多令人愉悦的网页效果，回看这些历史不禁感叹，趋势的更新迭代是有快啊。
滚动视差设计是讲述线性故事的完美媒介——还有什么比时间流逝更线性呢？
从24小时直至宇宙的尽头，在 Time in Perspective(https://wfs2.webflow.io/time-in-perspective)滚动触发动画时间轴，显示每一个阶段。这是一个很好的例子，使用网页设计并不仅仅是为了营销，设计同时也是创新教育的有力工具。
If the Moon were only 1 pixel(http://joshworth.com/dev/pixelspace/pixelspace_solarsystem.html) 网站使用的是一种横轴动画，带你穿越浩瀚的宇宙。Josh Worth在向女儿解释到达火星需要多长时间后创建这个网站，他想知道自己是否能用电脑来绘制太空地图。这个网站很好的聚焦于空间的深度，帮助我们理解宇宙的深邃。Josh Worth用一个像素代表了月球，然后显示了与其相关的一切物体。
这个项目是另一个很好的例子，说明好的设计可以让学习变得更有吸引力。
我们每天接收到的信息太多了，从海量的信息中，我们很难保证知道最新的状态。华盛顿邮报的追踪伊斯兰国（http://www.washingtonpost.com/wp-srv/special/world/islamic-state-tracker/?noredirect=on）展示了伊斯兰国的历史和当前发展。
右侧的界面，滚动可以浏览时间轴，而在界面的左侧则在地图上突出显示故事发生的位置。点击地图上的点，你就会看到那个位置的具体情况。将位置映射到每个事件可以更深入地了解每个区域。
马克吐温有句名言：“解释幽默就很像解剖一只青蛙，你在这个过程中是能学到很多，但最终你却把它杀死了。”但遗憾的是，对于他来说，没能等到数字时代的到来。
之前给出的很多案例都在讨论把滚动效果应用于时间轴相关的内容，喜剧表演是一种叙事性的表演，节奏和组合的重要性与真正的笑话一样。
Ali Wong Structure of Stand-Up Comedy是对Ali Wong最新脱口秀《Baby Cobra》的分析，它分析节目中的每一个瞬间，每一个笑话，以显示最大的笑点到底在哪里。这是一个关于时间和节奏如何能够带来更好效果的有趣研究，同时也让我们了解到Ali Wong为什么能成为如此出色的作家和演员。
我们已经了解了如何使用不同滚动效果来讲述不同类型的故事，以及其中包含的一些设计方法。为了帮助大家能做出自己的滚动视差效果，我收集了一些工具来帮助你。如果想在设计工作时进行尝试，Webflow可能是最好的选择。
滚动时以不同的速度移动元素是创建视差的一种方式。视差是一个简单的效果，在故事中创造多维度的动画，促使人们继续阅读。
在“网页设计和艺术史”的网页中使用了视差效果来展现这些几何图形。
打开这个教程来开始制作这个效果。
在设计中使用滚动触发的进度条，是一种向人们展示所处位置并不断推动他们前进的方式。这个蓝色进度条固定在页面的顶部，平滑的动画从0扩展到100%。它提升了阅读体验，也成为了更好的导航。
当一个设计有太多的静态内容时，阅读起来会很累。在滚动模式下，长篇故事讲述的过程中，动画提供了一个很好的休息时间，随着内容的淡入淡出，在阅读体验上做到了最好。
这种效果可以应用于文本或者视觉效果，我们在Graphic design archive中使用这种效果，标志着一个新的内容块的开始。
我们在这里提供了一份教程帮助大家理解这种效果的实现方法。
当页面上有一个闲置的设计元素时，比如标题，为什么不给它一些活力呢？水平动画唤醒了这些沉睡的设计元素，给予它们新的生命。以上面给出的例子来说明，水平移动标志着故事的开始，“Let’s go outside”更具有吸引力。
这里我们也提供了一份教程。
水平滚动是一个不错的改变，它会让你的注意力集中到内容上，并打破传统的垂直布局。
Proud and Torn是一个关于匈牙利历史的网站，使用水平滚动来突出它所涵盖的不同时代。
回顾我们之前讨论过的艺术网页设计和艺术史——我们使用水平滚动作为另一种让人们保持活跃和参与的方式。
我们这边有给出一个关于水平滚动的教程将让能设计出属于自己的网站。
Pudding是Ali Wong的喜剧作品原创网站，上面有关于如何设计“粘性定位”的教程。粘性定位是将一个元素暂时放在一个设计中，引起人们的注意，继续滚动一会儿，它就会固定在页面的某一个位置。我们都是上面那份教程的粉丝，它以一种容易理解的方式分解了这个过程，这些都是通过滚动来实现的效果。
（译者注：sticky 是css position中的一种新增属性，相当于relative和fixed的结合体。这个属性的表现就是现实中你见到的吸附效果。）
我们刚才讨论了粘性定位，那做出一个粘性侧边栏效果又会如何呢？
滚动一段时间后，侧边栏就会固定在某一个位置，用这种效果来做导航实在是非常好用。
这里也提供一个小教程给大家作为参考，以方便在自己的项目中使用这种效果：https://university.webflow.com/article/position-sticky
网页已经改变了讲故事的方式。有了动画，特效和互动，阅读不再是被动的体验。滚动视差是一种多媒体的体验，可以激发更深层次的思考和理解。它展示了很多不能单独用语言来表达的东西，使得读者也成为一个积极的参与者。
原文：https://webflow.com/blog/scrollytelling-guide
作者：Jeff Cardello
译者：彩云Sky，公众号：彩云译设计
本文由 @彩云Sky 翻译发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
*请认真填写需求信息，我们会在24小时内与您取得联系。
