要素が完全に読み込まれ、遷移が停止したら、h2
要素をh1
要素の最終位置からドロップさせようとしています。私はこれを達成することができませんでした、そして現在h2
要素はh1
要素のすぐ下からちょうどフェードインします。
これが私のコードです:
$('#header').delay(3250).animate({ 'opacity': [1, "linear"] }, 500);
$('#subheader').delay(4000).animate({ 'opacity': [1, "linear"] }, 500);
h1, h2 {
opacity: 0;
}
/* HEADER TRANSITION */
.moveHeader {
-webkit-animation: headerMoving 1.5s;
animation: headerMoving 1.5s;
animation-fill-mode: forwards;
animation-delay: 3s;
}
@-webkit-keyframes headerMoving {
from {
-webkit-transform: translateY(-30px);
}
to {
-webkit-transform: translateY(0px);
}
}
@keyframes headerMoving {
from {
transform: translateY(-30px);
}
to {
transform: translateY(0px);
}
}
/* SUBHEADER TRANSITION */
.moveSub {
-webkit-animation: subMoving 1s;
animation: subMoving 1s;
animation-fill-mode: forwards;
animation-delay: 4s;
}
@-webkit-keyframes subMoving {
from {
-webkit-transform: translateY(-10px);
}
to {
-webkit-transform: translateY(0px);
}
}
@keyframes subMoving {
from {
transform: translateY(-10px);
}
to {
transform: translateY(0px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="header" class="moveHeader">Header</h1>
<h2 id="subheader" class="moveSub">Subheader</h2>
実行を押してアニメーションが開始されるまで3/4秒かかります。
ありがとうございました!
このようなもの?サブヘッダー遷移でtranslateY
fromから-10
toの値を変更する必要があり-50
ました。それで遊んで、あなたに最も適しているものを見てください。
それが必要かどうかを確認するために試してみてください。
$('#header').delay(3250).animate({ 'opacity': [1, "linear"] }, 500);
$('#subheader').delay(4000).animate({ 'opacity': [1, "linear"] }, 500);
h1, h2 {
opacity: 0;
}
/* HEADER TRANSITION */
.moveHeader {
-webkit-animation: headerMoving 1.5s;
animation: headerMoving 1.5s;
animation-fill-mode: forwards;
animation-delay: 3s;
}
@-webkit-keyframes headerMoving {
from {
-webkit-transform: translateY(-30px);
}
to {
-webkit-transform: translateY(0px);
}
}
@keyframes headerMoving {
from {
transform: translateY(-30px);
}
to {
transform: translateY(0px);
}
}
/* SUBHEADER TRANSITION */
.moveSub {
-webkit-animation: subMoving 1s;
animation: subMoving 1s;
animation-fill-mode: forwards;
animation-delay: 4s;
}
@-webkit-keyframes subMoving {
from {
-webkit-transform: translateY(-50px);
}
to {
-webkit-transform: translateY(0px);
}
}
@keyframes subMoving {
from {
transform: translateY(-50px);
}
to {
transform: translateY(0px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="header" class="moveHeader">Header</h1>
<h2 id="subheader" class="moveSub">Subheader</h2>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加