角落动画中的CSS显示

时间：2017-07-12 13:22:00

标签： javascript jquery css css3 css-animations

我正在尝试按如下方式实现动画效果：

显示横幅时，应显示下一横幅的右下角。单击此角时，它应隐藏当前横幅并显示下一个横幅。

我目前的标记如下：

<div class="banners">
    <div class="image active" style="background-color: red;">
        <div class="corner"></div>
    </div>

    <div class="image" style="background-color: blue;">
        <div class="corner"></div>
    </div>
</div>

CSS如下：注意我使用clip-path来创建角落：

.banners {
    width: 800px;
    height: 600px;
}

.image {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
}

.image.active {
     z-index: 1;
     clip-path: polygon(100% 0, 100% 65%, 60% 100%, 0 100%, 0 0);
}

.corner {
    width: 50%;
    height: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
}

JS：

$(document).ready(function () {
    $('.corner').click(function() {
        $('.image.active').removeClass('active');
        $(this).parent().addClass('active');
    });
});

这是以上所有代码的JSFiddle：https://jsfiddle.net/cqqxjjgu/

这方面的一个直接问题是，因为我使用z-index来指定当前“有效”状态＆＃39; banner应该具有优先权，当删除active类时，它只会立即显示下一个横幅，因此理想情况下，z-index只应在动画完成后更改。

有没有人知道如何实现这一目标？理想情况下，我需要一个跨浏览器解决方案（不要太过关于IE＆lt; 10）。

5 个答案:

答案 0 :(得分：36)

一个简单的例子，没有javascript实现这种效果：
https://jsfiddle.net/freer4/j2159b1e/2/ 

html, body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
}
.banners {
  position:relative;
  background:#000;
  width: 100%;
  height: 100%;
  overflow:hidden;
}
.banners input{
  display:none;
}
.slide1{
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5T6nwVYWsbzLcLF-JNxnGXFFFwkZMBcCMbaqeTevuldkxHg0N);
}
.slide2{
  background-image:url(http://www.rd.com/wp-content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg);
}
.slide3{
  background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKr6YlGNsqgJzvgBBkq1648_HsuDizVn_ZXC6iQp9kjXFzLvs1BA);
}
.image {
  display:block;
  height:100%;
  width:100%;
  position: absolute;
  overflow:hidden;
  z-index:1;
  text-align:center;
  background-position:0 0;
  background-size:cover;
  transition:z-index 1s step-end;
  clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
  animation-duration: 2s;
  animation-name: clipout;
}
input:checked + .image{
  z-index:3;
  transition:z-index 1s step-end;
  clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0);
  animation-duration: 2.2s;
  animation-name: clipin;
  cursor:default;
}
.image:nth-child(2),
input:checked + * + * + .image{
  z-index:2;
  cursor:pointer;
}


.content{
  color:#FFF;
  display:inline-block;
  vertical-align:middle;
  font-family:arial;
  text-transform:uppercase;
  font-size:24px;
  opacity:0;
  transition:0s opacity 1s;
}
input:checked + .image .content{
  opacity:1;
  transition:0.8s opacity 0.8s;
}
.spanner{
  vertical-align:middle;
  width:0;
  height:100%;
  display:inline-block;
}

