当前位置: 首页 > 工具软件 > Stellar.js > 使用案例 >

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

有玄天
2023-12-01

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
});
 类似资料: