HTMLタグ:マーキーの応用編

HTMLタグ:マーキーの応用編


このページはイロイロな動きをするマーキーの紹介ページです。
括弧だけは半角で表示できないので、表記する時は
●の下の文字をコピーして実行したい場所に貼りつけてください!
タグ表記は基本的に全て半角なので注意して下さい!
それと単語と単語の間はスペースを忘れずに!



基本的なマーキーの動きなどは
このページで→ 緊急開設(解説)動く文字のTAG表記


2つのマーキーを組み合わせる事でイロイロな動きが可能です!
●まずは下から上に!
<marquee direction=up height=100><marquee direction=down>文字か画像のタグなど</marquee></marquee>

(高さ100:わかりやすいように実行している所にテーブル表示しました)
下記のものが実行例です!(太字)
文字か画像のタグなど

●今度は逆に上から下に!
<marquee direction=down height=200><marquee direction=up>文字か画像のタグなど</marquee></marquee>

(高さ200:わかりやすいように実行している所にテーブル表示しました)
下記のものが実行例です!(太字)
文字か画像のタグなど

これは少し遅いので速さを速くしてみましょう!
という事は移動距離を多くすればいいわけですので
scrollamount=数字を追加すればいいので下記のように表記するとOK!
上記と同じタグにscrollamount=数字を追加します。
●例として下から上に!です。
<marquee direction=up height=100 scrollamount=5><marquee direction=down>文字か画像のタグなど</marquee></marquee>

実行例が下記のようになります!
文字か画像のタグなど

上記のように表記しましたがどうやらこの場合は逆になって
上から下になるようです!
●上記の物は流れるようになりましたが、もう一つの移動する間隔時間で
 変わります!scrolldelay=数字です!
 上記のように下から上に!です。
<marquee direction=up height=100 scrolldelay=5><marquee direction=down>文字か画像のタグなど</marquee></marquee>

実行例が下記のようになります!
文字か画像のタグなど

いくらか違うような動きに見えると思います!

●上記の物を2つ使うと下記のようになります!
文字か画像のタグなど

流れてぺらんっとめくれたような感じになります。

●上と左の複合系(1)
<marquee direction=up height=100><marquee direction=left>文字か画像のタグなど</marquee></marquee>

するとこのようになります!下記が実行例です!
文字か画像のタグなど

●上と左の複合系(2)
(1)とは逆にleftを先にupをあとにすると
<marquee direction=left height=100><marquee direction=up>文字か画像のタグなど</marquee></marquee>

するとこのようになります!下記が実行例です!
文字か画像のタグなど

上記の通りタグを実行させましたが逆にすると実行範囲が大きくなるようです。
●上と右の複合系(1)
<marquee direction=up height=100><marquee direction=right>文字か画像のタグなど</marquee></marquee>

するとこのようになります!下記が実行例です!
文字か画像のタグなど

●上と右の複合系(2)
(1)とは逆にrightを先にuoをあとにすると
<marquee direction=right height=100><marquee direction=up>文字か画像のタグなど</marquee></marquee>

するとこのようになります!下記が実行例です!
文字か画像のタグなど

上記の通りタグを実行させましたが逆にすると実行範囲が大きくなるようです。
ですので以下の表記では一つだけにします。
●下と左の複合系
<marquee direction=down height=100><marquee direction=left>文字か画像のタグなど</marquee></marquee>

するとこのようになります!下記が実行例です!
文字か画像のタグなど

上から左下に流れるようになります。
これは進む方向が下へ行くようにし,さらに左側へと落ちて行くように
左側の下ということで斜めに左下へ落ちて行く事になります!
●下と右の複合系
上記の下と左とは逆に右下側へと斜めに落ちて行くタグ表記です。
<marquee direction=down height=100><marquee direction=right>文字か画像のタグなど</marquee></marquee>

するとこのようになります!下記が実行例です!
文字か画像のタグなど

★★★★さらに応用する★★★★
●同じものを2つ使う。
例として上と上。
<marquee direction=up height=100><marquee direction=up>文字か画像のタグなど</marquee></marquee>
するとこのようになります!下記が実行例です!
文字か画像のタグなど

同じものを2つ使用する事で1つの時より速さが倍になります!
●3つ使うとどうなるか?(1)
上と右と下の場合
<marquee direction=up height=100><marquee direction=right><marquee direction=down >文字か画像のタグなど</marquee></marquee></marquee>

するとこのようになります!下記が実行例です!
文字か画像のタグなど

