2017-03-01 11 views
2

ページを開くときにイメージを垂直に読み込むにはどうすればよいですか?私はdiv要素をページにフェードインするためにHTML/CSSを使用する方法を知っていますが、私はどのように垂直にロードするヘッダーイメージを置き換えることができるのだろうかと思っていたhttp://enod.fr/ページを開くときにイメージを垂直に読み込むにはどうすればよいですか?

ありがとう!この質問があまりにも曖昧であれば申し訳ありません。もし誰かが私を、私が働くことができるcodepenまたはjsfiddleリンクに私を導くことができれば、それはまた多くの助けになるだろう!

+0

でそれを行うことができますあなたは上向きにフェージングENOD内のテキストのような意味ですか? – edwarddamato

+0

こんにちはエドワード、申し訳ありませんが、私は十分に具体的ではありませんでした。 :) ありがとうございました! – v8lee

答えて

1

これはCSSアニメーションで行うことができます。ここでは、要素上で背景イメージを使用し、その要素の高さをアニメートして目的の効果を得る方法を示す簡単な例を示します。

.parent { 
 
    height: 300px; 
 
    width: 100%; 
 
} 
 

 
.parent > div { 
 
    height: 0px; 
 
    background-image: url('http://enod.fr/wp-content/uploads/2016/05/home.jpg'); 
 
    background-size: 100%; 
 
    animation-name: load-vertically; 
 
    animation-duration: 1.6s; 
 
    animation-iteration-count: 1; 
 
    animation-fill-mode: forwards; 
 
    position: relative; 
 
} 
 

 
.parent > div > h1 { 
 
    opacity: 0; 
 
    animation-name: delay-show; 
 
    animation-duration: 0.5s; 
 
    animation-delay: 2s; 
 
    animation-iteration-count: 1; 
 
    animation-fill-mode: forwards; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
    text-align: center; 
 
    font-family: Arial; 
 
    text-transform: uppercase; 
 
    transform: translateY(-50%); 
 
} 
 

 

 
@keyframes load-vertically { 
 
    from { 
 
    height: 0px; 
 
    } 
 
    
 
    to { 
 
    height: 300px; 
 
    } 
 
} 
 

 
@keyframes delay-show { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    
 
    to { 
 
    opacity: 1; 
 
    } 
 
}
<div class="parent"> 
 
    <div> 
 
    <h1>Title</h1> 
 
    </div> 
 
</div>

+0

ブレットに感謝します。これは多くの助けとなりました。 :) – v8lee

+0

ページロード直後にアニメーションを開始するのではなく、JSを使用して背景イメージが読み込まれるのを待ってから、アニメーションを開始するのが良いでしょう。単なる強化であり、要件ではありません。 –

0

あなたはCSSの@keyframes

img{ 
 
    width:100%; 
 
    position:fixed; 
 
    top:100%; 
 
    height:300px; 
 
    overflow:hidden; 
 
    opacity:0; 
 
    animation:slide_down 1s forwards; 
 
    -webkit-animation:slide_down 1s forwards; 
 
} 
 

 
@keyframes slide_down{ 
 
    from{opacity:0;top:-100%} 
 
    to{opacity:1;top:0%;} 
 
    
 
}@-webkit-keyframes slide_down{ 
 
    from{opacity:0;top:-100%} 
 
    to{opacity:1;top:0%;} 
 
    
 
}
<img src='http://enod.fr/wp-content/uploads/2016/05/home.jpg'>

+0

Lakshmanありがとう、これは本当に役立った!! :) – v8lee

関連する問題