創意jQuery和CSS3滑動覆蓋響應式幻燈片特效

這是一款非常有創意的jQuery和CSS3滑動覆蓋響應式幻燈片特效。該幻燈片特效采用響應式設計，在幻燈片切換時使用一個滑動塊狀區域來進行覆蓋，顯示新的幻燈片內容，整體效果非常不錯。推薦閱讀：之前分享過一款 純CSS3超酷全屏響應式幻燈片特效 ，代碼僅有100多行，非常小巧。

查看演示       下載插件

使用方法

HTML結構

該幻燈片的HTML結果由兩部分組成：一個ul.cd-slider用于制作幻燈片，ol.cd-slider-navigation則用于制作幻燈片的導航。它們都被包裹在div.cd-slider-wrapper容器中。

<div class="cd-slider-wrapper">
  <ul class="cd-slider">
    <li class="is-visible">
      <div class="cd-half-block image"></div>

      <div class="cd-half-block content">
        <div>
          <h2>Slide Number 1</h2>
          <p>
            <!-- 內容 -->
          </p>
        </div>
      </div>
    </li> <!-- .cd-half-block.content -->

    <li>
      <!-- 第二個幻燈片項的內容 -->
    </li>

    <!-- 其它的幻燈片項放在這里 -->
  </ul> <!-- .cd-slider -->

  <!-- ol.cd-slider-navigation 元素會在這里使用jQuery來創建-->
</div> <!-- .cd-slider-wrapper -->

需要注意的是幻燈片的導航元素ol.cd-slider-navigation不是直接插入到DOM中的，而是通過jQuery來動態添加的。

CSS樣式

在小屏幕設備中(視口小于900px)，幻燈片的結果非常簡單：.cd-slider元素使用相對定位，它的所有<li>子元素都采用絕對定位，開始時位于左上角的位置。

所有的列表項都通過translateX(100%)被移動到右側屏幕之外。另外.is-visibleclass類用于將它們移動會屏幕中間(使用translateX(0))。

.cd-slider {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.cd-slider li {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: translateX(100%);
  transition: transform 0.6s;
}
.cd-slider li.is-visible {
  transform: translateX(0);
}

在大屏幕設備中，列表項通過translateX(0)移動會視口中，而他的兩個子元素.cd-half-block.content和.cd-half-block.image被移動到屏幕的右側，分別是translateX(200%)和translateX(100%)。

當前被選擇的幻燈片項被添加了.is-visible class之后，這兩個.cd-half-block元素會被使用translateX(0)移動會屏幕中間。

這里的動畫都使用了CSS3 Transitions過渡動畫效果。對于.cd-half-block.content元素，設置了0.6秒的transition-duration和0秒的transition-delay，而.cd-half-block.image元素則設置了0秒的transition-duration和0.3秒的transition-delay，這樣，當.cd-half-block.content元素動畫過渡進行到一半的時候，.cd-half-block.image元素就會立刻移動回屏幕的中間。可以通過下面的這張GIF圖片來觀察這個動畫過程。

@media only screen and (min-width: 900px) {
  .cd-slider li {
    transform: translateX(0);
  }
  .cd-slider .cd-half-block {
    height: 100%;
    width: 50%;
    float: right;
  }
  .cd-slider .cd-half-block.content {
    transform: translateX(200%);
    transition: transform 0.6s 0s ease-in-out;
  }
  .cd-slider .cd-half-block.image {
    transform: translateX(100%);
    transition: transform 0s 0.3s;
  }
  .cd-slider li.is-visible .cd-half-block.content,
  .cd-slider li.is-visible .cd-half-block.image {
    transform: translateX(0%);
  }
  .cd-slider li.is-visible .cd-half-block.content {
    transition: transform 0.6s 0s ease-in-out;
  }
}

JavaScript

該幻燈片特效中使用jQuery來動態插入幻燈片的導航按鈕。

// sliderContainer = $('.cd-slider-wrapper')
var sliderPagination = createSliderPagination(sliderContainer); 
function createSliderPagination(container){
  var wrapper = $('<ol class="cd-slider-navigation"></ol>');
  container.children('.cd-slider').find('li').each(function(index){
    var dotWrapper = (index == 0) ? $('<li class="selected"></li>') 
                                  : $('<li></li>'),
    dot = $('<a href="#0"></a>').appendTo(dotWrapper);
    dotWrapper.appendTo(wrapper);
    var dotText = ( index+1 < 10 ) ? '0'+ (index+1) : index+1;
    dot.text(dotText);
  });
  wrapper.appendTo(container);
  return wrapper.children('li');
}

另外還使用jQuery來實現了基本的幻燈片功能，包括滑動觸摸和幻燈片導航功能。

來源：jQuery之家