背景图像幻灯片机过渡

Question

革命滑块有选项可以设置幻灯片的图像过渡，我试图复制效果，所以我可以利用这一点没有革命滑块..

这是slide transition effect。

这是page我试图采用上述过渡效果。

我试过这个CSS，但没有运气，我不知道如何使用动画的关键帧。

感谢

.full-img.parallax-yes{ 
    overflow-y: hidden; 
    max-height: 330px; 
    transition-property: all; 
    transition-duration: .5s; 
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1); 
    transition: background-position 1s; 
    transform: matrix(1, 0, 0, 1, 0, 0); 
    transform-origin: 0% 0% 0px; 
} 

Answer 1

希望这是你正在使用CSS animation努力了，简单background-image slide-up animation。

定义你的父div中两个不同的阶级，一个background image，另一个用于text其定位为绝对的，position:absolute，移动在关键帧的背景图像up-side使用background-position-y和negative value，为向下background-position-y和positive values。

@-webkit-keyframes ani{ 
from{ 
    background-position-y:0px; 
} 
to{ 
    background-position-y:-100px; 
    } 
} 

#bx{ 
 
    width:100%; 
 
    height:300px; 
 
    overflow:hidden; 
 
    position:relative; 
 
} 
 
#bx > .iim{ 
 
    width:100%; 
 
    height:600px; 
 
    background:url('https://source.unsplash.com/user/erondu'); 
 
    background-repeat:no-repeat; 
 
    background-size:100% 100%; 
 
    background-position:fixed; 
 
    animation:an 5s forwards; 
 
    transition:5s ease forwards; 
 
} 
 
@-webkit-keyframes an{ 
 
    from{ 
 
    background-position-y:0px; 
 
    } 
 
    to{ 
 
    background-position-y:-100px; 
 
    } 
 
} 
 

 
#bx > .txt{ 
 
    width:100%; 
 
    height:300px; 
 
    overflow:hidden; 
 
    position:absolute; 
 
    color:black; 
 
    font-size:32px; 
 
    z-index:6; 
 
    top:0; 
 
    left:0; 
 
}

<div id="bx"> 
 
<div class="iim"> 
 
</div> 
 
<div class="txt"> 
 
Replace following content by your text. 
 
</div> 
 
</div>

Answer 2

在这里，我给了一个示例代码使用关键帧

<div class="full-height"> </div>; 


    .full-height { 
     max-height: 330px; 
     min-height: 330px; 
     background-image: url("http://carbongroup.com.au/wp-content/uploads/2015/10/bridge.jpg"); 
     background-size: cover; 
     background-position: 0% 0%; 
     background-repeat: no-repeat; 
     background-color: green; 
     animation-name: move; 
     animation-duration: 10s; 
     animation-timing-function: linear; 
     animation-iteration-count: 1; 
    } 

    @keyframes move { 
     0% { 
     background-position: 0% 0%; 
     } 

     100% { 
     background-position: 100% 100%; 

     } 
    } 

Answer 3

你可以这样做，并在租赁window.load()所以动画使用只在你的页面已经加载时启动。

$(window).load(function(){ 
 
$('.banner').addClass('loaded'); 
 
});

.banner{ 
 
    width: 100%; 
 
    height: 200px; 
 
    background-image: url(https://source.unsplash.com/user/erondu); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    background-position-y: 100%; 
 
    color: #fff; 
 
    transition: all 5s cubic-bezier(0.47, 0, 0.745, 0.715); 
 
    -webkit-transition: all 5s cubic-bezier(0.47, 0, 0.745, 0.715); 
 
} 
 
.banner.loaded{ 
 
    background-position-y: 0%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="banner"> 
 
<p>this is banner text</p> 
 
</div>