基于jquery Stellar.js实现 网站视差滚动效果

stellar.js是一个 jQuery插件,能很容易地给网站添加视差滚动效果。 虽然已经停止了维护,但它非常稳定,与最新版本的jQuery兼容。

http://markdalgleish.com/projects/stellar.js/ 官网

1.引用js 包


2.引用html

TEXT HERE

TEXT HERE

TEXT HERE

TEXT HERE

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
	});

常用参数:

基于jquery Stellar.js实现 网站视差滚动效果_第1张图片




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