jQuery和CSS3網(wǎng)頁(yè)固定背景視覺差特效插件

使用方法

HTML結(jié)構(gòu)

下面來(lái)看一些它的制作方法。HTML結(jié)構(gòu)并不復(fù)雜：每一個(gè)section都包含一個(gè)帶有標(biāo)題和文本的.content元素。class.img-1、.img-2等用于在CSS中設(shè)置不同的背景圖片。.cd-vertical-nav是上下導(dǎo)航按鈕，只在大屏幕設(shè)備中可見。data-type用于在jQuery中識(shí)別是否是sections/items項(xiàng)。

<section class="cd-fixed-background img-1" data-type="slider-item">
  <div class="cd-content">
    <h2>Title here</h2>
    <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>
  </div>
</section>
 
<section class="cd-fixed-background img-2" data-type="slider-item">
  <!-- ... -->
</section>
 
<nav>
  <ul class="cd-vertical-nav">
    <li><a href="#0" class="cd-prev inactive">Next<;/a></li>
    <li><a href="#0" class="cd-next">Prev<;/a></li>
  </ul> <!-- cd-vertical-nav -->
</nav>

CSS樣式

請(qǐng)記住一下幾點(diǎn)小知識(shí)：在iOS中不能使用background-attachment: fixed;，因此在某些小屏幕設(shè)備中固定背景效果是無(wú)效的。同樣，插件中在小屏幕設(shè)備中不使用CSS background-images屬性，但是在.cd-content元素使用::after偽元素添加了一個(gè)小的手機(jī)圖片。

.cd-fixed-background .cd-content::after {
  __regexoperators___/* phone image on small devices */
  content: '';
  display: block;
  width: 100%;
  padding: 60% 0;
  margin: 2em auto 0;
}

由于我們使用的是background-images，所以不能100%的控制圖片固定的位置（在這個(gè)例子中不能控制手機(jī)的圖片固定位置）。

下面的代碼是固定背景效果的所需要的全部代碼：

html, body {
  height: 100%;
}
 
.cd-fixed-background {
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
 
.cd-fixed-background.img-1 {
  background-image: url("../img/img-1.jpg");
}
 
.cd-fixed-background.img-2 {
  background-image: url("../img/img-2.jpg");
}
 
.cd-fixed-background.img-3 {
  background-image: url("../img/img-3.jpg");
}

JAVASCRIPT

插件中使用jQuery來(lái)控制導(dǎo)航按鈕在各個(gè)section之間來(lái)回切換，可以使用鼠標(biāo)點(diǎn)擊導(dǎo)航按鈕或鍵盤的上下導(dǎo)航按鍵來(lái)控制。在頁(yè)面滾動(dòng)的時(shí)候，使用checkNavigation()方法來(lái)更新導(dǎo)航按鈕的可見性，并使用checkVisibleSection()方法來(lái)檢測(cè)section是否在當(dāng)前屏幕中可見。nextSection()和prevSection()方法用于導(dǎo)航到前一個(gè)和下一個(gè)section。