背景圖像幻燈片機過渡

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>