视差滚动
-
插件
Stellar 插件
-
描述
- 视差滚动 指网页滚动过程中,多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术 主要核心就是 前景 和 背景 以不同的速度移动,从而创造出 3D 效果。
-
特性
- 视差滚动效果酷炫,适合于个性展示的场合
- 视差滚动徐徐栈开,适合于娓娓道来,讲故事的场合
- 视差滚动容易迷航,需要具备较强的导航功能
-
原理
- 传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的,而视差滚动则是在滚动的时候,内容和多层次的背景实现或不同速度,或不同方向的运动。有的时候也可以加上一些透明度、大小的动画来优化显示。利用
background-attachment
属性来实现
- 传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的,而视差滚动则是在滚动的时候,内容和多层次的背景实现或不同速度,或不同方向的运动。有的时候也可以加上一些透明度、大小的动画来优化显示。利用
语义化标签
- 兼容
document.createElement('')
并且设置块级元素
- 插件
- html5shiv.js
- 必须在头部引入,这样可以做到在加载页面之前解析
- 使用条件注释
- 固定语法
lt(小于)
gt(大于)
lte(小于等于)
gte(大于等于)
<!--[if lt IE 9]> <script src="bower_components/html5shiv/dist/html5shiv.js"></script> <![endif]-->
- 固定语法