スクロールに応じて要素の位置を変えたり、色を変えたりする時に便利なskrollrというプラグインを使ってみました。

デモサイトを見ればどんなものか分かると思います。

デモサイト

思い通りに要素を動かすことができます。使い方も簡単です。

ダウンロード

GitHubからダウンロードできます。

右上の緑のボタンを押して「Download Zip」をクリックしてください。

読み込み

ダウンロードしたファイルの中の「dist」ディレクトリの中にある「skrollr.min.js」を読み込みます。

jQuery

jQueryには以下を書くだけで準備OKです。

var s = skrollr.init();

HTML

動きはHTMLで指定します。

「data-数値」で、数値pxのところへスクロールするにつれて徐々にスタイルを変化していってくれます。

<div data-0="background-color:rgb(134,18,64);" data-1000="background-color:rgb(65,40,169);" data-2000="background-color:rgb(195,255,255);" data-3000="background-color:rgb(38,130,36);" data-4000="background-color:rgb(218,233,93);" data-5000="background-color:rgb(230,92,43);"><p>スクロールしてください</p></div>