stellar.js 视差滚动插件

视差滚动插件

视差滚动(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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值