滚动视差效果——background-attachment
2024-09-14 17:49:43
滚动视差效果的实现原理是在同一个页面上将页面元素分为多层,例如可以分为背景、内容、贴图层,在滚动页面的时候让三者滚动的速度不一,从而在人的视觉上能够形成一种立体的近似效果。最近在做一个项目wiki的时候要用到滚动视差的东西,所以顺便记录一下。一般来说背景层是滚动里面最慢的,内容层可以和页面的滚动速度一致。
较为简单的滚动视差效果两层就可以了,一个背景,然后在背景上滚动内容。CSS中用来定义背景滚动属性的是background-attachment属性,具体取值如下:
- scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。
- fixed: 当页面的其余部分滚动时,背景图像不会移动。
- inherit: 规定应该从父元素继承 background-attachment 属性的设置。
- 初始值: scroll
- 继承性: 否
- 适用于: 所有元素
在body中定义背景图像以及属性时设置背景为固定,那么在背景上的内容就可以相对进行滑动,就能够初步实现一个滚动视差的效果。
body{
text-align:center;
background-attachment:fixed;
}
不过CSS虽然简单但是实现的效果确实是很有限的。一个貌似只能做出两个图层的效果。
另一种用CSS实现滚动视差的做法是用百分比对页面中的元素进行定位,从而在调整页面大小的时候能够出现元素间相对移动的效果。当然,如果加上CSS3中的transition能够使得背景进行移动的话也能够实现动态的滚动效果。有兴趣的可以去一试。
所以说滚动视差的实现实现最好的还是JS进行,比如JQUERY的很多插件就实现了这么些的功能。O(∩_∩)0
最新文章
- WP-Cumulus插件
- 模板:qsort+bsearch应用
- .bat批处理脚本让cmd命令行提示符cd到工作目录 (转)
- HDU 5726 GCD(DP)
- c#模拟js escape方法(转)
- 本地存储 web storage
- 关于 Eclipse中的Web项目 部署的文件位置 查看jsp源码的部署位置
- 第一次app经验
- Mysql中设置指定IP的特定用户及特定权限
- Bootstrap3基础 引入本地的bootstrap
- 在 System.Web.Mvc.DefaultModelBinder.ConvertProviderRe
- python eric6 IDE
- uva 11183 Teen Girl Squad
- zsh:no matches found 问题解决
- DS哈希查找--线性探测再散列
- ArcMap 导入Excel坐标数据
- Windows Server 2008 R2 3389端口更改
- 深入理解java虚拟机---java内存区域与内存溢出异常---2堆栈溢出
- C#简单工厂模式(学习Learning hard讲解笔记)
- rename 批量重命名