世間一般では北斗の拳はただの世紀末的ギャグ漫画ということになっていて、泣ける漫画ではないらしいのですが、僕は異常に感情移入してしまっているのかボロボロ泣くことができます。
ザックリ思い出しただけでも、バットの育ての親が殺された時、マミヤが唯一の肉親である弟を殺されたけど村人の前では気丈に振舞っていたのに両親の墓の前で泣いた時、レイが死ぬ時、シュウが死ぬ時…etc
基本的にいいキャラが死ぬ時は悲しいです。
（あと、誰かが倒される≒殺される時に流れるBGMが良いんです。。）
北斗の拳には悪者もいるのですが、雑魚以外根っからの悪人というのは少ないです。ラオウとかサウザーとか世に混乱をもたらす元凶ですが、元々悪いヤツではなかったのに成長の過程でひねくれてしまって残念なことになりました。
僕が認める根っからの悪人はジャギとアミバ。この二人だけはただのクズです。
ジャギで思い出すのはCR北斗の拳だったかのCMでケンシロウが「俺の名を言ってみろ」と言ってるんですが、それはケンシロウを騙ったジャギのセリフで、確かにケンシロウはジャギを倒す直前にジャギに対して言っているのですが、あの使われ方は納得いきません。
ちなみにCR北斗の拳とか新しい北斗の拳の絵は苦手で映画版とかは全然観ていません。
北斗無双をちょっと欲しいなと思いつつも僕の北斗の拳じゃないので購入には至らず…。
漫画版かアニメ版かどっちが好きかと言うと甲乙つけがたいです。
漫画は安定感があるのと、アニメ化されなかったカイオウを倒した後の話が蛇足ながらハマった話があったので好きです。
アニメ版は原作になかったどうでもいいエピソードが挿入されていて、序盤によく差し込まれていたのでシンと戦うあたりのところはあまり好きではありません。あと作画している人（プロダクション）が何個かあるみたいで回によって全然絵が違って、たまに崩壊しているときがあります。そこらへんがマイナスポイントなのですが、前述したとおりBGM等の音楽が好きなのでアニメ版もなかなかいいなと思います。
好きなキャラベスト3と好きな女性キャラベスト3とか好きな技ベスト3とか色々発表したかったのですが、前置きが長くなり過ぎるので割愛させていただきます。
画像で察してくださいね。。
長くなりましたが、ここからが本題です！
前回お見せしたオープニング（SILENT SURVIVER）のイントロアニメをブラウザで再現したものをブラッシュアップしました！全然ノウハウとスキルがないのでかなり拙い出来になっていますが、以前よりはマシなものになっています。。
ではどうぞ。
北斗の拳のオープニングのイントロを再現する
今回はちゃんとCSS3でやりました～。完璧ではないので、WebKitでしか動きません。。
今回のhtmlはこんなのです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>北斗の拳のオープニングのイントロを再現する</title> <link rel="stylesheet" href="assets/css/reset.css" /> <link rel="stylesheet" href="assets/css/style.css" /> </head> <body> <div id="contents"> <div id="text1"><p>世紀末救世主伝説</p></div> <div id="text2"> <p class="hokutonoken01">北斗<span>の</span>拳</p> <p class="hokutonoken02">北斗<span>の</span>拳</p> <p class="hokutonoken03">北斗<span>の</span>拳</p> <p class="hokutonoken04">北斗<span>の</span>拳</p> <p class="hokutonoken05">北斗<span>の</span>拳</p> </div> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="assets/js/script.js"></script> </body> </html>
元々は「北斗の拳」×5の部分はJSで生成していたのですが、ボタンを押した後に再生をスタートさせるとかしないと開始が遅れるので、今のところべた書きしています。。
CSS（scss）はアニメーションさせているところだけ抜粋します。。（
html {
-webkit-animation: 'bg' 3.6s linear 21.4s 1 alternate;
}
#text1 {
p {
-webkit-animation: 'seikimatsu' 17s linear 0.5s 1 alternate;
}
}
#text2 {
.hokutonoken01 {
-webkit-animation: 'hokutonoken01' 7s ease-out 18s 1 alternate;
}
.hokutonoken02 {
-webkit-animation: 'hokutonoken02' 6.6s ease-out 18.4s 1 alternate;
}
.hokutonoken03 {
-webkit-animation: 'hokutonoken03' 6.2s ease-out 18.8s 1 alternate;
}
.hokutonoken04 {
-webkit-animation: 'hokutonoken04' 5.8s ease-out 19.2s 1 alternate;
}
.hokutonoken05 {
-webkit-animation: 'hokutonoken05' 5.4s ease-out 19.6s 1 alternate;
}
}
@-webkit-keyframes 'bg' {
0% {background-color: #24a1bd;}
100% {background-color: #24a1bd;}
}
@-webkit-keyframes 'seikimatsu' {
0% {display:block;color:#fff;}
100% {left: -6200px;}
//100% {-webkit-transform: translate(-6200px,0);}
}
@-webkit-keyframes 'hokutonoken01' {
0% {visibility: visible;}
35.714282% {-webkit-transform: scale(0.33,0.33);}
45% {text-shadow: none;}
50% {text-shadow: 0 0 700px rgba(255,255,255,1);}
64.28571% {text-shadow: none;}
65% {text-shadow: -50px 100px 50px rgba(0,0,0,1);}
100% {-webkit-transform: scale(0.33,0.33);}
}
@-webkit-keyframes 'hokutonoken02' {
0% {visibility: visible;opacity: 0.2;}
37% {opacity: 0.2;}
37.87878% {-webkit-transform: scale(0.33,0.33);opacity: 0.9;}
45% {text-shadow: none;}
46.96969% {text-shadow: 0 0 700px rgba(255,255,255,1);}
62% {display:block;opacity: 0.9;}
62.12121% {text-shadow: none;display:none;opacity: 0}
100% {-webkit-transform: scale(0.33,0.33);}
}
@-webkit-keyframes 'hokutonoken03' {
0% {visibility: visible;opacity: 0.2;}
40% {opacity: 0.2;}
40.32258% {-webkit-transform: scale(0.33,0.33);opacity: 0.9;}
43% {text-shadow: none;}
43.93938% {text-shadow: 0 0 700px rgba(255,255,255,1);}
59% {display:block;opacity: 0.9;}
59.677741% {text-shadow: none;display:none;opacity: 0}
100% {-webkit-transform: scale(0.33,0.33);}
}
@-webkit-keyframes 'hokutonoken04' {
0% {visibility: visible;opacity: 0.2;}
40% {opacity: 0.2;}
40.90907% {text-shadow: 0 0 700px rgba(255,255,255,1);opacity: 0.9;}
43.10344% {-webkit-transform: scale(0.33,0.33);opacity: 0.9;}
45% {text-shadow: none;opacity: 0}
56.89655% {text-shadow: none;}
90% {text-shadow: none;display:none;}
100% {-webkit-transform: scale(0.33,0.33);}
}
@-webkit-keyframes 'hokutonoken05' {
0% {visibility: visible;opacity: 0.2;}
46% {opacity: 0.2;}
46.29629% {-webkit-transform: scale(0.33,0.33);opacity: 0;}
100% {-webkit-transform: scale(0.33,0.33);}
}
ノウハウがあればまた違うのかもしれませんが、何も無い状態で作ったカオスです。。
1つのものを動かすだけなら凄く簡単ですが、複数の要素を同期を取りながらアニメーションさせるのはなかなか難しいです。
特に北斗の拳の文字が縮小してから光るタイミングを合わせるのが難しかったです。。
タイムラインアニメーションならオーサリングツールがなかったらきついと感じたので、この発表後にEdgeをインストールして触ってみたいと思います。
さらにこれをブラッシュアップしつつまた他のこんな馬鹿馬鹿しいページを作っていこうと思うのでよろしくおねがいします～。