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

悠悠小仙仙

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

1.引用js 包

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

复制代码

2.引用html

1. <div class="content" id="content1">
   
2.         <p>TEXT HERE</p>
   
3. </div>
   
4. <div class="content" id="content2">
   
5.         <p>TEXT HERE</p>
   
6. </div>
   
7. <div class="content" id="content3" data-stellar-background-ratio="0.5">
   
8.         <p>TEXT HERE</p>
   
9. </div>
   
10. <div class="content" id="content4" data-stellar-background-ratio="0.5">
    
11.         <p>TEXT HERE</p>
    
12. </div>
    

复制代码

3.引用css

1. body {
   
2.     font-size: 100px;
   
3.     color: white;
   
4.     text-shadow: 0 1px 0 black, 0 0 5px black;
   
5.     text-align: center;
   
6.         line-height: 600px;
   
7. }
   
8. p {
   
9.     padding: 0 0.5em;
   
10.     margin: 0;
    
11. }
    
12. .content {
    
13.     background-attachment: fixed;
    
14. 
    
15. }
    
16. #content1 {
    
17.     background-image: url("images/1.jpg");
    
18. }
    
19. #content2 {
    
20.     background-image: url("images/2.jpg");
    
21. }
    
22. #content3 {
    
23.     background-image: url("images/3.jpg");
    
24. }
    
25. #content4 {
    
26.    background-image: url("images/4.jpg");
    

复制代码

4.js函数调用

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

复制代码

常用参数：