これは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>
でそれを行うことができますあなたは上向きにフェージングENOD内のテキストのような意味ですか? – edwarddamato
こんにちはエドワード、申し訳ありませんが、私は十分に具体的ではありませんでした。 :) ありがとうございました! – v8lee