ページの読み込み中にドキュメントからスライドするテキスト

Question

私の目的は、挨拶メッセージをページの「外側」にスライドさせることです。私は最近ここで参考文献を検索し、以下のようなcloesetコードしか見つけられませんでしたが、テキストがページの中央に表示されるように思っていません...誰かが私を助けることができればそれを感謝します。

$(document).ready(function() { 
 
    $('#greeting').hide(); 
 
    $('#greeting').slideDown(1000); 
 
});

#greeting { padding-top: 100px; }

<h1 id="greeting">Welcome!</h1> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

この打撃を与えます！

jQueryの：

$(document).ready(function(){ // on document ready 
    $("#greeting").addClass("active"); // add the class "active" to the greeting text 
}); 

CSS：

#greeting{ 
    position: fixed; 
    top: -200px; // start at 200px above the page 
    transition: top 500ms; // take 0.5s to move from -200px to 500px 
} 
#greeting.active{ // when #greeting has class "active" 
    top: 500px; // move to 500px from the top of the page 
} 

このアプローチでは、jQueryのとともにCSSの使用が必要ですが、うまくいけばそれで十分です。

もちろん、のプロパティ値を必要な値に変更して、目的の効果を得ることができます。

希望します。