CSS 下一个和上一个剪辑路径动画
CSS next & previous clip path animation
继我上周发布的 之后,我创建了一个自定义轮播,它使用 clip-path
提供下一张和上一张幻灯片的片段。这目前可以正常工作,但我现在需要在 showing/hiding 幻灯片时应用一些动画。
在相关问题中,只需要"next slide"功能,提供的解决方案是剪辑"active"幻灯片。但是,现在由于我们需要制作下一张和上一张幻灯片,所以我已将剪辑应用于下一张和上一张幻灯片。代码如下:
$(document).ready(function() {
$('.slide').click(function() {
var current = $(this);
var prev = current.prev('.slide');
var next = current.next('.slide');
$('.slide').removeClass('active next prev');
if (current.hasClass('prev')) {
current.addClass('active').removeClass('prev');
} else {
current.addClass('active').removeClass('next');
}
if (prev.length) {
prev.addClass('prev');
} else {
$('.slide:last').addClass('prev');
}
if (next.length) {
next.addClass('next');
} else {
$('.slide:first').addClass('next');
}
});
});
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.banners {
position: relative;
background: #000;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0 auto;
}
.slide {
display: block;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
z-index: 1;
}
.slide.active {
z-index: 2;
}
.slide.next {
clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
}
.slide.prev {
clip-path: polygon(44% 0, 0 30%, 0 0);
}
.slide.next,
.slide.prev {
z-index: 3;
cursor: pointer;
}
.slide .image {
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.content {
color: #FFF;
display: inline-block;
vertical-align: middle;
font-family: arial;
text-transform: uppercase;
font-size: 24px;
}
.spanner {
vertical-align: middle;
width: 0;
height: 100%;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banners">
<div class="slide active">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/2127/SNvipw.jpg');">
<div class="content">
Slide 1
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide next">
<div class="image" style="background-image: url('http://imageshack.com/a/img922/6240/GzBaZq.jpg');">
<div class="content">
Slide 2
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide prev">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/227/XRZGsI.jpg');">
<div class="content">
Slide 3
</div>
<div class="spanner"></div>
</div>
</div>
</div>
这是上述所有代码的 JSFiddle:https://jsfiddle.net/795f88nm/
如您所见,轮播效果很好。我只需要添加动画,如下:
- 单击下一张幻灯片(右下角)时,应该会逐渐向上显示幻灯片。 "new" 下一张幻灯片应该会从底角逐渐出现。
- 单击上一张幻灯片(左上角)时,应逐渐向下显示幻灯片。 "new" 上一张幻灯片应该从顶角逐渐出现。
我不太擅长做动画,所以需要一些帮助。
基本上您可以将 animation
与您的 clip-path
一起使用
$(document).ready(function() {
$('.slide').click(function() {
var current = $('.slide.active');
var prev = $('.slide.prev');
var next = $('.slide.next');
if ($(this).hasClass('prev')) {
prev.removeClass('prev').addClass('next');
current.removeClass('active').addClass('prev');
next.removeClass('next').addClass('active');
} else if ($(this).hasClass('next')) {
next.removeClass('next').addClass('prev');
current.removeClass('active').addClass('next');
prev.removeClass('prev').addClass('active');
}
});
});
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.banners {
position: relative;
background: #000;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0 auto;
}
.slide {
display: block;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
z-index: 1;
}
.slide.active {
z-index: 2;
transition: all 2s ease;
}
.slide.next {
transition: all 2s ease;
clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
animation: polygons_next 2s alternate;
}
.slide.prev {
transition: all 2s ease;
clip-path: polygon(44% 0, 0 30%, 0 0);
animation: polygons_prev 2s alternate;
}
@keyframes polygons_next {
0% {
clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
}
100% {
clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
}
}
@keyframes polygons_prev {
0% {
clip-path: polygon(100% 0, 0 100%, 0 0);
}
100% {
clip-path: polygon(44% 0, 0 30%, 0 0);
}
}
.slide.next,
.slide.prev {
z-index: 3;
cursor: pointer;
}
.slide .image {
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.content {
color: #FFF;
display: inline-block;
vertical-align: middle;
font-family: arial;
text-transform: uppercase;
font-size: 24px;
}
.spanner {
vertical-align: middle;
width: 0;
height: 100%;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banners">
<div class="slide prev">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/2127/SNvipw.jpg');">
<div class="content">
Slide 1
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide active">
<div class="image" style="background-image: url('http://imageshack.com/a/img922/6240/GzBaZq.jpg');">
<div class="content">
Slide 2
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide next">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/227/XRZGsI.jpg');">
<div class="content">
Slide 3
</div>
<div class="spanner"></div>
</div>
</div>
</div>
继我上周发布的 clip-path
提供下一张和上一张幻灯片的片段。这目前可以正常工作,但我现在需要在 showing/hiding 幻灯片时应用一些动画。
在相关问题中,只需要"next slide"功能,提供的解决方案是剪辑"active"幻灯片。但是,现在由于我们需要制作下一张和上一张幻灯片,所以我已将剪辑应用于下一张和上一张幻灯片。代码如下:
$(document).ready(function() {
$('.slide').click(function() {
var current = $(this);
var prev = current.prev('.slide');
var next = current.next('.slide');
$('.slide').removeClass('active next prev');
if (current.hasClass('prev')) {
current.addClass('active').removeClass('prev');
} else {
current.addClass('active').removeClass('next');
}
if (prev.length) {
prev.addClass('prev');
} else {
$('.slide:last').addClass('prev');
}
if (next.length) {
next.addClass('next');
} else {
$('.slide:first').addClass('next');
}
});
});
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.banners {
position: relative;
background: #000;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0 auto;
}
.slide {
display: block;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
z-index: 1;
}
.slide.active {
z-index: 2;
}
.slide.next {
clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
}
.slide.prev {
clip-path: polygon(44% 0, 0 30%, 0 0);
}
.slide.next,
.slide.prev {
z-index: 3;
cursor: pointer;
}
.slide .image {
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.content {
color: #FFF;
display: inline-block;
vertical-align: middle;
font-family: arial;
text-transform: uppercase;
font-size: 24px;
}
.spanner {
vertical-align: middle;
width: 0;
height: 100%;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banners">
<div class="slide active">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/2127/SNvipw.jpg');">
<div class="content">
Slide 1
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide next">
<div class="image" style="background-image: url('http://imageshack.com/a/img922/6240/GzBaZq.jpg');">
<div class="content">
Slide 2
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide prev">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/227/XRZGsI.jpg');">
<div class="content">
Slide 3
</div>
<div class="spanner"></div>
</div>
</div>
</div>
这是上述所有代码的 JSFiddle:https://jsfiddle.net/795f88nm/
如您所见,轮播效果很好。我只需要添加动画,如下:
- 单击下一张幻灯片(右下角)时,应该会逐渐向上显示幻灯片。 "new" 下一张幻灯片应该会从底角逐渐出现。
- 单击上一张幻灯片(左上角)时,应逐渐向下显示幻灯片。 "new" 上一张幻灯片应该从顶角逐渐出现。
我不太擅长做动画,所以需要一些帮助。
基本上您可以将 animation
与您的 clip-path
$(document).ready(function() {
$('.slide').click(function() {
var current = $('.slide.active');
var prev = $('.slide.prev');
var next = $('.slide.next');
if ($(this).hasClass('prev')) {
prev.removeClass('prev').addClass('next');
current.removeClass('active').addClass('prev');
next.removeClass('next').addClass('active');
} else if ($(this).hasClass('next')) {
next.removeClass('next').addClass('prev');
current.removeClass('active').addClass('next');
prev.removeClass('prev').addClass('active');
}
});
});
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.banners {
position: relative;
background: #000;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0 auto;
}
.slide {
display: block;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
z-index: 1;
}
.slide.active {
z-index: 2;
transition: all 2s ease;
}
.slide.next {
transition: all 2s ease;
clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
animation: polygons_next 2s alternate;
}
.slide.prev {
transition: all 2s ease;
clip-path: polygon(44% 0, 0 30%, 0 0);
animation: polygons_prev 2s alternate;
}
@keyframes polygons_next {
0% {
clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
}
100% {
clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
}
}
@keyframes polygons_prev {
0% {
clip-path: polygon(100% 0, 0 100%, 0 0);
}
100% {
clip-path: polygon(44% 0, 0 30%, 0 0);
}
}
.slide.next,
.slide.prev {
z-index: 3;
cursor: pointer;
}
.slide .image {
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.content {
color: #FFF;
display: inline-block;
vertical-align: middle;
font-family: arial;
text-transform: uppercase;
font-size: 24px;
}
.spanner {
vertical-align: middle;
width: 0;
height: 100%;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banners">
<div class="slide prev">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/2127/SNvipw.jpg');">
<div class="content">
Slide 1
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide active">
<div class="image" style="background-image: url('http://imageshack.com/a/img922/6240/GzBaZq.jpg');">
<div class="content">
Slide 2
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide next">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/227/XRZGsI.jpg');">
<div class="content">
Slide 3
</div>
<div class="spanner"></div>
</div>
</div>
</div>