ページの読み込み時に要素をイーズイン/フェードする最良の方法を探しています。
http://alpha.musicinfo.fi/で検索すると、コンテンツがスライド/フェードインするように表示されるのがとても気に入っています。
ブラウザとモバイルで非常にスムーズに機能しているため、どのようにそれを達成しているのか疑問に思っていました.
ありがとう!
ページの読み込み時に要素をイーズイン/フェードする最良の方法を探しています。
http://alpha.musicinfo.fi/で検索すると、コンテンツがスライド/フェードインするように表示されるのがとても気に入っています。
ブラウザとモバイルで非常にスムーズに機能しているため、どのようにそれを達成しているのか疑問に思っていました.
ありがとう!
最も単純なアニメーションには、 opera mobile 以外のすべてでサポートされているCSS3 トランジションを使用することをお勧めします。
transition: top 0.2s ease-in, opacity 0.2s ease-in
-webkit-transition: top 0.2s ease-in, opacity 0.2s ease-in
opacity: 0.0;
position: relative;
top: 20px;
そして、javascript または jQuery を使用して、ロード時に新しい状態を設定できます。
$('#element').css({opacity: 1.0, top: '0px'})
.animate()
ただし、最大限の柔軟性と制御を得るには、jQuery の関数を使用することをお勧めします。次に、次のようなことができます
$('#element').animate({
opacity: '1.0',
top: '0px'
}, 200)
デフォルトの CSS をopacity: 0; top: 20px; position: relative;
addClass
jQuery の関数を使用した別の方法を次に示します。
例はちょっと醜いですが、アイデアが得られれば。また、物事をスムーズにするために、CSS3 トランジションtransition
などを使用します。
また、ボックスを折りたたむように変更する複数のクラスを追加します。これは単なる別の方法であり、最善ではないかもしれませんが、別の方法です。
これがフィドルです: http://jsfiddle.net/GrsXx/