jQuery和CSS3网页固定背景视觉差特效插件

柔光的暖阳◎ 2022-08-05 13:10 145阅读 0赞

这是一款非常实用的jQuery和[CSS3][]网页固定背景视觉差特效插件。该固定背景特效可以在页面中固定某些元素，在页面滚动的时候可以修改这些元素的视觉效果，从而制作出一种滚动视觉差的特效。   
  
该固定背景视觉差特效的效果都是使用CSS3来完成的，jQuery代码只是用于管理上下导航按钮的事件。该效果主要使用CSS的background-attachment属性来实现。在例子中，使用一幅手机的图片作为固定位置元素，在页面滚动时，除了它所有的页面元素都在滚动。这个效果的小技巧是使用不同颜色的尺寸相同的图片，将它们固定在页面的相同位置上。  
  
  
  
![assets-needed.gif][]

[查看演示][Link 1]   下载插件 ![zip.gif][] [201503262021.zip][] (505.84 KB, 下载次数: 36)

使用方法  
  
  
HTML结构  
  
  
下面来看一些它的制作方法。HTML结构并不复杂：每一个section都包含一个带有标题和文本的.content元素。class .img-1、.img-2等用于在CSS中设置不同的背景图片。.cd-vertical-nav是上下导航按钮，只在大屏幕设备中可见。data-type用于在jQuery中识别是否是sections/items项。

1.  <section class="cd-fixed-background img-1" data-type="slider-item">  
    
2.    <div class="cd-content">  
    
3.      <h2>Title here</h2>  
    
4.      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>  
    
5.    </div>  
    
6.  </section>  
    
7.      
    
8.  <section class="cd-fixed-background img-2" data-type="slider-item">  
    
9.      
    
10. </section>  
    
11.     
    
12. <nav>  
    
13.   <ul class="cd-vertical-nav">  
    
14.     <li><a href="\#0" class="cd-prev inactive">Next</a></li>  
    
15.     <li><a href="\#0" class="cd-next">Prev</a></li>  
    
16.   </ul>   
    
17. </nav>

复制代码

CSS样式  
  
  
请记住一下几点小知识：在iOS中不能使用background-attachment: fixed;，因此在某些小屏幕设备中固定背景效果是无效的。同样，插件中在小屏幕设备中不使用CSS background-images属性，但是在.cd-content元素使用::after伪元素添加了一个小的手机图片。

1.  .cd-fixed-background .cd-content::after \{  
    
2.    /\* phone image on small devices \*/  
    
3.    content: '';  
    
4.    display: block;  
    
5.    width: 100%;  
    
6.    padding: 60% 0;  
    
7.    margin: 2em auto 0;  
    
8.  \}

复制代码

由于我们使用的是background-images，所以不能100%的控制图片固定的位置（在这个例子中不能控制手机的图片固定位置）。  
下面的代码是固定背景效果的所需要的全部代码：

1.  html, body \{  
    
2.    height: 100%;  
    
3.  \}  
    
4.      
    
5.  .cd-fixed-background \{  
    
6.    height: 100%;  
    
7.    background-repeat: no-repeat;  
    
8.    background-size: cover;  
    
9.    background-position: center center;  
    
10.   background-attachment: fixed;  
    
11. \}  
    
12.     
    
13. .cd-fixed-background.img-1 \{  
    
14.   background-image: url("../img/img-1.jpg");  
    
15. \}  
    
16.     
    
17. .cd-fixed-background.img-2 \{  
    
18.   background-image: url("../img/img-2.jpg");  
    
19. \}  
    
20.     
    
21. .cd-fixed-background.img-3 \{  
    
22.   background-image: url("../img/img-3.jpg");  
    
23. \}

复制代码

JAVASCRIPT  
  
  
插件中使用jQuery来控制导航按钮在各个section之间来回切换，可以使用鼠标点击导航按钮或键盘的上下导航按键来控制。在页面滚动的时候，使用checkNavigation()方法来更新导航按钮的可见性，并使用checkVisibleSection()方法来检测section是否在当前屏幕中可见。nextSection()和prevSection()方法用于导航到前一个和下一个section。

[CSS3]: http://www.html5cn.org/portal.php?mod=list&catid=16
[assets-needed.gif]: http://bbs.html5cn.org/data/attachment/forum/201504/03/104816f5fdrdobbpzhvprq.gif
[Link 1]: http://www.htmleaf.com/Demo/2015032650740.html
[zip.gif]: http://bbs.html5cn.org/static/image/filetype/zip.gif
[201503262021.zip]: http://bbs.html5cn.org/forum.php?mod=attachment&aid=Mjc2ODR8YTljMTdmZTJ8MTQyODM2NzgxMnwwfDg2OTY5