2006年 03月 09日
【HTML+TIME】 カスタマイズ 2 文字サイズを変化させましょう②
|
IE5以降だけです。他のブラウザの方ごめんなさい。
前回に引き続き、HTML+TIMEのカスタマイズです。
今回は、時間とともに文字を大きくして、そのまま固定する方法です。
(前回は小さい-大きいの繰り返し)
その前にお願いです^^;
今回のソースを使われる方...出来たらでいいのでコメントくださいね^^
拝見させていただきたいので、よろしくお願いします。
あと、出来たらソースの転載はなるべくしないでね^^;
o(^o^)o
①と②は前回と同じです。
前回のカスタマイズを行った方は、記事の書き方だけでOKです。
①HTML全体の一番最初の行に次の文をコピーしてください。
<HTML XMLNS:t="urn:schemas-microsoft-com:time">この2行の文は、動きのなかったHTMLに動きを持たせるための宣言文です。
<?IMPORT namespace="t" implementation="#default#time2">
絶対に入れ忘れないで下さい。
今後のカスタマイズでも、この2行が必要になってきますので^^
②CSSの最後に次の文をコピーしてください。
.time {behavior: url(#default#time2);}
これで準備は終了。でも記事書くときは結構大変ですのでがんばってみてください。
記事の書き方
<center><DIV ID="div2" STYLE="font-family:Comic Sans MS;">o(^o^)o</DIV><t:animate targetElement="div2" attributeName="font-size" from="10" to="120" begin="2" dur="1" autoreverse= "false" fill="hold" /></center>
注意 同じ表示画面で、HTML+TIME のカスタマイズをするときは div1、div2などのように違うdivにしてください。交じり合ってしまいますので^^;
解説
1.<center>~</center>
この文は間に挟まれているものを真ん中に表示させると言う意味です。
省略すれば、post領域の設定に従います。(通常は左寄せかな?)
2.o(^o^)o
ここの部分に拡大させたい文章を書いて下さいね^^
3.="font-size" from="10" to="120"
ここは、拡大の設定です。fontサイズを 10pxから120pxまで変化させます。
プレビューを見ながら大きさは調整してください。
4.begin="2"
ここは、ブラウザでこのページを表示させてから、拡大させるまでの秒数です。
5.dur="1"
変化させる秒数です。
この指定した秒数の間に先ほどのフォントサイズが変化していきます。
(私の場合1秒の間にフォントサイズを10pxから120pxに変化させています)
6.autoreverse= "false"
今回は小さく戻さないのでfalseにします。
7.fill="hold"
動作が終わったあと、大きいままで保持します。
(この行を設定しない場合、動作が終わったあと、いきなり最初の大きさに切り替わります)
前回との違い...repeatCountは繰り返さないので設定しません。
では、楽しんでみてくださいね^^
by chocobopapa
| 2006-03-09 22:05
| スキン編集