背景画像上にスライドトランジション

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、のためにしようとしているものを、これを願っています。

はbackground-position-yとpositive values下方ため、背景画像up-sideキーフレームに使用background-position-yとnegative valueを移動するように、親のdivの内側二つの異なるクラス、position:absolute、絶対として配置されtextためbackground imageと別のものを定義します。ここで

@-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

私はあなたがこのように行い、及びそのリースwindow.load()でアニメーションを使用することができますキーフレーム

<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(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>