使用CSS3来实现滚动视差效果
这篇文章主要介绍了使用CSS3来实现滚动视差效果的教程,主要使用到了background-attachment属性,需要的朋友可以参考下
“视差(parallax)”效果现在在互联网上越来越流行了。如果你还没听说过什么是视差效果,它其实就是利用图片形成不同的层,分别以不同的速度,不同的方向移动产生的效果。这会产生出很奇妙的视觉效果,能有力的吸引住浏览者的目光。
在web设计中,最常见的实现视差效果的方式是使用jQuery插件。但这种方法有一些弊端。这些插件大多都是在window对象的scroll事件上放置监听器。这会导致JavaScript需要处理大量的事件触发(处理scroll事件很容易造成浏览器性能问题,使用时需要非常小心。)移动不同的层,计算背景的位置,设置图片的属性,这都引起了大量的DOM操作。
简言之,使用JavaScript来实现视差效果会让页面的滚动出现性能问题,出现卡顿。
background-attachment属性回顾
background-attachment -- 定义背景图片随滚动轴的移动方式
取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承
初始值: scroll
继承性: 否
适用于: 所有元素
background:背景.attachment:附着.
示例
body { background-image:url('list-orange.png'); background-attachment:fixed; background-repeat:repeat-x; background-position:center center; }
屏幕的背景图片为一条橙色线.随着滚动轴移动,橙色线的视觉位置不变.
CSS background-attachment 属性示例
使用background-attachment: fixed实现视差效果
为什么只有一小部分人知道,这种效果实际上可以用CSS实现。
为了实现视差效果,多个背景图片必须放置在不同的元素上。这些背景图需要定义成background-attachment: fixed。通过设定background-attachment,我们可以改变背景图像的效果和位置。
background-attachment的缺省值是scroll,也就是背景图片和内容的位置是相对静止的。这我们大家都见过,当我们上下滚动一个网页时,背景和内容一起滚动。
当把background-attachment设置成fixed时,事情会变得有趣。fixed是说背景图片不随内容一起滚动,而是跟窗口保持静止。也就是说,当你拖动滚动条时,背景图片没有变化。这就能够产生漂亮的视差效果。
让我看一个实际实现:
<!-- Four containers for setting the background images --> <p class="parallax"> <p class="bg__foo">foo</p> <p class="bg__bar">bar</p> <p class="bg__baz">baz</p> <p class="bg__bazz">bazz</p> </p> // 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( http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg ); } .bg__bar { background-image: url( http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax2.jpg ); } .bg__baz { background-image: url( http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax3.jpg ); } .bg__bazz { height: 100vh; background-image: url( http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg ); }
关于这种技术的浏览器兼容情况,你可以参考这里,基本上,现代浏览器和IE9+的浏览器都支持。
对我个人而言,我更喜欢CSS技术实现的视差效果,而不是用JavaScript。用CSS实现,是受浏览器原生支持,没有编程逻辑,没有对DOM额外的操作,使得整个方案非常的简洁漂亮。
即使是CSS实现的视差效果,也会给浏览器带来负担。
background-attachment: fixed会导致浏览器更多的渲染,也会影响浏览器滚动的效率。所以,开发时一定要多做测试,视性能情况而决定实现的效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
以上是使用CSS3来实现滚动视差效果的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

在 Vue.js 中使用 Bootstrap 分为五个步骤:安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选:自定义样式。可选:使用插件。

创建 Bootstrap 分割线有两种方法:使用 标签,可创建水平分割线。使用 CSS border 属性,可创建自定义样式的分割线。

要调整 Bootstrap 中元素大小,可以使用尺寸类,具体包括:调整宽度:.col-、.w-、.mw-调整高度:.h-、.min-h-、.max-h-

要设置 Bootstrap 框架,需要按照以下步骤:1. 通过 CDN 引用 Bootstrap 文件;2. 下载文件并将其托管在自己的服务器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根据需要编译 Sass/Less;5. 导入定制文件(可选)。设置完成后,即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

在 Bootstrap 中插入图片有以下几种方法:直接插入图片,使用 HTML 的 img 标签。使用 Bootstrap 图像组件,可以提供响应式图片和更多样式。设置图片大小,使用 img-fluid 类可以使图片自适应。设置边框,使用 img-bordered 类。设置圆角,使用 img-rounded 类。设置阴影,使用 shadow 类。调整图片大小和位置,使用 CSS 样式。使用背景图片,使用 background-image CSS 属性。

答案:可以使用 Bootstrap 的日期选择器组件在页面中查看日期。步骤:引入 Bootstrap 框架。在 HTML 中创建日期选择器输入框。Bootstrap 将自动为选择器添加样式。使用 JavaScript 获取选定的日期。

如何使用 Bootstrap 按钮?引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本
