[パララックス]skrollrでアニメのOPぽいものを作る

どもども。
ミステリィばっかり読んでいたらなんだか生活の全てがなんかの伏線な気がしてきてソワソワしているマユコです。
やかんの蓋がなくなったのって、数日後の事件の伏線なんじゃないの！？（重症

さて、今回はパララックス効果を使ったサイト作りに関してです。
ググると良いまとめがたくさんありますので、ご存じない方はぜひ見てみてください。

簡単に言うと、「スクロール時に奥行きがあるように見える」サイトのことですね。
CSS3やHTML5、jqueryやその他スクリプトを使って作られています。

ちょっと前に流行ったパララックスですが、最近は下火というか定着というか、落ち着いて来ましたよね。
初めて見た時はなんじゃこりゃあ！って思ったものでした。

そんなパララックスを使ってなにか面白いことできないかなあ・・・と思っていたのですが、ちょっと試してみたかったことをやってみたので載っけてみます。

一昔前のゲームやアニメや戦隊モノのOPで、キャラとキャラ名を流すようなのってありましたよね。今はあんまり見ない気がしますが・・・
あんな感じのものが作りたいな~作れないかな~と思ったんです、唐突にｗ

なんでかというと・・・

というのがまずあったのです。
と言っても私自身はオリジナルの何かはまったく持ってないんですけどw

同人とかピクシブとか自分のサイトとかでオリジナル作ってる方はたくさんいると思うのですが、そのキャラアピールとかをもっと楽しく手軽にできないかなあ！と。

キャラや世界設定が浸透している二次創作と違って、一次創作はもうゼロから読み手にアピールする必要があるわけですよね。
キャラ設定やイメージをもっとわかりやすく伝えたいと思ったら、どういう工夫をしたら楽しくなるのかな~と・・・

ということで、ザクっと作ってみました。

↑のページに入ってスクロールしていくと、文字とかイラストが動いてそれっぽくなります。

(※2012-10-17追記：　chorome最新版でしか確認してません。できたらブラウザ幅最大にして見ていただけると嬉しいです）

イラストは前描いた世界樹のパーティーの面々を流用しています。

（ちょっと悪ふざけしてます・・・(；・∀・)ｗ）

ちょっとまだラフ段階のざっくりしたものですが、雰囲気だけでも伝われば嬉しいです。

ここからは今回使ったJSなどのご紹介です。

jQueryなどは使わず、完全独立で使えるスクリプトです。下記でDLできます。
skrollr

Stand-alone Parallax scrolling lib with zero dependencies (seriously, you don’t need jQuery) in just over 7.7k minified (3.5k gzipped).

ってことなんですけど、おおーーっなんと軽量~っ。

ざざーっと読んでそのまま使えました。ちょっとわかりにくいとこもあったかな
このページをひと通り読めばOKっぽい。　→skrollr / README.md

今回は単純な動きでやってみましたが、作りこんでいけばもっとぬるぬる動く感じにできるんじゃないかなと！

例えばテンプレを作っておいて、後はイラスト差し替え、パターン差し替え、背景色指定して・・・とか。
ウェブにあんまり詳しくなくても作れるようになったら楽しいかなあと思ったんですけど、どうでしょ。

私自身まだこのスクリプトを噛み砕けてないので、もうちょっと勉強して反映させてこうと思います！

余談ですが、多分初めて「走る」gifアニを描きましたw
CS6から？photoshopで簡単にアニメーション作れるようになったんです。
たのしーなーgifアニ！うまくなりたいなー！