marquee
《marquee》文章《/marquee》で右から左へスクロールします。
文章
《marquee:設定値(順不同)》文章《/marquee》で設定値に合わせた動きをします。この設定値はというと、
①inview
画面内にinviewを含む要素が表示されたタイミングでアニメーションが開始される。
《marquee:inview》文章《/marquee》
文章
②再生時間
t数字で数字秒間で1再生。
《marquee:t1》1秒間で1再生《/marquee》
1秒間で1再生
1秒間で1再生なのですごく速いです。
《marquee:t10》10秒間で1再生《/marquee》
10秒間で1再生
10秒間で1再生なのでゆっくりです。
③遅延時間
d数字で数字秒経過後再生開始。
《marquee:inview,d1》1秒経過後再生開始《/marquee》
1秒経過後再生開始
《marquee:inview,d3》3秒経過後再生開始《/marquee》
3秒経過後再生開始
④再生回数
l数字で数字回再生。lを未指定の場合は無限。
《marquee:inview,l1》1回再生《/marquee》
1回再生
《marquee:inview,l5》5回再生《/marquee》
5回再生
⑤再生方向
《marquee:inview,normal》右→左《/marquee》
右→左
《marquee:inview,reverse》左→右《/marquee》
左→右
《marquee:inview,alternate》右→左→右《/marquee》
右→左→右
《marquee:inview,alternate-reverse》左→右→左《/marquee》
左→右→左
⑥表示範囲
《marquee:hidden》文章《/marquee》
文章
両端隠れだそうです。
《marquee:visible》文章《/marquee》
文章
両端表示だそうです。「文章」が端っこにぶつかっても欠けてないのがお分かりいただけると思います。
《marquee:inview,l1,visible-in》開始表示《/marquee》
開始表示
開始表示なのではじめと同じ何も表示されてない画面になるんだと思います。
《marquee:inview,l1,visible-out》終了時表示《/marquee》
終了時表示
終了時表示なので1番最後の画面になります。
⑦進行割合
《marquee:linear》線形移動《/marquee》
線形移動
よく分からないです……デフォルトで線形移動でしょうか……？
《marquee:steps(5)》5段階で遷移《/marquee》
5段階で遷移
《marquee:steps(10)》10段階で遷移《/marquee》
10段階で遷移
カチカチという感じで動きます。
《marquee:ease》滑らか《/marquee》
滑らか
ゆるやかに動きます。
《marquee:ease-in》ゆっくり(開始)《/marquee》
ゆっくり(開始)
最初だけゆるやかに動きます。
《marquee:ease-out》ゆっくり(終了)《/marquee》
ゆっくり(終了)
最後だけゆるやかに動きます。
《marquee:ease-in-out》ゆっくり(両端)《/marquee》
ゆっくり(両端)
最初と最後だけゆるやかに動きます。
⑧回転
《marquee:rotate-x》あ《/marquee》
あ
x軸で回転。
《marquee:rotate-y》あ《/marquee》
あ
y軸で回転。
《marquee:rotate》あ《/marquee》
あ
z軸で回転。
《marquee:rotate-z,inline》あ《/marquee》
あ
inlineは行内回転です。
⑨cubic-bezier(0～1/0～1/0～1/0～1)
《marquee:cubic-bezier(0/0/0/0)》test《/marquee》
test
《marquee:cubic-bezier(0/0/0/1)》test《/marquee》
test
《marquee:cubic-bezier(0/0/1/1)》test《/marquee》
test
《marquee:cubic-bezier(0/1/1/1)》test《/marquee》
test
《marquee:cubic-bezier(1/1/1/1)》test《/marquee》
test
速度と数字が関係あるのでしょうがちんぷんかんぷんです。ちなみに運営様の例だとこんな感じになっています。
《marquee:alternate,visible,cubic-bezier(0.68/-0.55/0.265/1.55),t5,d0,l》test《/marquee》
test
よく分からないので解説は割愛させていただきます……。→有志の方が感想欄にて説明してくださいました！そちらをご覧ください。
⑩縦スクロール
《marquee:vertical》縦スクロール《/marquee》
縦スクロール
verticalで縦スクロールが出来ます。また、wやhでこの範囲を決めることが出来ます。
《marquee:vertical,h5》縦スクロール《/marquee》
縦スクロール
《marquee:vertical,h10》縦スクロール《/marquee》
縦スクロール
《marquee:vertical,w10》あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。《/marquee》
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
《marquee:vertical,w70%》あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。《/marquee》
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
《marquee:h2,l2,vertical-visible-out,inview》
あ
い
う
え
お
縦スクロール（終了時表示）
《/marquee》
vertical-visible-outで縦スクロールも終了時表示に出来るようです。
⑪表やbox
表やboxも移動させることが出来ます。
《marquee:h13》《table:#0000FF》[[_=\3.（表も動きます）[[_.（1行目1列目th）[_>.（1行目2列目th右寄せ）[/3_.（１行目rowspan）[[=.（2行目1列目td中央寄せ）[#DDDDDD.（2行目2列目黒背景td）[[\2.（3行目colspan）[[\3.（4行目colspan）《/table》《/marquee》
| （表も動きます） |
|---|
| （1行目1列目th） | （1行目2列目th右寄せ） | （１行目rowspan） |
|---|
| （2行目1列目td中央寄せ） | （2行目2列目黒背景td） |
| （3行目colspan） |
| （4行目colspan） |
《marquee:h9》《box:p0.2,bo#DDDDDD,bor1,bg#AAAAFF,font0,overhidden,w13》これはboxの角丸テスト
改行１《orange》テスト《/orange》
改行２《/box》《/marquee》
《marquee》《bgcolor:#FFE74A》 台詞 《/bgcolor》《/marquee》
台詞
この際、boxは内部をwで指定しないと文字がおかしくなりました。表やboxは運営様の「特殊タグの例」からお借りしています。
blinkとfade
blinkは点滅、fadeは緩やかに点滅です。
《blink:○》点滅《/blink》○は1～999の半角英数字(点滅間隔)
《blink:3》点滅《/blink》
点滅だと3秒間隔で点滅、
《blink:8》点滅《/blink》
点滅だと8秒間隔で点滅です。
《fade:○》緩やかに点滅《/fade》○は1～999の半角英数字(点滅間隔)
《fade:3》緩やかに点滅《/fade》
緩やかに点滅だと3秒間隔で緩やかに点滅、
《fade:8》緩やかに点滅《/fade》
緩やかに点滅だと8秒間隔で緩やかに点滅です。
blinkとfadeは性質はほぼ一緒なのでここからはblinkのみで説明します。
①inview
画面内にinviewを含む要素が表示されたタイミングでアニメーションが開始される。
《blink:inview》文章《/blink》
文章
②再生時間
t数字で数字秒間で1再生。
《blink:t1》1秒間で1再生《/blink》
1秒間で1再生
1秒間で1再生なのですごく速いです。
《blink:t10》10秒間で1再生《/blink》
10秒間で1再生
10秒間で1再生なのでゆっくりです。
③遅延時間
d数字で数字秒経過後再生開始。
《blink:inview,d1》1秒経過後再生開始《/blink》
1秒経過後再生開始
《blink:inview,d3》3秒経過後再生開始《/blink》
3秒経過後再生開始
④再生回数
l数字で数字回再生。lを未指定の場合は無限。
《blink:inview,l1》1回再生《/blink》
1回再生
《blink:inview,l5》5回再生《/blink》
5回再生
⑤再生方向
《blink:inview,normal》右→左《/blink》
右→左
《blink:inview,reverse》左→右《/blink》
左→右
《blink:inview,alternate》右→左→右《/blink》
右→左→右
《blink:inview,alternate-reverse》左→右→左《/blink》
左→右→左
点灯と消滅のタイミングが違うようです。詳しくは感想欄を参照なさってください。
⑤進行割合
《blink:linear》線形移動《/blink》
線形移動
《blink:steps(5)》5段階で遷移《/blink》
5段階で遷移
《blink:steps(10)》10段階で遷移《/blink》
10段階で遷移
《blink:ease》滑らか《/blink》
滑らか
《blink:ease-in》ゆっくり(開始)《/blink》
ゆっくり(開始)
《blink:ease-out》ゆっくり(終了)《/blink》
ゆっくり(終了)
《blink:ease-in-out》ゆっくり(両端)《/blink》
ゆっくり(両端)
blinkがfadeになります。また、《fade:steps(1)》1段階で遷移《/fade》でfadeがblinkと一緒になるようです。
⑥表示期間
v○○-○○で再生時間を0%～100%としたとき、どの%の期間を表示対象とするかを決められます。未指定の場合はv50-50です。
《blink:v1-90,t3》あ《/blink》
あ
これだと3秒間の1-90%の表示、
《blink:v1-90》あ《/blink》
あ
無指定だとt5と同じになるようなので5秒間の1-90%の表示となります。
⑦アニメーション前後の表示
《blink:none》あ《/blink》
あ
デフォルトで、開始前・終了後はスタイルなしだそうです。
《blink:v50-100,l2,forwards,inview》点滅アニメーション終了後の状態を維持《/blink》
点滅アニメーション終了後の状態を維持
終了時の状態で表示するforwardsは、v100と合わせるとblinkした文字をずっと表示してくれます。
《blink:l1,d3,normal,backwards,inview》あ《/blink》
あ
開始前は開始時の状態で表示（遅延時間有りの場合）だそうです。normal,alternate適用時に実行されます。
《blink:v50-100,both,inview,d3,l4》あ《/blink》
あ
開始前・終了時の状態で表示だそうです。こちらもv100を用いればずっとその文字を表示してくれるようです。
⑧box
blink,fadeの対象にboxなどを使用する場合、boxと追加することで背景ごと点滅する。
《blink:box》《boxbgcolor:#FF0000》《white》背景込みで点滅できます。《/white》《/boxbgcolor》《/blink》
telop
カラオケのテロップ的なものらしいです。文字が潰れるため、xbigタグなどとの併用を推奨だそうです。
①色
文字縁色がc#○○、文字背景色がbg#○○-#○○で左側がスタート時の色、右側がアニメーション終了時の色となります。○○はカラーコード3桁or6桁です。
《xbig》《telop:c#000000,bg#FF0-#FF0000,l999》カラオケテロップみたいな感じ《/telop》《/xbig》
カラオケテロップみたいな感じ
《telop:c#000000,bg#FFFFFF-#000000,l999》■■■■■■■■■■■■■■■■■■《/telop》
■■■■■■■■■■■■■■■■■■
gradationで文字背景色がグラデーションになります。
《xbig》《telop:c#000000,bg#FF0-#FF0000,gradation,l999》カラオケテロップみたいな感じ《/telop》《/xbig》
カラオケテロップみたいな感じ
②inview
画面内にinviewを含む要素が表示されたタイミングでアニメーションが開始される。
《xbig》《telop:c#000000,bg#FF0-#FF0000,inview》カラオケテロップみたいな感じ《/telop》《/xbig》
カラオケテロップみたいな感じ
②再生時間
t数字で数字秒間で1再生。
《xbig》《telop:c#000000,bg#FF0-#FF0000,inview,t1》1秒間で1再生《/telop》《/xbig》
1秒間で1再生
1秒間で1再生なのですごく速いです。
《xbig》《telop:c#000000,bg#FF0-#FF0000,inview,t10》10秒間で1再生《/telop》《/xbig》
10秒間で1再生
10秒間で1再生なのでゆっくりです。
③遅延時間
d数字で数字秒経過後再生開始。
《xbig》《telop:c#000000,bg#FF0-#FF0000,inview,d1》1秒経過後再生開始《/telop》《/xbig》
1秒経過後再生開始
《xbig》《telop:c#000000,bg#FF0-#FF0000,inview,d3》3秒経過後再生開始《/telop》《/xbig》
3秒経過後再生開始
④再生回数
l数字で数字回再生。lを未指定の場合はおそらく1回だけ。
《xbig》《telop:c#000000,bg#FF0-#FF0000,inview,l1》1回再生《/telop》《/xbig》
1回再生
《xbig》《telop:c#000000,bg#FF0-#FF0000,inview,l5》5回再生《/telop》《/xbig》
5回再生
⑤再生方向
《xbig》《telop:c#000000,bg#FF0-#FF0000,l999,normal》左→右《/telop》《/xbig》
左→右
《xbig》《telop:c#000000,bg#FF0-#FF0000,l999,reverse》右→左《/telop》《/xbig》
右→左
《xbig》《telop:c#000000,bg#FF0-#FF0000,l999,alternate》左→右→左《/telop》《/xbig》
左→右→左
《xbig》《telop:c#000000,bg#FF0-#FF0000,l999,alternate-reverse》右→左→右《/telop》《/xbig》
右→左→右
⑥進行割合
《xbig》《telop:c#000000,bg#FF0-#FF0000,l999,linear》線形《/telop》《/xbig》
線形
《xbig》《telop:c#000000,bg#FF0-#FF0000,l999,steps(5)》5段階で遷移《/telop》《/xbig》
5段階で遷移
《xbig》《telop:c#000000,bg#FF0-#FF0000,l999,steps(10)》10段階で遷移《/telop》《/xbig》
10段階で遷移
《xbig》《telop:c#000000,bg#FF0-#FF0000,l999,ease》滑らか《/telop》《/xbig》
滑らか
《xbig》《telop:c#000000,bg#FF0-#FF0000,l999,ease-in》ゆっくり(開始)《/telop》《/xbig》
ゆっくり(開始)
《xbig》《telop:c#000000,bg#FF0-#FF0000,l999,ease-out》ゆっくり(終了)《/telop》《/xbig》
ゆっくり(終了)
《xbig》《telop:c#000000,bg#FF0-#FF0000,l999,ease-in-out》ゆっくり(両端)《/telop》《/xbig》
ゆっくり(両端)
⑦アニメーション前後の表示
《xbig》《telop:c#000000,bg#FF0-#FF0000,inview,none》開始前・終了後はスタイルなし《/telop》《/xbig》
開始前・終了後はスタイルなし
《xbig》《telop:c#000000,bg#FF0-#FF0000,inview,forwards》終了時の状態で表示《/telop》《/xbig》
終了時の状態で表示
《xbig》《telop:c#000000,bg#FF0-#FF0000,inview,backwards,d1》開始前は開始時の状態で表示（遅延時間有りの場合）《/telop》《/xbig》
開始前は開始時の状態で表示（遅延時間有りの場合）
《xbig》《telop:c#000000,bg#FF0-#FF0000,inview,both》開始前・終了時の状態で表示《/telop》《/xbig》
開始前・終了時の状態で表示
これがデフォルトだそうですが、正直違いがよく分からないです……。
《telop:c#7f7258,bg#fff-#0054A6,normal,t3,l1,inview,d1,cubic-bezier(0.4/0.6/0.2/0.2)》あいうえおかきくけこ《/telop》
あいうえおかきくけこ
cubic-bezier(0～1/0～1/0～1/0～1)も使えるっぽいのですが、よく分からないので解説は割愛させていただきます……。