视差滚动插件之Stellar

视差滚动（Parallax Scrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术

原理

传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，而视差滚动则是在滚动的时候，内容和多层次的背景实现或不同速度，或不同方向的运动。

有的时候也可以加上一些透明度、大小的动画来优化显示。

利用background-attachment属性实现。

background-attachment: fixed || scroll || local

Stellar.js是什么？

[stellar.js]是一个 jQuery插件，能很容易地给网站添加视差滚动效果。 尽管已经停止了维护，但它非常稳定，与最新版本的jQuery兼容，很多开发者也在使用它。 这个插件在jQuery插件库里很流行。

官网

引用 js包

复制代码

引用html

    
    
     
TEXT HERE
    
    
    
     
TEXT HERE
    
    
    
     
TEXT HERE
    
    
    
     
TEXT HERE
    
    
    
     
TEXT HERE
    
    
    
     
TEXT HERE
    
 复制代码

引入CSS

body {    font-size: 20px;    color: white;    text-shadow: 0 1px 0 black, 0 0 5px black;}p {    padding: 0 0.5em;    margin: 0;}.content {    background-attachment: fixed;    height: 400px;}#content1 {    background-image: url("xxx.jpg");}#content2 {    background-image: url("xxx.jpg");}#content3 {    background-image: url("xxx.jpg");}#content4 {   background-image: url("xxx.jpg");}#content5 {   background-image: url("xxx.jpg");");}#content6 {    background-image: url("xxx.jpg");}复制代码

js调用函数

$.stellar({    horizontalScrolling: false,    responsive: true});复制代码

详细参数