2006年 03月 16日
【HTML+TIME】 カスタマイズ 5 文字を移動させて見ましょう
|
IE5以降だけです。他のブラウザの方ごめんなさい。
HTML+TIMEのカスタマイズです。いつもおこしになっていただきありがとうございます。
今回のカスタマイズは時間とともに文字を移動させるカスタマイズです。
ちなみに...これはmarqueeではありません
その前にお願いです^^;
今回のソースを使われる方...出来たらでいいのでコメントくださいね^^
拝見させていただきたいので、よろしくお願いします。
あと、出来たらソースの転載はなるべくしないでね^^;
①と②は前回と同じです。
前回のカスタマイズを行った方は、記事の書き方だけで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);}
これで準備は終了。
記事の書き方
<span ID="idou" STYLE="position:relative;">移動させる文字</span>
<t:animateMotion targetElement="idou" begin="3" from="0,0" to="200,200" dur="30" autoreverse="true" repeatCount="indefinite">
解説
1.移動させる文字
ここの部分に移動させる文字を書いて下さい。
2.begin="3"
移動の開始のタイミングです。ページを開いてから3秒後に移動を開始させます。
3.from="0,0" to="200,200"
座標の設定です。記入した位置を0,0として200,200まで動かします。
横、縦 の順で指定しています。
4.dur="30"
移動させる時間です。小さい数字ほど早く移動します。
5.autoreverse= "true"
折り返して戻すのでtrueにします。
*戻さない場合はfalseにします。
(その場合は fill="hold" を追記します)
6.repeatCount="indefinite"
繰り返しの設定です。この動作を表示の間繰り返すのでindefiniteを設定します。
(autoreverse= "false" の場合は repeatCountは削除してください>
プレビューで見て調整してみてくださいね。
上手く出来ない方はご連絡くださいね。検証いたしますので
by chocobopapa
| 2006-03-16 12:36
| スキン編集