下から上に流れて行ってますが、時期に右側へも移動して行き
文字が途中から消えて行きます!
●3つ使うとどうなるか?(2)
上と左と下の場合
<marquee direction=up height=100><marquee direction=left><marquee direction=down >文字か画像のタグなど</marquee></marquee></marquee>

するとこのようになります!下記が実行例です!
文字か画像のタグなど

下から左斜め上へと流れて行き、文字も途中途中で消えて行きます。
●3つ使うとどうなるか?(3)
今度は順番を変えて左と上と下の場合
<marquee direction=left height=100><marquee direction=up><marquee direction=down >文字か画像のタグなど</marquee></marquee></marquee>

するとこのようになります!下記が実行例です!
文字か画像のタグなど

順番を変えると実行範囲が大きくなるようです!
●3つ使うとどうなるか?(4)
今度は順番を変えて左と右と上の場合
<marquee direction=left height=100><marquee direction=right><marquee direction=uo>文字か画像のタグなど</marquee></marquee></marquee>

するとこのようになります!下記が実行例です!
文字か画像のタグなど

上記の場合あまり変化はございませんが、後ろの文字の”ど”が
後から欠けて流れてきてまた元に戻るようです。
これはあまり役に立たないようですね。
●3つ使うとどうなるか?(5)
左と右と下の場合
<marquee direction=left height=100><marquee direction=right><marquee direction=down>文字か画像のタグなど</marquee></marquee></marquee>

するとこのようになります!下記が実行例です!
文字か画像のタグなど

上記の通りに実行しましたが(4)と変わりありませんね。
●3つ使うとどうなるか?(6)
右と左と上の場合
<marquee direction=right height=100><marquee direction=left><marquee direction=up>文字か画像のタグなど</marquee></marquee></marquee>

するとこのようになります!下記が実行例です!
文字か画像のタグなど

順番を変えての実行をしましたが上記の物と変わりありません。
●4つ使うとどうなるか?(1)
上記のイロイロな例を見る通り順番を変えても使うものがある限り
同じような動きをするようです。
上と右と下と左の場合
<marquee direction=up height=100><marquee direction=right><marquee direction=down ><marquee direction=left>文字か画像のタグなど</marquee></marquee></marquee></marquee>

するとこのようになります!下記が実行例です!
文字か画像のタグなど

文字が下から左上に流れて行き、文字が全部見える時と見えない時の
繰り返しを実行するタグになりました!
●4つ使うとどうなるか?(2)
(1)とは全部逆の動きにする→下と左と上と右の場合
<marquee direction=down height=100><marquee direction=left><marquee direction=up><marquee direction=right>文字か画像のタグなど</marquee></marquee></marquee></marquee>

するとこのようになります!下記が実行例です!
文字か画像のタグなど

(1)とは逆に上から左下に流れて行き、文字が全部見える時と見えない時の
繰り返しを実行するタグになりました!
★★■■ここまで応用編ココから下は番外編■■★★
イロイロとパターをいくつか出しましたがおわかりになったでしょうか?
これを組み合わせる事によって交差させる事も出来ます!
●上と左の複合系(1)と下と右の複合系をあわせます。
<marquee direction=up height=100><marquee direction=left>文字か
</marquee></marquee><marquee direction=down><marquee direction=right>画像のタグなど</marquee></marquee>

文字か 画像のタグなど

●上記の物と似たような動き。(でも少し違う)
<marquee behavior=alternate direction=up width=100%><marquee behavior=alternate direction=left width=100%>文字</marquee></marquee><marquee behavior=alternate direction=down width=100%><marquee behavior=alternate direction=right width=100%>画像</marquee></marquee>

文字 画像

●さらに上記の物は動きの幅を100%と全体の範囲での動きにしましたが
数値での範囲指定をすると例えば100の場合
<marquee behavior=alternate direction=up width=100><marquee behavior=alternate direction=left width=100>文字</marquee></marquee><marquee behavior=alternate direction=down width=100><marquee behavior=alternate direction=right width=100>画像</marquee></marquee>

文字 画像

文字と画像の文字がコマのように弾き合うような感じになります。

現時点ではココまでにしておきます。
まだ完成したわけではないのですがとりあえずということで!
随時情報は追加していきます。
このページが更新されたかどうかを確認するには
ページ一覧かサイトのトップ上部にある当サイトの更新情報を
見れば最新の更新情報がわかります!
現在このページはこれで一応完成です!6月12日19時15分現在


© Rakuten Group, Inc.
X
Design a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
Share by: