视差滚动插件
视差滚动(Parallax Scrolling)指网页滚动过程中,多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术
主要核心就是前景和背景以不同的速度移动,从而创造出3D效果。 这种效果可以给网站一个很好的补充。
下载地址
https://github.com/markdalgleish/stellar.js
特性
视差滚动效果酷炫,适合于个性展示的场合。
视差滚动徐徐展开,适合于娓娓道来,讲故事的场合。
视差滚动容易迷航,需要具备较强的导航功能。
原理
内容和多层次的背景实现或不同速度,或不同方向的运动。
利用background-attachment属性实现。
background-attachment: fixed || scroll || local
Stellar.js是什么?
[stellar.js]是一个 jQuery插件,也就是基于jQuery,能很容易地给网站添加视差滚动效果。 这个插件在jQuery插件库里很流行。
http://markdalgleish.com/projects/stellar.js/ 官网(英文文档)
引用 js包
<script src="path/to/jquery/jquery.min.js"></script>
<script src="path/to/jquery.stellar.min.js"></script>
引用html
<div class="content" id="content1">
<p>TEXT HERE</p>
</div>
<div class