読者です 読者をやめる 読者になる 読者になる

parallaxを実装するのに最適なライブラリ

この間 natsu.me を parallaxとmedia-queryを利用したレスポンシブ・ウェブデザインに対応したんだけど、parallaxを使う上で色々ライブラリを探して、結局 skrollr を使うようにした。

他のライブラリで

があったけど、どれもjQueryのプラグインで提供されてたり、npmいれてgrunt実行でコード生成して使ってねとか不親切だったり、javascriptを書いてくれってのばっかだった。(npm入れてはまだいいけど他はちょっと遠慮したいね。)

でもskrollrは違った、単独のライブラリでjQueryを必要としてないし、何よりjsを書かなくて良かった。動かしたいelementにdata-x="css: hoge;"だけで動く。
さらにskrollr-stylesheetsというpluginを入れるとそれすら必要なく、cssに全部記述するだけでparallaxが実現出来る。つまりjsが書けないデザイナーだけで簡単にparallaxを使ったサイトが作れる。マジ便利。


ということでparallaxを使ったサイトを作りたい場合はskrollr一択です。
じゃっかん不便に感じたのがskrollr-stylesheetsでjarallaxを書いたcssファイルとmedia-queryを一緒に出来ないってのとjarallaxのセレクタ(というか変数)にハイフンが使えない事。
ハイフンが使えないのはさすがにcssファイル内の命名規則がおかしくなるのでpull request送った。取り込んでくれたら使えるようになるはず。