ブログネタに窮して冷や汗かいてる時にパッと思いついて作ってみようと思ったんですが、すぐに挫折しました。
↑僕がやりたいのはこういうの。
実際に途中までやったのがこれ！
動きだけなら技術的に出来るでしょうが、時間がなくて断念…。
最初CSS3でやったけど、テキストのレンダリングでこけて今はjQueryで動かしてます。（ただし単純にanimateメソッドで動かしています）
最終的には音と連動させたいけどどこまでできるやら。。。
そこまでやっちゃうとWebサーバーにあげて公開できないですけどね。。
ちょうどJSやCSS3のアニメーションやCanvasが身近でHotになってきているので、3パターン作ってみようかなと思っています。。
このままではちょっと内容が薄すぎるので無駄な抵抗でCSS Tipsを書き残しておきます。。
フルスクリーン表示とものを上下中央に配置するCSS
html,body {
height:100%;
}
body {
margin: 0;
padding: 0;
}
div {
width: 100%;
height:100%;
}
上記のコードを書くことでこのようなページを作れます。
#text1 p {
position: absolute;
top: 50%;
margin: -300px 0 0 0;
font-size: 600px;
line-height: 1;
}
上記のコードを書くことでさきほどの北斗の拳クローンみたいにテキストを上下中央に配置できます。
皆が知っているようなコードを苦し紛れに書いて申し訳ないです！
次は当たらないことを祈ります…。