利用 background-attachment 属性和 stellar.js 实现视差效果

利用 CSS 中的 background-attachment 属性和 stellar.js 插件可以实现比较炫酷的视差效果,具体效果可以先去 QQ官网 (可能会改版)或者笔者的 个人网站 去看看
笔者以一个简单的示例分享一下实现过程,希望能对大家有所帮助

实现步骤

首先新建一个 html 文档,添加三个 div 元素

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

然后设置 div 的样式,给 div 分别添加背景图,需要注意的是 background-attachment 属性已经包含在 background 属性中了,对应的属性值是 fixed(值必须设置成 fixed,否则会没有效果)

.div1 {
  height: 100%;
  background: url(img/timg1.jpeg) no-repeat fixed center 0;
}
.div2 {
  height: 100%;
  background: url(img/timg2.jpeg) no-repeat fixed center 0;
}
.div3 {
  height: 100%;
  background: url(img/timg3.jpeg) no-repeat fixed center 0;
}

完成前两步后的效果见 Demo1
是不是发现跟 QQ 官网和我的个人网站不太一样,在鼠标滚动的时候发现 div 的背景图定死了
接下来通过 stellar.js 让 div 的背景图缓动起来

首先 html 中引入 stellar.js 插件,并且初始化(具体配置项参考 stellar.js 官网)

<!--
插件基于 jQuery 2.x,所以要先引入 jQuery
若使用 jQuery 3.x 还需要引入 jquery migrate 插件
-->
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="stellar.js"></script>
<script> 
  $.stellar({
    horizontalScrolling: false
  });
</script>

然后在 div 自定义属性上传入参数,0.1 表示背景按正常滚动速度的 0.1 倍

<div class="div1" data-stellar-background-ratio="0.1"></div>
<div class="div2" data-stellar-background-ratio="0.1"></div>
<div class="div3" data-stellar-background-ratio="0.1"></div>

使用 stellar.js 后的最终效果见 Demo2

提示

  • div 背景图可以缓动是由于 stellar.js 会在你滚动鼠标的时候修改 background-position 属性
  • stellar.js 还有其他的配置项和自定义属性以及其他用法(不止作用于 background-image , 还可以作用于绝对定位元素和固定元素),本文不做详细介绍,有兴趣的请戳 官方文档
除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1003.html
京ICP备19044523号-1