jQuery和CSS3全屏响应式缩放切换幻灯片特效

这是一款使用jQuery和CSS3来制作的超酷响应式缩放切换幻灯片特效。该幻灯片在切换的时候，当前slide会平滑缩小并移动，下一个slide会从缩小状态逐渐放大并移动到屏幕中间，效果非常的炫酷。

使用方法

HTML结构

该幻灯片的HTML结构非常简单，使用多个<div>来分别包裹需要的放置的内容即可。前后导航按钮使用2个svg元素来制作。

<div class="one">
  <h1>Awesome Content Goes Here!</h1>
</div>
<div class="two">
  <h1>Awesome Content Goes Here!</h1>
</div>
<div class="three">
  <h1>Awesome Content Goes Here!</h1>
</div>
<div class="four">
  <h1>Awesome Content Goes Here!</h1>
</div>
<!-- 前后导航按钮 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 32 32" id="previous" version="1.1" viewBox="0 0 32 32" xml:space="preserve">
  <path d="M7.701,14.276l9.586-9.585c0.879-0.878,2.317-0.878,3.195,0l0.801,0.8c0.878,0.877,0.878,2.316,0,3.194  L13.968,16l7.315,7.315c0.878,0.878,0.878,2.317,0,3.194l-0.801,0.8c-0.878,0.879-2.316,0.879-3.195,0l-9.586-9.587  C7.229,17.252,7.02,16.62,7.054,16C7.02,15.38,7.229,14.748,7.701,14.276z" fill="#FFFFFF"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 32 32" id="next" version="1.1" viewBox="0 0 32 32" xml:space="preserve">
  <path d="M24.291,14.276L14.705,4.69c-0.878-0.878-2.317-0.878-3.195,0l-0.8,0.8c-0.878,0.877-0.878,2.316,0,3.194  L18.024,16l-7.315,7.315c-0.878,0.878-0.878,2.317,0,3.194l0.8,0.8c0.878,0.879,2.317,0.879,3.195,0l9.586-9.587  c0.472-0.471,0.682-1.103,0.647-1.723C24.973,15.38,24.763,14.748,24.291,14.276z" fill="#FFFFFF"/>
</svg>                  
                

CSS样式

在该幻灯片特效中，所有的幻灯片slide都使用flex布局，元素垂直居中。并为它的所有属性设置1秒钟的ease效果的过渡动画效果。

div.slider {
  display: flex;
  -webkit-display: flex;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
}                  
                

然后分别为每一个滑动slide设置不同的背景颜色。

.one {
  background-color: #63E89D;
}
.two {
  background-color: #65BEFF;
}
.three {
  background-color: #EF4264;
}
.four {
  background-color: #8F70FD;
}                  
                

.zoomout是一个预置的缩放动画class类，在jQuery代码中会动态为幻灯片slide添加这个class。

.zoomout {
  transform: scale(0.7);
  -moz-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -o-transform: scale(0.7);
  -ms-transform: scale(0.7);
}                  
                

作为前后导航按钮的svg元素使用绝对定位，分别定位在屏幕的左侧中部和右侧中部位置。开始是向前导航按钮是不可见的。

svg {
  position: absolute;
  top: 50%;
  height: 5em;
  width: 5em;
  margin-top: -2.5em;
  cursor: pointer;
}

svg#next {
  right: 1em;
}

svg#previous {
  display: none;
  left: 1em;
}                  
                

JavaScript

在JavaScript代码中，提供了几个方法来控制幻灯片。initialiseSlider()是幻灯片的初始化方法，slideRight()是向右移动的方法，slideLeft()是向左移动的方法。另外还有一个removeZoom()方法用于移除.zoomoutclass类。

var timer = 0;
var elementCount = 0;
var firstPos = 0;
var lastPos = 0;

$(function() {
  initialiseSlider();
  $("#next").click(function() {
    slideRight();
  });

  $("#previous").click(function() {
    slideLeft();
  });
});

function initialiseSlider() {
  $("div.slider").each(function(value) {
    elementCount += 1;
    var position = -100 * value;
    $(this).css("left", position + "%");
  });

  if (elementCount === 1)
    $("#next").hide();
}

function slideRight() {
  $("div.slider").each(function(value) {
    $(this).addClass("zoomout");
    var position = parseInt($(this)[0].style.left) + 100;

    if (value === 0)
      firstPos = position;

    $(this).css("left", position + "%");
    timer = setTimeout(removeZoom, 1000);
  });

  console.log(firstPos);

  if (firstPos !== ((elementCount - 1) * 100)) {
    $("#next").show();
    $("#previous").show();
  } else
    $("#next").hide();
}

function slideLeft() {
  $("div.slider").each(function(value) {
    $(this).addClass("zoomout");
    var position = parseInt($(this)[0].style.left) - 100;

    if (value === (elementCount - 1))
      lastPos = position;

    $(this).css("left", position + "%");
    timer = setTimeout(removeZoom, 1000);
  });

  console.log(lastPos);

  if (lastPos !== ((elementCount - 1) * -100)) {
    $("#previous").show();
    $("#next").show();
  } else
    $("#previous").hide();
}

function removeZoom() {
  $("div.slider").each(function() {
    $(this).removeClass("zoomout");
  });
}