今天,我们和你分享一个简单的视差内容滑块。使用CSS动画,我们会控制滑块中的每一个元素的动画,并创建一个视差效果带动滑块本身的背景。
滑块包含几个幻灯片和每个人会有一个h2元素,一段,一个链接和一个图像:
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2>Some headline</h2>
<p>Some description</p>
<a href="#" class="da-link">Read more</a>
<div class="da-img">
<img src="images/1.png" alt="image01" />
</div>
</div>
<div class="da-slide">
<!-- ... -->
</div>
<!-- ... -->
<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
</div>
这个滑块的核心是动画的每一个元素。我们将控制元素的行为给予幻灯片一个各自的方向。例如,当我们向右滑动当前幻灯片,我们将这类“da-slide-toright”。将有四个不同的类为每个可能的滑动方向:
.da-slide-fromright
.da-slide-fromleft
.da-slide-toright
.da-slide-toleft
鉴于这些类,我们可以控制每个元素的动画:
/* Slide in from the right*/
.da-slide-fromright h2{
animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright p{
animation: fromRightAnim2 0.6s ease-in 0.8s both;
}
.da-slide-fromright .da-link{
animation: fromRightAnim3 0.4s ease-in 1.2s both;
}
.da-slide-fromright .da-img{
animation: fromRightAnim4 0.6s ease-in 0.8s both;
}
/* Adjust animations for different behavior of each element: */
@keyframes fromRightAnim1{
0%{ left: 110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
0%{ left: 110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
0%{ left: 110%; opacity: 0; }
1%{ left: 10%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
0%{ left: 110%; opacity: 0; }
100%{ left: 60%; opacity: 1; }
}
选项
以下选项用cslider插件时可用:
$('#da-slider').cslider({
current : 0,
// index of current slide
bgincrement : 50,
// increment the background position
// (parallax effect) when sliding
autoplay : false,
// slideshow on / off
interval : 4000
// time between transitions
});
视差效应是由移动滑块的背景在滑动时相反的方向