澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

滚动视差,页面视觉差

滚动视差?CSS 不在话下

2018/08/10 · CSS · 3 评论 · 滚动视差

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

background-attachment 属性用于指定背景图片相对于视口是固定的,还是与元素或其内容一起滚动。

相当长的一段时间,现在网站与所谓的“视差”效果一直很受欢迎。 万一你没有听说过这种效果,不同的图像,在不同的方向移动或层主要包括。这导致了一个很好的光学效应,使参观者的注意。

background-attachment属性,background属性

前提是定义了background-image属性,然后用background-attachment来指明背景图的位置是固定于视口的,还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。

取值:

scrool:默认值,背景随页面滚动而移动,即背景和内容绑定。

fixed:背景图相对于视口固定,所以随页面滚动背景不动,相当于背景被设置在了body上。

local:背景图相对于元素内容固定

inhert:继承,没什么说的。

该属性可以应用于任何元素。

何为滚动视差

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的网站应用了这项技术。

澳门新浦京娱乐场网站 1

通常而言,滚动视差在前端需要辅助 Javascript 才能实现。当然,其实 CSS 在实现滚动视差效果方面,也有着不俗的能力。下面就让我们来见识一二:

这个就厉害了,可以让我们的页面变得更加炫酷。

在网页设计中,为了实现这是简单的一个网站添加一个jQuery插件的最常见的方式。这样做,不幸的是,有几个缺点。这些插件是将事件处理程序附加到滚动事件的窗口目标这导致了事件处理通过JavaScript吨(处理滚动事件可以很容易造成性能问题,应仔细考虑)。将上述层,图像背景的位置获得计算和设置为不同的元素,然后另外的原因很多DOM操作。

一、scroll【背景图滚动】

设置background-attachment:scroll,背景图是相对于元素自身固定,内容动时背景图也动。附加到元素的border。

澳门新浦京娱乐场网站 2local

Note:

对于scroll,一般情况背景随内容滚动,但是有一种情况例外。

对于可以滚动的元素(设置为overflow:scroll的元素)。当background-attachment设置为scroll时,背景图不会随元素内容的滚动而滚动。

澳门新浦京娱乐场网站 3

 

认识 background-attachment

background-attachment 算是一个比较生僻的属性,基本上平时写业务样式都用不到这个属性。但是它本身很有意思。

background-attachment:如果指定了 background-image ,那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。

单单从定义上有点难以理解,随下面几个 Demo 了解下 background-attachment 到底是什么意思:

很多网站使用固定的图像在页面上创建一个漂亮的滚动效果:背景图像相对于视口是固定的,它首先在元素内可见,一旦用户开始滚动,元素就会向上/但是背景图像保持在其固定位置,因此在某些点处,元素将到达其背景图像在其中不再可见的位置,因为它不再在元素的背景绘画区域中。

总之:视差用JavaScript可以减少一个网站的滚动性能很快。

二、local【滚动元素背景图滚动】

对于可以滚动的元素(设置为overflow:scroll的元素),设置background-attachment:local,则背景会随内容的滚动而滚动。

因为背景图是相对于元素自身内容定位,开始固定,元素出现滚动条后背景图随内容而滚动。

澳门新浦京娱乐场网站 4<style> div{ width: 200px; height: 350px; border: 1px solid red; background-image: url(img/img_tree.png); background-repeat: no-repeat; background-attachment: local; overflow: scroll; line-height: 1.5; } </style> <body> <div> 1内容超出会出现滚动条 2内容超出会出现滚动条 3内容超出会出现滚动条 4内容超出会出现滚动条 5内容超出会出现滚动条 6内容超出会出现滚动条 7内容超出会出现滚动条 8内容超出会出现滚动条 9内容超出会出现滚动条 10内容超出会出现滚动条 11内容超出会出现滚动条 12内容超出会出现滚动条 13内容超出会出现滚动条 14内容超出会出现滚动条 15内容超出会出现滚动条 16内容超出会出现滚动条 17内容超出会出现滚动条 18内容超出会出现滚动条 19内容超出会出现滚动条 20内容超出会出现滚动条 </div> </body> View Code

澳门新浦京娱乐场网站 5

background-attachment: scroll

scroll 此关键字表示背景相对于元素本身固定, 而不是随着它的内容滚动。

它拥有三个属性值:**scroll(默认) | fixed | local **

background-attachment: fixed

什么只有很少人会知道,这种影响可以通过CSS,太。看看下面的例子:

See the Pen Parallax with background-attachment : fixed by Stefan Judis (@stefanjudis) on CodePen.

