タイトル通り。
パララックスを作ってみたいなぁ。と思いまして、集めた参考サイトです。

■Building a parallax scrolling storytelling framework

そのまま作れちゃうぞ。しかも凄いかっこいい絵本だぞ。

■One page website, vertical parallax

縦スクロールでつくるパララックス効果のソースがダウンロードできます。
作り方というか考え方を図入りで説明してくれています。

■jQueryで奥行きのある背景スクロールを作ってみる

基本手順を簡単なコードで作ってみてくれてます。
これはすぐにでも真似しなきゃ！です。

■jQuery で背景画像をずらす

上記サイトとほとんど同じ作りですが、少し詳しく説明してくれてます。

■一枚の画像をjQueryでアニメーションさせるプラグイン「jAni 」

サイトページ内に別途で動くアニメーションがあると、本格的に見えるかな？
と思ったんですけど、これ実際作るとカクカクしちゃうんですかね？

■jQuery で実現する パララックス効果をヒントにしたシンプルで新しいスクロール背景
ブログサイトにでも使えそうな背景のテクニックです。
ずれる感じが心地良いですよね。

■[JS]jQuery初心者もOK、サイトにアニメーション効果を取り入れるチュートリアル
フェードインなどのアニメーションを入れるための基礎チュートリアルです。
これをちょっと加えるだけで、割とグレードが上がる気がする。

■jQueryのanimateで自由にアニメーションできるようになろう
アニメーションの基礎チュートリアルです。
とにかく基礎を押さえないと、複雑な事は出来ないですもんね。

■jQueryアニメーションにイージング（easing）処理をつけるプラグイン【イージング動作サンプル一覧】
上記チュートリアルで勉強した後は、やっぱりイージングですよね？
簡単につけるためのプラグインです。

最後の方はパララックスっていうよりjQuery入門になっちゃったなぁ。
いまJS勉強中だから、思わず入れてしまった・・・

とりあえず、作ってみなきゃ始まらない。ですね。

タグ:,