jquery内容滑块与延迟动画和背景视差效果

jquery内容滑块与延迟动画和背景视差效果159
今天,我们和你分享一个简单的视差内容滑块。使用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
     
});

视差效应是由移动滑块的背景在滑动时相反的方向

也许你还喜欢