得到这个视差效果,背景图像被放置在不同的元素。这些元素需要另外定义background-attachment: fixed。通过定义background-attachment和任何背景图像的定位是可以改变的。

属性的初始值scroll基本上,这意味着图像的位置是固定的元素。没有任何花哨,而我们都知道这样的行为。在一个网站和元素用户滚动向上和向下等动做背景图像。

它变得有趣的设置background-attachment:fixedfixed的定义了背景图像的位置是不固定的依赖元素而固定到视口。这意味着图像会在视觉上相同的位置,无论怎么滚动会做。这导致了很好的视觉视差效应。

让我们在实际的实现快速检查:

<!-- Four containers for setting the background images -->
<div class="parallax">
  <div class="bg__foo">foo</div>
  <div class="bg__bar">bar</div>
  <div class="bg__baz">baz</div>
  <div class="bg__bazz">bazz</div>
</div>

// setting base styles to image containers
[class*="bg__"] {
  height: 50vh;

  text-indent: -9999px;

  /* fix background */
  background-attachment: fixed;

  /* center it */
  background-position: center center;

  /* Scale it nicely to the element */
  background-size: cover;

  /* just make it look a bit better ;) */
  &:nth-child(2n) {
    box-shadow: inset 0 0 1em #111;
  }
}

.bg__foo {
  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg
  );
}

.bg__bar {
  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax2.jpg
  );
}

.bg__baz {
  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg
  );
}

.bg__bazz {
  height: 100vh;

  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg
  );
}

 

 

几乎全球兼容性。它已经在IE9和Android 2.1支持。

三、fixed:【背景图静止】

背景图片相对于视口固定,就算元素有了滚动条,背景图也不随内容移动。

fixed用法如下:

<style>
body{
    background-image: url(img/cartooncat.png);
    background-position: bottom left;
    background-attachment: fixed;
    background-repeat: no-repeat;
    height: 1000px;
}
</style>
</head>
<body>
    <h1>下拉看效果:</h1>
</body>

澳门新浦京娱乐场网站 6

或者看mozilla的demo。

这里我要强调一点我的看法

给任何元素的背景图设置background-attachment: fixed;效果都是一样的,都是相对于视口,因为一个网页只有一个视口,该背景和元素已经没关系了,要说有关大概也只是元素不可见则背景图不可见。

而这个视口是什么呢?这里推荐一篇文章《像素与浏览器视口的细节》

background-attachment: local

local 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动, 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

  • scroll:此关键字表示背景相对于元素本身固定, 而不是随着它的内容滚动(对元素边框是有效的)。

总结

我个人比较喜欢CSS解决JavaScript解决方案和这是我的偏好一个完美的例子。有没有逻辑,没有额外的DOM操作的需要,这使得整个解决方案,很好。但还是有一件事要记住当处理视差效应。

即使这个CSS的解决方案有很多事情要做。 background-attachment: fixed将导致更多的画,需要通过浏览器完成,这可能会影响性能和可能降低你的FPS滚动(记得60fps的目标吗?)。所以保持一个眼睛的FPS计在Chrome做这些事情时,总是一个好主意。

四、多背景图background-attachment

也可以为多个背景图设置background-attachment

body {
  background-image: url("img1.png"), url("img2.png");
  background-attachment: scroll, fixed;
}

background-attachment: fixed

fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。

注意一下 scroll 与 fixed,一个是相对元素本身固定,一个是相对视口固定,有点类似 position 定位的 absolute 和 fixed

可以感受下 3 种不同取值的不同效果:
CodePen Demo — bg-attachment Demo

  • local:此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动, 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
  • fixed:此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。

五、资源链接

w3c background-attachment

像素与浏览器视口的细节

a table of two viewports

前提是定义了background-image属性,然后用background-attachment来指明背景图的位置是固定于视口的,还是随着...

使用 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;
}

效果如下:

澳门新浦京娱乐场网站 7

CodePen Demo — https://codepen.io/Chokcoco/pen/JBaQoY

嗯?有点神奇,为什么会是这样呢?可能很多人会和我一样,第一次接触这个属性对这样的效果感到懵逼。

我们把上面 background-attachment: fixed 注释掉,或者改为 background-attachment: local,再看看效果:

澳门新浦京娱乐场网站 8

CodePen Demo — bg-attachment:local

这次,图片正常跟随滚动条滚动了,按常理,这种效果才符合我们大脑的思维。

而滚动视差效果,正是不按常理出牌的一个效果,重点来了:

当页面滚动到图片应该出现的位置,被设置了 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;
}

效果如下:

澳门新浦京娱乐场网站 9

