视差滚动(Parallax Scrolling)效果的原理和实现（转）

时间 2019-11-18

标签视差滚动 parallax scrolling 效果原理实现繁體版

原文原文链接

视差滚动（Parallax Scrolling）是指让多层背景以不一样的速度移动，造成立体的运动效果，带来很是出色的视觉体验。做为今年网页设计的热点趋势，愈来愈多的网站应用了这项技术。javascript

能够先看看效果：http://www.ok-studios.de/home/php

1、什么是视差滚动？

视差效果，本来是一个天文学术语，当咱们观察星空时，离咱们远的星星移动速度较慢，离咱们近的星星移动速度则较快。当咱们坐在车上向车窗外看时，也会有这样的感受，远处的群山彷佛没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增长场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不一样的元素位置变化的速度不一样，致使网页内的元素有层次错落的错觉，这和咱们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展现产品，从不一样的空间角度和用户体验，起到了很是不错的效果。

目前这种视差滚动效果被愈来愈多的国外网站所应用，成为网页设计的热点趋势。

经过一个很长的网页页面，其中利用一些使人惊叹的插图和图形，并使用视差滚动（Parallax Scrolling）效果，让多层背景以不一样的速度移动，造成立体的运动效果，带来很是出色的视觉体验。完美的展现了一个复杂的过程，让你犹如置身其中。厌倦了千篇一概，呆板网页设计的你不放一试。

就是固定背景不让它随着滚动轴移动，但包含背景的容器是跟着滚动的，所形成的视觉差别看起来就像跟转换场景同样。css

2、视差滚动效果的主要特色：html

一、直观的设计，快速的响应速度，更合适运用于单页面

二、差别滚动分层视差页面上不少的元素在相互独立地滚动着，若是咱们来对其它分层的话，能够有两到三层：背景层，内容层，贴图层。

3、原理

经过前景与背景在场景移动时产生不一样的视差，从而达到简单的立体效果

页面上不少的元素在相互独立地滚动着，若是咱们来对其它分层的话，能够有两到三层：背景层，内容层，贴图层java

　　差别滚动的实现规则：jquery

　　背景层的滚动(最慢)
　　贴图层(内容层和背景层之间的元素)的滚动(次慢)
　　内容层的滚动(能够和页面的滚动速度一致)

　　咱们让三个图层的滚动速度不一致，就作出了漂亮的差别滚动效果ios

一、运用大背景git

　　这些背景图像通常是高分辨率，大图，覆盖整个网站。高清照片是一个迅速抓住观众的好方式，能够产生极具冲击力的视觉效果,用户的视线会不自觉地落在宽大的背景上github

　　注意：web

　　1. 一、背景图的色彩、内容在选择时要十分讲究，前提是不要破坏用户的体验，否则再漂亮的照片也是枉然。

　　图片类型最好选取趋向于一些比较柔和、略带透明的一类，不要影响到网站主体内容的阅读，识别，讲究协调。

　　1.二、以大量图片为特点的页面应该考虑图像的预加载问题，以便为用户提供更好更流畅的视觉体验.

二、你也能够用简单的配色方案

没有比纯色的背景更直观更简洁。纯色能够有不少种表达方式，一个视差区间内颜色最好保持使用2到3种，咱们能够调整颜色的透明度，来达到各类视觉效果

三、定位好背景层，贴图层和内容层之间的关系

根据页面自身的功能来定义是否须要贴图层，贴图层的存在是为了更有效的传达视觉效果，但若是它成为了干扰，就会违背了咱们使用的初衷

　　内容层的展示是最主要的，不管背景层和贴图层有多少花哨，在设计师设计过程当中，内容层对用户的展现是最优先的

四、讲故事

　　有力的表现、简约的风格和设计的美感共同构成了一个出色地交互式叙事体验。咱们常常听到这样的话：内容是王道，技术只是实现内容的一种工具。当你可以成功地把有力的信息和漂亮的执行力结合起来，你就能创造出人们喜欢而且享受其中的体验。　————Wieden+Kennedy

　　TWO 数据可视化——信息图形设计　故事1 传统水银体温计和大字母水银体温计　　

4、实现方法和工具

一、在CSS中定义背景滚动方式的属性是backgroud-attacthment

background-attachment -- 定义背景图片随滚动轴的移动方式

取值: scroll | fixed | inherit
- scroll: 默认值。背景图像会随着页面其他部分的滚动而移动。
- fixed: 当页面的其他部分滚动时，背景图像不会移动。
- inherit: 规定应该从父元素继承 background-attachment 属性的设置。
- 初始值: scroll
- 继承性: 否
- 适用于: 全部元素

附带w3c的连接：http://www.w3school.com.cn/css/pr_background-attachment.asp

浏览器的支持性：

测试了chrome,opera,safari,firefox,ie7-8都是能够的，因此就是说IE6下不行~

在IE6下使用这个属性，须要把background-attachment:fixed放置于body或html当中，就是说你说在其它标签里面是没用。上面的w3c里能够看获得效果就是由于它是放在body里的。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>滚动视觉差示例</title> <style> *{ padding:0; margin:0 } body{ text-align:center; background-attachment:fixed; } #main{ width: 1280px; margin:auto } .header{ background:#fff; padding: 10px 0 } .bg-attachment{ background:url(6.jpg) center center no-repeat; box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset; -webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset; -moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset; -o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset; -ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset; background-attachment:fixed; } .bg-attachment .shadow{ width:80%; height:700px; overflow:hidden; margin:auto; } .div2{ background:url(qingz.jpg) center center no-repeat; background-attachment:fixed; } </style> </head> <body> <div id="main"> <div class="header"> <img src="5.jpg"> </div> <div class="bg-attachment"> <div class="shadow"></div> </div> <div class="header"> <img src="qi.jpg"> </div> <div class="bg-attachment div2"> <div class="shadow"></div> </div> </div> </body> </html>

二、插件

Scrollorama

Javascript视差效果
Nike Better World场景的背后 一份为那些急切想重现NIKE网站滚动效果的设计师准备的教程。
用jQuery和CSS构建一个具备视差滚动效果的网站界面 一份为那些想在此领域了解的更深的设计师准备的例子和教程。
用JQuery建立一个时尚的具备视差背景的效果 一份教程，在背景上帮你添加一些滚动的云彩。
动画背景式的网页头部 用一个动画式的网页头部来让你的访问者为你欢呼吧！
视差滚动教程 一份视差效果和内容同时出现的有趣的教程。

4、超炫的视差滚动效果网站设计欣赏

GLP创意

divups

视差滚动(Parallax Scrolling)效果的原理和实现（转）

curtain.js 相似于幕布升起的效果