CSSトランジションを使って、ページロード時にテキストパラグラフをフェードインさせることはできますか?
http://dotmailapp.com/][1]での見栄えがとても気に入っているので、CSSを使って同じような効果を使いたいと思っています。このドメインはすでに購入されており、前述のような効果はありません。アーカイブされたコピーは[on the Wayback Machine]1で見ることができます。
このマークアップを持つ
<div id="test">
<p>This is a test</p>
</div>
以下のCSSルールを持つ。
#test p {
opacity: 0;
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
ロード時にトランジションを発生させるには?
もしあなたが自分自身を刺激するようなトランジションを探しているなら、[CSS 3 Animations][1]を使うべきです。これらはサポートされていませんが、まさにこのような目的のために作られました。
#test p {
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
すべてのモダンブラウザおよび Internet Explorer 10(およびそれ以降): http://caniuse.com/#feat=css-animation
別の方法として、jQuery(または普通のJavaScript;3番目のコードブロックを参照)を使って、読み込み時にクラスを変更することもできます。
$("#test p").addClass("load");
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
#test p.load {
opacity: 1;
}
document.getElementById("test").children[0].className += " load";
すべてのモダンブラウザおよび Internet Explorer 10(およびそれ以降): http://caniuse.com/#feat=css-transitions
あるいは、.Mailが採用している方法を利用することもできます。
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
jQuery 1.xです。すべてのモダンブラウザと Internet Explorer 6 (およびそれ以降): http://jquery.com/browser-support/ 対応ブラウザ jQuery 2.x。すべてのモダンブラウザとInternet Explorer 9(およびそれ以降): http://jquery.com/browser-support/
この方法は、対象となるブラウザがCSS 3のトランジション*やアニメーションに対応している必要がないため、最も相互互換性に優れています。
[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation
onload=""`のHTML属性を使い、JavaScriptで要素の不透明度のスタイルを調整することができます。
CSSは提案通りにしてください。HTMLコードを編集して
<body onload="document.getElementById(test).style.opacity='1'">
<div id="test">
<p>This is a test</p>
</div>
</body>
**読み込み完了時にページ全体をフェードインさせることもできます。
HTMLです。
<body onload="document.body.style.opacity='1'">
</body>
CSSです。
body{
opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s; /* Safari */
}
W3Schools]1のサイトをご覧ください。transitionsや、change styles with JavaScriptの記事をご覧ください。
@A.M.K'さんの「jQueryを使わずにトランジションを行う方法」という質問にお答えします。非常に簡単な例を作ってみました。もう少し考える時間があれば、JavaScriptのコードを完全になくすことができるかもしれません。
<style>
body {
background-color: red;
transition: background-color 2s ease-in;
}
</style>
<script>
window.onload = function() {
document.body.style.backgroundColor = '#00f';
}
</script>
<body>
<p>test</p>
</body>