用 Stellar.js 制作视差滚动效果

用 Stellar.js 制作视差滚动效果

视差滚动

视差滚动是当用户滚动页面时，前景和背景以不同的速度移动，从而创造出3D效果。

Stellar.js

stellar.js 是一个 jQuery插件，能很容易地给网站添加视差滚动效果。

步骤

1. html中的背景图标签

<div class="bg" data-stellar-background-ratio="0.3"></div>

2. css中对应加入样式

background-attachment: fixed;
height：（比实际图片高度要小 才有视差）px;

3. 引入jQuery和stellar

<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.stellar.js"></script>

4. 启动效应。

$.stellar({
    horizontalScrolling: false,
    responsive: true
});