Stellar.js插件实现视差滚动效果

Stellar.js使用步骤

1.html部分,引入jquery.js文件,jquery.stellar.js文件

   <script src="js/jquery.min.js">script>
   <script src="js/jquery.stellar.js">script>

在要做视差滚动效果的背景添加data-stellar-background-ratio属性

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

2.css部分,背景添加background-attachment: fixed属性

.qq_sound .bg,.qq_file .bg,.qq_interest .bg{
  background-attachment: fixed;
}

3.js部分,初始化插件

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

你可能感兴趣的:(jQuery插件)