Mediumの記事のタイトルのアニメーションを見たことはあるでしょうか。下にスクロールすると控えめにタイトル自体も若干アニメーションして半透明になるアレです。流行りのパララックスというやつです。実際にこちらの記事を下スクロールしてもらえると、言わんとしていることがわかると思います。
これ、skrollr.jsを使うと簡単に実現できることが分かったのでご紹介します。
実際動いているもの
真似してつくったものがHerokuで動いています。
http://medium-like-cover.herokuapp.com/
下にスクロールすると、控えめにタイトルがアニメーションしているのが分かると思います。控えめなのが良い。
ソースコードはこちらに（middlemanでつくっています）。
https://github.com/mahm/medium-like-cover
仕組み
data属性に「どのぐらい下スクロールしたらどうなるか」という情報を仕込みます。
WOOOT
例えば上記のコードだと、一番上にいるときは背景色が青で、下スクロールするにつれて段々背景色が赤になり、500pxほど下に移動すると完全に赤になるという感じです。サンプル
で、実際に書いたのが以下のコードです。
Mediumっぽいタイトルでオシャレに演出
スクロールすると文字列がちょっと下に移動しつつ薄くなる
transform: translate3dを使ってY軸方向にDOMを移動しつつ、opacityを1から0にすることで半透明にすると、下スクロールするにつれてタイトルが下に移動しつつ半透明になる感じを演出できます。
注意点
skrollr.jsの初期化コードはbodyの閉じタグのすぐ上に配置しないとエラーで動かないです。
