slide - オンロード ページで div スライドをイージングで表示

Question

div (class="top" を使用) を top:-300px; からスライドさせたいと思います。上に:40px; いくつかの素晴らしい緩和を伴います。例が見つかりません。ロードページでこれを行う方法を知っている人はいますか?

Answer 1

JavaScript と CSS3 を次に示します。

JavaScript:

<script>
document.getElementById("slide").style.top="40px";
</script>

そしてCSS：

-webkit-transition:all 1s;-ms-transition:all 1s;-moz-transition:all 1s;-o-transition:all 1s;-webkit-transition:all 1s;

スライドする要素には、ID「スライド」が必要です。また、-300px にするには、CSS に「position:absolute;top:-300px」を含める必要があります。「left:20%;」を追加することもできます。または、見栄えを良くするためにCSSに何かを追加します。あなたのデザインに合うものは何でも。CSS transition プロパティについて調べる必要があります。特殊効果にとてもいいです。今回はスライドするのに1秒かかるようにしました。いつでも変更できます。

これは、JavaScript ライブラリーであるjQueryを使用して実装することもできます(コードがさらに少なくて済みます) が、私は通常、できる限り通常の JavaScript と CSS を好みます。

上で書いたコードのデモは次のとおりです: jsFiddle。

ああ、それがあなたを助けたなら、答えとしてこの質問をマークしてください. それは私に特権を与え、より多くの評判を得るでしょう.

これが役に立ったことを願っています！