パララックスエフェクトをはじめとして、スクロールに合わせてコンテンツを変化させる試みが多数出てきています。簡易的なアニメーションとして見ても面白いですし、立体的な動きはユーザの目を引きやすくなります。 今回紹介するMidnight.jsもそんなスクロールライブラリの一つになります。パララックスではなく、DOMの内容を変化させるというライブラリになります。

Midnight.js

最初の表示です。テキストの上下で色が違うのが分かるでしょうか。

白バックになった所で黒い文字だけになりました。

さらに別な背景にさしかかると文字色が変化します。

今度はフォントも変わったようです。

フォントや色を自在に変化させています。

Midnight.jsは背景の色に合わせてテキストカラー、フォントをダイナミックに変化させます。色の境目にさしかかっている時には上下で別な色になります。シングルページアプリケーションで使うとインパクトが強そうです。

Midnight.jsはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

Midnight.js - Switch fixed headers on the fly Aerolab/midnight.js