51Testing软件测试论坛

标题: 基于jquery Stellar.js实现网站视差滚动效果 [打印本页]

作者: 悠悠小仙仙 时间: 2019-1-29 15:57
标题: 基于jquery Stellar.js实现网站视差滚动效果
stellar.js是一个 jQuery插件，能很容易地给网站添加视差滚动效果。虽然已经停止了维护，但它非常稳定，与最新版本的jQuery兼容。

1.引用js 包

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

复制代码

2.引用html

<div class="content" id="content1">
<p>TEXT HERE</p>
</div>
<div class="content" id="content2">
<p>TEXT HERE</p>
</div>
<div class="content" id="content3" data-stellar-background-ratio="0.5">
<p>TEXT HERE</p>
</div>
<div class="content" id="content4" data-stellar-background-ratio="0.5">
<p>TEXT HERE</p>
</div>

复制代码

3.引用css

body {
font-size: 100px;
color: white;
text-shadow: 0 1px 0 black, 0 0 5px black;
text-align: center;
line-height: 600px;
}
p {
padding: 0 0.5em;
margin: 0;
}
.content {
background-attachment: fixed;
}
#content1 {
background-image: url("images/1.jpg");
}
#content2 {
background-image: url("images/2.jpg");
}
#content3 {
background-image: url("images/3.jpg");
}
#content4 {
background-image: url("images/4.jpg");

复制代码

4.js函数调用

$.stellar({
horizontalScrolling: false, //设置垂直滚动视差效果
responsive: true
});

复制代码

常用参数：

[attach]121449[/attach]

欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)