@keyframes clipout {
  from { clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); }
  50%  { clip-path: polygon(100% 0, 100% -100%, -100% 100%, 0 100%, 0 0); }
  51%   { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
  to   { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
}
@keyframes clipin{
  from { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
  50%  { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
  to   { clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); }  
}
<div class="banners">
  <input type="radio" id="slide1" name="slides" checked="checked" />
  <label class="image slide1" for="slide1">
    <div class="content">
      Slide 1
    </div>
    <div class="spanner"></div>
  </label>
  <input type="radio" id="slide2" name="slides"  />
  <label class="image slide2" for="slide2">
    <div class="content">
      Slide 2
    </div>
    <div class="spanner"></div>
  </label>
  <input type="radio" id="slide3" name="slides"  />
  <label class="image slide3" for="slide3">
    <div class="content">
      Slide 3
    </div>
    <div class="spanner"></div>
  </label>
</div>

基本上，只需使用关键帧为剪辑路径设置动画。喜欢z-index和一些兄弟选择器。

答案 1 :(得分：9)

这适用于任何具有转换支持的浏览器： https://jsfiddle.net/freer4/cqqxjjgu/1/

基本上，制作一张非常大的封面幻灯片，使用与下一张幻灯片相同的背景颜色，并将其拉到当前幻灯片上。然后淡出以显示下一张幻灯片。

对html进行一点调整：

<div class="banners">
  <div class="image active" style="background-color: black;">
    <div class="content">
      Slide 1
    </div>
    <div class="spanner"></div>
    <div class="corner" style="background-color: cyan;"></div>      
  </div>

  <div class="image" style="background-color: cyan;">
    <div class="content">
      Slide 2
    </div>
    <div class="spanner"></div>
    <div class="corner" style="background-color: magenta;"></div>
  </div>

  <div class="image" style="background-color: magenta;">
    <div class="content">
      Slide 3
    </div>
    <div class="spanner"></div>
    <div class="corner" style="background-color: black;"></div>
  </div>
</div>

更改jQuery以选择下一张幻灯片，如果没有更新幻灯片，则更改第一张幻灯片：

$(document).ready(function () {
    $('.corner').click(function() {
        var $parent = $(this).parent();
        $parent.removeClass("active");
        if ($parent.next().length){
            $parent.next().addClass("active");
        } else {
            $parent.prevAll().last().addClass("active");
        }
    });
});

设置一些错综复杂的过渡，你可以调整时间：

.image {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow:hidden;
    z-index:1;
    transition:z-index 2s step-end, 1s opacity 1s ease-in-out;
    text-align:center;
    opacity:0;
}
.image.active{
    opacity:1;
    z-index:2;
    transition:z-index 2s step-end, 0s opacity 0s;
}

.corner {
    width: 200%;
    height: 200%;
    position: absolute;
    top: -100%;
    left: -100%;
    clip-path: polygon(100% 0, 0 70%,  0 100%, 100% 100%, 100% 0, 100% 0);
    z-index:3;
    margin-left:150%;
    margin-top:150%;
    transition:2s top ease-in-out, 2s left ease-in-out, 0s margin 2s;
}
.image.active .corner{
  top:0;
  left:0;
  margin-top:0;
  margin-left:0;
  transition:0s top ease-in-out 1s, 0s left ease-in-out 1s, 2s margin ease-in-out 1s;
}

旁白：此示例完全灵活（不关心大小）：

.banners {
    width: 100%;
    height: 100%;
}

或图片：https://jsfiddle.net/freer4/ens7caaL/

答案 2 :(得分：5)

即使在IE / Edge中，这也适用于所有地方。它基于CSS transition并通过JavaScript替换CSS类。

我正在使用旋转的矩形来裁剪图像。演示主要原理（包含大量硬编码，先前计算的值）：

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;  
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 300px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  left: -86.6px;
  top: 50px;
  width: 359.8px;
  height: 240px;
  transform-origin: 0 0;
  transform: rotate(-30deg);
  border: 1px solid blue;
}
<div></div>

主要演示（有很多硬编码值）。为了更好地了解其工作原理，您可以将border添加到.slide-cropper：

$(document).ready(function() {
  $(".banners").on("click", ".slide-cropper.next .slide-content", function() {
    var $container = $(this).closest(".slide");
    
    $(".slide-cropper").removeClass("prev")
      .removeClass("current")
      .removeClass("next");

    $(this).closest(".slide-cropper").addClass("current");

    var $prevContainer;
    if ($container.prev().length) {
      $prevContainer = $container.prev();
    } else {
      $prevContainer = $container.siblings(":last");
    }
    $prevContainer.find(".slide-cropper").addClass("prev");

    var $nextContainer;
    if ($container.next().length) {
      $nextContainer = $container.next();
    } else {
      $nextContainer = $container.siblings(":first");
    }
    $nextContainer.find(".slide-cropper").addClass("next");
  });
});
*,
*:before,
*:after {
  box-sizing: border-box;
}

/* all body styles are just for demo */
/* just centering the slider */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.banners {
  width: 300px;
  height: 200px;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide .slide-cropper {
  position: absolute;
  left: -86.6px;
  top: 50px;
  width: 359.8px;
  height: 323.2px;
  transform-origin: 0 0;
  transform: rotate(-30deg);
  overflow: hidden;
  transition: height 2s linear;
}

.slide-content {
  position: absolute;
  background-size: 100% 100%;
  left: 100px;
  top: 0;
  width: 300px;
  height: 200px;
  transform: rotate(30deg);
  transform-origin: 0 0;
  z-index: 0;
  
  /* just styles for text */
  /* using flexbox to center text */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 3em;
}

.slide1 .slide-content {
  background-image: url("https://i.stack.imgur.com/tt875.jpg");
}

.slide2 .slide-content {
  background-image: url("https://i.stack.imgur.com/hzbmw.jpg");
}

.slide3 .slide-content {
  background-image: url("https://i.stack.imgur.com/4UxLW.jpg");
}

.slide-cropper.prev {
  height: 0;
  z-index: 3;
}

.slide-cropper.current {
  height: 240px;
  transition-delay: 2s;
  z-index: 2;
}

.slide-cropper.next {
  z-index: 1;
}

/* Fix for IE */
.slide-cropper.current {
  pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="banners">
  <div class="slide slide1">
    <div class="slide-cropper current">
      <div class="slide-content">
        Slide 1
      </div>
    </div>
  </div>

  <div class="slide slide2">
    <div class="slide-cropper next">
      <div class="slide-content">
        Slide 2
      </div>
    </div>
  </div>

  <div class="slide slide3">
    <div class="slide-cropper">
      <div class="slide-content">
        Slide 3
      </div>
    </div>
  </div>
</div>

要了解它是如何工作的，我将所有计算都移到了CSS variables AKA CSS custom properties。它们可以在许多浏览器中使用，但不能与CSS calc函数结合使用。此示例仅在Chrome中完美运行，但有助于理解和修改此示例（只需将CSS变量替换为计算出的硬编码值）。 您也可以将此计算移至CSS预处理器或JavaScript代码。 

$(document).ready(function() {
  $(".banners").on("click", ".slide-cropper.next .slide-content", function() {
    var $container = $(this).closest(".slide");
    
    $(".slide-cropper").removeClass("prev")
      .removeClass("current")
      .removeClass("next");

    $(this).closest(".slide-cropper").addClass("current");

    var $prevContainer;
    if ($container.prev().length) {
      $prevContainer = $container.prev();
    } else {
      $prevContainer = $container.siblings(":last");
    }
    $prevContainer.find(".slide-cropper").addClass("prev");

    var $nextContainer;
    if ($container.next().length) {
      $nextContainer = $container.next();
    } else {
      $nextContainer = $container.siblings(":first");
    }
    $nextContainer.find(".slide-cropper").addClass("next");
  });
});
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  --width: 300px;
  --height: 200px;
  /* rotate for image cropping */
  --rotate-angle: 30deg;
  /* sin 30 degrees for image cropping */
  --sin-rotate-angle: 0.5;
  /* cos 30 degrees for image cropping */
  --cos-rotate-angle: 0.8660254037844386;
  /* clipper ratio for width, can be from 0 to 1 */
  --clipper-ratio: 0.45;
  --animation-timeout: 2s;
}

/* all body styles are just for demo */
/* just centering the slider */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.banners {
  width: var(--width);
  height: var(--height);
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide .slide-cropper {
  position: absolute;
  left: calc(-1 * var(--height) * var(--sin-rotate-angle) * var(--cos-rotate-angle));
  top: calc(var(--height) * var(--sin-rotate-angle) * var(--sin-rotate-angle));
  width: calc(var(--height) * var(--sin-rotate-angle) + var(--width) * var(--cos-rotate-angle));
  height: calc(var(--height) * var(--cos-rotate-angle) + var(--width) * var(--sin-rotate-angle));
  transform-origin: 0 0;
  transform: rotate(calc(-1 * var(--rotate-angle)));
  overflow: hidden;
  transition: height var(--animation-timeout) linear;
}

.slide-content {
  position: absolute;
  background-size: 100% 100%;
  left: calc(var(--height) / 2);
  width: var(--width);
  height: var(--height);
  transform: rotate(var(--rotate-angle));
  transform-origin: 0 0;
  z-index: 0;
  
  /* just styles for text */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 3em;
}

.slide1 .slide-content {
  background-image: url("https://i.stack.imgur.com/tt875.jpg");
}

.slide2 .slide-content {
  background-image: url("https://i.stack.imgur.com/hzbmw.jpg");
}

.slide3 .slide-content {
  background-image: url("https://i.stack.imgur.com/4UxLW.jpg");
}

.slide-cropper.prev {
  height: 0;
  z-index: 3;
}

.slide-cropper.current {
  height: calc(var(--height) * var(--cos-rotate-angle) + var(--clipper-ratio) * var(--width) * var(--sin-rotate-angle));
  transition-delay: var(--animation-timeout);
  z-index: 2;
}

.slide-cropper.next {
  z-index: 1;
}

/* Fix for IE */
.slide-cropper.current {
  pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="banners">
  <div class="slide slide1">
    <div class="slide-cropper current">
      <div class="slide-content">
        Slide 1
      </div>
    </div>
  </div>

  <div class="slide slide2">
    <div class="slide-cropper next">
      <div class="slide-content">
        Slide 2
      </div>
    </div>
  </div>

  <div class="slide slide3">
    <div class="slide-cropper">
      <div class="slide-content">
        Slide 3
      </div>
    </div>
  </div>
</div>

要将此更改为全屏，您需要设置--width: 100vw和--height: 100vh。 （当然，你必须用硬编码的值替换CSS变量才能在所有浏览器中工作）。演示：

$(document).ready(function() {
  $(".banners").on("click", ".slide-cropper.next .slide-content", function() {
    var $container = $(this).closest(".slide");
    
    $(".slide-cropper").removeClass("prev")
      .removeClass("current")
      .removeClass("next");

    $(this).closest(".slide-cropper").addClass("current");

    var $prevContainer;
    if ($container.prev().length) {
      $prevContainer = $container.prev();
    } else {
      $prevContainer = $container.siblings(":last");
    }
    $prevContainer.find(".slide-cropper").addClass("prev");

    var $nextContainer;
    if ($container.next().length) {
      $nextContainer = $container.next();
    } else {
      $nextContainer = $container.siblings(":first");
    }
    $nextContainer.find(".slide-cropper").addClass("next");
  });
});
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  --width: 100vw;
  --height: 100vh;
  /* rotate for image cropping */
  --rotate-angle: 30deg;
  /* sin 30 degrees for image cropping */
  --sin-rotate-angle: 0.5;
  /* cos 30 degrees for image cropping */
  --cos-rotate-angle: 0.8660254037844386;
  /* clipper ratio for width, can be from 0 to 1 */
  --clipper-ratio: 0.45;
  --animation-timeout: 2s;
}

/* all body styles are just for demo */
/* just centering the slider */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.banners {
  width: var(--width);
  height: var(--height);
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide .slide-cropper {
  position: absolute;
  left: calc(-1 * var(--height) * var(--sin-rotate-angle) * var(--cos-rotate-angle));
  top: calc(var(--height) * var(--sin-rotate-angle) * var(--sin-rotate-angle));
  width: calc(var(--height) * var(--sin-rotate-angle) + var(--width) * var(--cos-rotate-angle));
  height: calc(var(--height) * var(--cos-rotate-angle) + var(--width) * var(--sin-rotate-angle));
  transform-origin: 0 0;
  transform: rotate(calc(-1 * var(--rotate-angle)));
  overflow: hidden;
  transition: height var(--animation-timeout) linear;
}

.slide-content {
  position: absolute;
  background-size: 100% 100%;
  left: calc(var(--height) / 2);
  width: var(--width);
  height: var(--height);
  transform: rotate(var(--rotate-angle));
  transform-origin: 0 0;
  z-index: 0;
  
  /* just styles for text */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 3em;
}

.slide1 .slide-content {
  background-image: url("https://i.stack.imgur.com/tt875.jpg");
}

.slide2 .slide-content {
  background-image: url("https://i.stack.imgur.com/hzbmw.jpg");
}

.slide3 .slide-content {
  background-image: url("https://i.stack.imgur.com/4UxLW.jpg");
}

.slide-cropper.prev {
  height: 0;
  z-index: 3;
}

.slide-cropper.current {
  height: calc(var(--height) * var(--cos-rotate-angle) + var(--clipper-ratio) * var(--width) * var(--sin-rotate-angle));
  transition-delay: var(--animation-timeout);
  z-index: 2;
}

.slide-cropper.next {
  z-index: 1;
}

/* Fix for IE */
.slide-cropper.current {
  pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="banners">
  <div class="slide slide1">
    <div class="slide-cropper current">
      <div class="slide-content">
        Slide 1
      </div>
    </div>
  </div>

  <div class="slide slide2">
    <div class="slide-cropper next">
      <div class="slide-content">
        Slide 2
      </div>
    </div>
  </div>

  <div class="slide slide3">
    <div class="slide-cropper">
      <div class="slide-content">
        Slide 3
      </div>
    </div>
  </div>
</div>

使用可在Firefox中运行的CSS变量进行演示（Firefox对CSS变量和transform: rotate的组合并不友好，所以我只用硬编码的值替换了transform: rotate：

$(document).ready(function() {
  $(".banners").on("click", ".slide-cropper.next .slide-content", function() {
    var $container = $(this).closest(".slide");
    
    $(".slide-cropper").removeClass("prev")
      .removeClass("current")
      .removeClass("next");

    $(this).closest(".slide-cropper").addClass("current");

    var $prevContainer;
    if ($container.prev().length) {
      $prevContainer = $container.prev();
    } else {
      $prevContainer = $container.siblings(":last");
    }
    $prevContainer.find(".slide-cropper").addClass("prev");

    var $nextContainer;
    if ($container.next().length) {
      $nextContainer = $container.next();
    } else {
      $nextContainer = $container.siblings(":first");
    }
    $nextContainer.find(".slide-cropper").addClass("next");
  });
});
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  --width: 100vw;
  --height: 100vh;
  /* sin 30 degrees for image cropping */
  --sin-rotate-angle: 0.5;
  /* cos 30 degrees for image cropping */
  --cos-rotate-angle: 0.8660254037844386;
  /* clipper ratio for width, can be from 0 to 1 */
  --clipper-ratio: 0.45;
  --animation-timeout: 2s;
}

/* all body styles are just for demo */
/* just centering the slider */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.banners {
  width: var(--width);
  height: var(--height);
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide .slide-cropper {
  position: absolute;
  left: calc(-1 * var(--height) * var(--sin-rotate-angle) * var(--cos-rotate-angle));
  top: calc(var(--height) * var(--sin-rotate-angle) * var(--sin-rotate-angle));
  width: calc(var(--height) * var(--sin-rotate-angle) + var(--width) * var(--cos-rotate-angle));
  height: calc(var(--height) * var(--cos-rotate-angle) + var(--width) * var(--sin-rotate-angle));
  transform-origin: 0 0;
  transform: rotate(-30deg);
  overflow: hidden;
  transition: height var(--animation-timeout) linear;
}

.slide-content {
  position: absolute;
  background-size: 100% 100%;
  left: calc(var(--height) / 2);
  width: var(--width);
  height: var(--height);
  transform: rotate(30deg);
  transform-origin: 0 0;
  z-index: 0;
  
  /* just styles for text */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 3em;
}

.slide1 .slide-content {
  background-image: url("https://i.stack.imgur.com/tt875.jpg");
}

.slide2 .slide-content {
  background-image: url("https://i.stack.imgur.com/hzbmw.jpg");
}

.slide3 .slide-content {
  background-image: url("https://i.stack.imgur.com/4UxLW.jpg");
}

.slide-cropper.prev {
  height: 0;
  z-index: 3;
}

.slide-cropper.current {
  height: calc(var(--height) * var(--cos-rotate-angle) + var(--clipper-ratio) * var(--width) * var(--sin-rotate-angle));
  transition-delay: var(--animation-timeout);
  z-index: 2;
}

.slide-cropper.next {
  z-index: 1;
}

/* Fix for IE */
.slide-cropper.current {
  pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="banners">
  <div class="slide slide1">
    <div class="slide-cropper current">
      <div class="slide-content">
        Slide 1
      </div>
    </div>
  </div>

  <div class="slide slide2">
    <div class="slide-cropper next">
      <div class="slide-content">
        Slide 2
      </div>
    </div>
  </div>

  <div class="slide slide3">
    <div class="slide-cropper">
      <div class="slide-content">
        Slide 3
      </div>
    </div>
  </div>
</div>

答案 3 :(得分：5)

这是一个不使用clip-path的答案，因为svg以外的DOM元素上的浏览器兼容性很低。

我现在看到Vadim与旋转容器有着相同的想法（在我完成之前没有检查过），但从我可以看出，我们的答案之间仍有足够的差异来证明我的解决方案是合理的：

$(document).ready(function() {
  $(".slider").on("click",".next",function() {
    if ($(this).prev().length) {$(this).prev().removeClass("curr");} else {$(this).siblings().last().removeClass("curr");} //deactivate current slide
    if ($(this).next().length) {$(this).next().addClass("next");} else {$(this).siblings().first().addClass("next");} //prepare slide that follows next slide
    $(this).removeClass("next").addClass("curr"); //activate next slide
  });
});
.slider, .slider .img {
  width: 55vw;
  height: calc(55vw / 16*9);
  background: #000 center/contain no-repeat;
}
.slider {position:relative; margin:0 auto; overflow:hidden;}

.slider .slide {
  position: absolute;
  z-index: 0;
  width: 250%;
  height: 0;
  transform: translateX(-50%) rotate(-20deg);
  transform-origin: 50% 0;
  transition:z-index 0s 0.7s, height 0.7s;
  overflow: hidden;
}
.slider .slide.next {z-index:1; height:155%; opacity:0.5; transition:z-index 0s 1.1s, height 0s 0.7s; cursor:pointer;}
.slider .slide.curr {z-index:2; height:135%; opacity:1.0; transition:z-index 0s 1.1s, height 0.4s 0.7s, opacity 0.7s;}

.slider .slide .img {margin-left:50%; transform:rotate(20deg); transform-origin:0 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slider">
  <div class="slide curr"><div class="img" style="background-image:url(https://placeimg.com/640/480/animals);"></div></div>
  <div class="slide next"><div class="img" style="background-image:url(https://placeimg.com/640/480/people);"></div></div>
  <div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/nature);"></div></div>
  <div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/tech);"></div></div>
  <div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/arch);"></div></div>
</div>
codepen：https://codepen.io/anon/pen/JJQRvM
jsfiddle：https://jsfiddle.net/tq2hw7b9/5/

  • 而不是clip-path我只需更改幻灯片容器的height，使用transition作为动画效果。

IE TROUBLES

不幸的是，像往常一样，IE处理transform:rotate()与其他浏览器不同。视觉上旋转发生，但浏览器似乎仍然保留元素的原始空间，因此下一张幻灯片的暴露角落不可点击，因为当前幻灯片正在“覆盖”它。使用-ms-或-webkit-前缀并没有什么区别。

以下代码段可以在IE中使用：

$(document).ready(function() {
  $(".slider .corner").on("click",function() {
  	var $next = $(this).siblings(".next");
    if ($next.prev().length) {$next.prev().removeClass("curr");} else {$next.siblings(".slide").last().removeClass("curr");} //deactivate current slide
    if ($next.next(".slide").length) {$next.next().addClass("next");} else {$next.siblings().first().addClass("next");} //prepare slide that follows next slide
    $next.removeClass("next").addClass("curr"); //activate next slide
  });
});
.slider, .slider .img {
  width: 55vw;
  height: calc(55vw / 16*9);
  background: #000 center/contain no-repeat;
}
.slider {position:relative; margin:0 auto; overflow:hidden;}

.slider .corner {
  position: absolute;
  z-index: 3;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 21%;
  transform: rotate(-20deg);
  transform-origin: 100% 0;
  cursor: pointer;
}

.slider .slide {
  position: absolute;
  z-index: 0;
  width: 250%;
  height: 0;
  transform: translateX(-50%) rotate(-20deg);
  transform-origin: 50% 0;
  transition:z-index 0s 0.7s, height 0.7s;
  overflow: hidden;
}
.slider .slide.next {z-index:1; height:155%; opacity:0.5; transition:z-index 0s 1.1s, height 0s 0.7s;}
.slider .slide.curr {z-index:2; height:135%; opacity:1.0; transition:z-index 0s 1.1s, height 0.4s 0.7s, opacity 0.7s;}

.slider .slide .img {margin-left:50%; transform:rotate(20deg); transform-origin:0 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slider">
  <div class="slide curr"><div class="img" style="background-image:url(https://placeimg.com/640/480/animals);"></div></div>
  <div class="slide next"><div class="img" style="background-image:url(https://placeimg.com/640/480/people);"></div></div>
  <div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/nature);"></div></div>
  <div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/tech);"></div></div>
  <div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/arch);"></div></div>
  <div class="corner"></div>
</div>
codepen：https://codepen.io/anon/pen/GEbrzQ
jsfiddle：https://jsfiddle.net/8ggqndj1/

  • 我添加了一个涵盖所有幻灯片的额外<div class="corner">。
  • JS中的click-handler现在绑定到此.corner，并且在处理程序的开头，对下一张幻灯片的引用存储在一个变量中，该变量在代码的其余部分中使用。 / LI>
  • 在CSS中，.corner还有一个新规则。

JS中的SLIDE-ARRAY

查看下面的代码段，了解JS中的幻灯片列表（如果有人需要）：

$(document).ready(function() {
  var slides = [
  	2, //index for next slide
    "https://placeimg.com/640/480/animals",
    "https://placeimg.com/640/480/people",
    "https://placeimg.com/640/480/nature",
    "https://placeimg.com/640/480/tech",
    "https://placeimg.com/640/480/arch"
  ];
  
//INITIALIZE SLIDESHOW--------------------
  $(".slider").css("background-image","url("+slides[2]+")"); //set next slide
  $(".slider .current .img").css("background-image","url("+slides[1]+")"); //set current slide, and set slide-height to slideshow-height
  
//SLIDESHOW CLICK-HANDLER--------------------
  $(".slider .current").on("click",function(e){e.stopPropagation();});
  $(".slider").on("click",function() {
  	$(this).children(".current").animate({height:0},700,function(){
    	$(this).children(".img").css("background-image","url("+slides[slides[0]]+")"); //set the current slide to the next slide
    	$(this).css("height","155%"); //cover entire slide
      if (slides[0]==slides.length-1) {slides[0]=1;} else {++slides[0];} //increase/loop index for next slide
      $(this).parent().css("background-image","url("+slides[slides[0]]+")"); //set the next slide to the next slide after that
      $(this).animate({height:"135%"},400); //reveal corner for next slide
    });
  });
});
.slider, .slider .img {
  width: 55vw;
  height: calc(55vw / 16*9);
  background: #000 center/contain no-repeat;
}
.slider {margin:0 auto; cursor:pointer; overflow:hidden;}

.slider .current {
  width: 250%;
  height: 135%;
  transform: translateX(-50%) rotate(-20deg);
  transform-origin: 50% 0;
  overflow: hidden;
  cursor: default;
}
.slider .current .img {margin-left:50%; transform:rotate(20deg); transform-origin:0 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slider"><div class="current"><div class="img"></div></div></div>
codepen：https://codepen.io/anon/pen/EXBgew
jsfiddle：https://jsfiddle.net/qghv9bnh/13/

  • 虽然我认为我的第一个解决方案更清晰，更快速，更灵活，可以添加额外的幻灯片（当然，当你使用像WordPress或Joomla这样的CMS时）：
    1. 只有在您实际使用滑块时才会加载图像，因此用户可以为每张未点击的幻灯片节省带宽。
    2. HTML非常简洁，无论您拥有多少张幻灯片都不会增长，因此您的HTML看起来会更清晰（但如果您使用PHP来包含它们，它看起来会更干净，更干净）。

无法想到其他任何东西，正如我所说，我更喜欢第一个。但是，它可能会派上用场。

答案 4 :(得分：0)

此示例适用于Firefox，Chrome，IE。

更改滑动规则更改transition 

$(document).ready(function () {
    $('.angle').click(function() {
        var $parent = $(this).parent();
        $parent.removeClass("current");
        if ($parent.next().length){
        	$parent.next().addClass("current");
        } else {
        	$parent.prevAll().last().addClass("current");
        }
    });
});
body{
  height:100%;
  width:100%;
}

.slideShow {
    width: 100%;
    height: 100%;
}

.image {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow:hidden;
    z-index:1;
    transition:z-index 2s step-end, 1s opacity 1s ease-in-out;
    text-align:center;
    opacity:0;
    background-size:100% 100%;
    background-attachment:fixed;
}
.image.current{
    opacity:1;
    z-index:2;
    transition:z-index 2s step-end, 0s opacity 0s;
}

.angle {
    width: 200%;
    height: 200%;
    position: absolute;
    top: -100%;
    left: -100%;
    clip-path: polygon(100% 0, 0 70%,  0 100%, 100% 100%, 100% 0, 100% 0);
    z-index:3;
    margin-left:150%;
    margin-top:150%;
    transition:2s top ease-in-out, 2s left ease-in-out, 0s margin 2s;
    background-size:100% 100%;
    background-attachment:fixed;
}
.image.current .angle{
  top:0;
  left:0;
  margin-top:0;
  margin-left:0;
  transition:0s top ease-in-out 1s, 0s left ease-in-out 1s, 2s margin ease-in-out 1s;
}
.main{
  color:#FFF;
  display:inline-block;
  vertical-align:middle;
  font-family:arial;
  text-transform:uppercase;
  font-size:24px;
}
.middle{
  vertical-align:middle;
  width:0;
  height:100%;
  display:inline-block;
}

.image1, .image3 .angle{
  background-image: url(http://i3.imgbus.com/doimg/4c5o0m8m6o5n4e0.png);
}
.image1 .angle, .image2{
  background-image:url(http://i4.imgbus.com/doimg/1c7obm6m1o3nbb0.png);
}
.image2 .angle, .image3{
  background-image:url(http://i3.imgbus.com/doimg/ccbo5m2m8o8n759.jpg);
}
<div class="slideShow">
  <div class="image image1 current">
    <div class="main">
    </div>
    <div class="middle"></div>
    <div class="angle" style="background-color: cyan;"></div>      
  </div>

  <div class="image image2" style="background-color: cyan;">
    <div class="main">
    </div>
    <div class="middle"></div>
    <div class="angle" style="background-color: magenta;"></div>
  </div>
  
  <div class="image image3" style="background-color: magenta;">
    <div class="main">
    </div>
    <div class="middle"></div>
    <div class="angle"></div>
  </div>
</div>

您也可以使用Amazing Slider等SildeShow Maker软件。

易于下载，易于使用：download link

它是非常强大的软件。见屏幕截图here

相关问题
最新问题