视差滚动

视差滚动

• 插件

  • 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]-->