アニメーションタイトル背景

CSS3によるテキストアニメーションタイトルを表示する背景です。 画面中央に指定した文字列がアニメーションを伴って表示されます。フォントは Googleフォントを利用します。

CGI名	説明	サンプル画像
catitleg	グラデーション文字
catitlew	白文字＋ストライプ
catitleb	黒文字＋ストライプ
ml2title	文字毎に貼り付け
ml6title	文字毎にウェーブ
ml15title	単語毎に登場

指定できるパラメータは以下の通りです。

catitleg

パラメータ名	説明	値
tx	タイトル文字列	（空白文字は半角「＋」で記述）
bc	背景カラー	000000〜ffffff
fs	文字サイズ	10〜70
fw	文字ウェイト	200〜900
ff	フォント名	GoogleFont名 (空白文字は半角「＋」で記述)
of	縦方向のオフセット	0〜1080
cp	カラーパターン	’g1’, ’g2’, ’g3’

catitlew / catitleb

パラメータ名	説明	値
tx	タイトル文字列	（空白文字は半角「＋」で記述）
bc	背景カラー	000000〜ffffff
fs	文字サイズ	10〜70
fw	文字ウェイト	200〜900
ff	フォント名	GoogleFont名 (空白文字は半角「＋」で記述)
of	縦方向のオフセット	0〜1080
bri	明度	0〜100〜200 (デフォルトは100)
sat	彩度	0〜100〜200 (デフォルトは100)
hue	色相	0〜100〜200 (デフォルトは100)

ml2title / ml6title / ml15title

パラメータ名	説明	値
tx	タイトル文字列	（空白文字は半角「＋」で記述）
bc	背景カラー	000000〜ffffff
fs	文字サイズ	10〜
fw	文字ウェイト	200〜900
ff	フォント名	GoogleFont名 (空白文字は半角「＋」で記述)
of	縦方向のオフセット	0〜1080
ht	ループ待機時間	1000〜(ミリ秒)

利用例

・グラデーションタイトルをLobsterフォントで画面上に表示する場合のURL

http://yandms.com/beapo/parts/catitleg.php?tx=BEAPO+SIGNAGE&ff=Lobster&fs=60 表示を確認

・黒文字にブルーのストライプをアニメーション表示する場合のURL

http://yandms.com/beapo/parts/catitleb.php?tx=BEAPO+SIGNAGE&fw=700&hue=20 表示を確認

・オレンジで一文字ずつタイトルを左から表示していくアニメーションのURL

http://yandms.com/beapo/parts/ml2title.php?tx=BEAPO+SIGNAGE&fc=ee9933&fw=300 表示を確認

謝辞

・Moving Letters by Tobias Ahlin作者サイト

・Animated Text Fill by Daniel Riemer作者サイト