CodePen Demo

结合这张 GIF,相信能对 background-attachment: fixed 有个更深刻的认识,移动的只有视口,而背景图是一直固定死的。

综上,就是 CSS 使用 background-attachment: fixed 实现滚动视差的一种方式,也是相对而言比较容易的一种。当然,background-attachment: fixed 本身的效果并不仅只是能有用来实现滚动视差效果,合理运用,还可以实现其他很多有趣的效果,这里简单再列一个:

滚动视差,页面视觉差。 

如果我们设置为默认值 scroll 的话,当我们滚动我们的滚动条,那么我们的图像也会跟随着一起滚动。但是,这种情况除外:对于可以滚动的元素(设置为 overflow:scroll 的元素)。当 background-attachment 设置为 scroll 时,背景图不会随元素内容的滚动而滚动。

background-attachment: fixed 实现图片点击水纹效果

利用图片相对视口固定,可以有很多有趣的效果,譬如下面这个,来源于这篇文章CSS Water Wave (水波效果):

澳门新浦京娱乐场网站 10

CodePen Demo — bg-attachment:fixed Wave

利用图片相对视口固定的特性实现点击的水纹效果。

上面这个效果有点瑕疵,图片在放大容器变大的过程中发生了明显的抖动。当然,效果还是可以的,background-attachment 还有很多有意思的效果可以挖掘。

当我们设置 local 值时,我们的背景会随内容的滚动而滚动。它与 scroll 的区别在哪里呢?比如我们滚动滚动条时,如果是 scroll 它就会一直向上,直到消失在我们的视野中,;而 loacl 是因为背景图是相对于元素自身内容定位,开始固定,元素出现滚动条后背景图随内容而滚动。

使用 transform: translate3d 实现滚动视差

言归正传,下面介绍另外一种使用 CSS 实现的滚动视差效果,利用的是 CSS 3D。

原理就是:

  1. 我们给容器设置上 transform-style: preserve-3d 和 perspective: xpx,那么处于这个容器的子元素就将位于3D空间中,
  2. 再给子元素设置不同的 transform: translateZ(),这个时候,不同元素在 3D Z轴方向距离屏幕(我们的眼睛)的距离也就不一样
  3. 滚动滚动条,由于子元素设置了不同的 transform: translateZ(),那么他们滚动的上下距离 translateY 相对屏幕(我们的眼睛),也是不一样的,这就达到了滚动视差的效果。

关于 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,滚动滚动条,效果如下:

澳门新浦京娱乐场网站 11

CodePen Demo — CSS 3D parallax

很明显,当滚动滚动条时,不同子元素的位移程度从视觉上看是不一样的,也就达到了所谓的滚动视差效果。

最后是 fixed,也就是背景图静止不动,不管你怎么滑动滚动条,你的内容将一直滚动不见,但背景却依然在他的位置上。这个和我们设置 position: fixed 是一个意思。只不过这里的背景时显示在元素的后面,而 position 是显示在最前面的。

滚动视差文字阴影/虚影效果

澳门新浦京娱乐场网站,那么,运用 translate3d 的视差效果,又能有一些什么好玩的效果呢?下面这个滚动视差文字阴影/虚影效果很有意思:

澳门新浦京娱乐场网站 12

CodePen Demo — CSS translate3d Parallax

当然,通过调整参数(perspective: ?px 以及 transform: translateZ(-?px);),还能有其他很有意思的效果出现:

澳门新浦京娱乐场网站 13

CodePen Demo — CSS translate3d Parallax 2

是不是很有电影开片的厂商 LOGO 的特效的感觉 澳门新浦京娱乐场网站 14 。

师父领进门,修行在个人,怎么制作更好更有意思的效果还是需要花时间钻研和琢磨,这里我仅仅是抛砖引玉,希望能见到更多 Nice 的效果。

好了。。这节没有图不好讲述,希望我讲清楚了吧。。因为它需要滚动条,没有办法截图。所以希望大家多多包涵,自己去网上找找案例来感受下,谢谢。

最后

感谢耐心读完。更多精彩 CSS 技术文章汇总在我的 Github — iCSS ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持我写出更多好文章,谢谢!

打赏作者

终于结束啦~开心,可以安心的睡一觉了。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

澳门新浦京娱乐场网站 15 澳门新浦京娱乐场网站 16

1 赞 4 收藏 3 评论

关于作者:chokcoco

澳门新浦京娱乐场网站 17

经不住流年似水,逃不过此间少年。 个人主页 · 我的文章 · 63 ·    

澳门新浦京娱乐场网站 18

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:滚动视差,页面视觉差