はてなブログにパララックス効果を取り入れてみる実験

おはようございます、つ部長です！

今回は、パララックス効果をはてなブログに導入してみる実験を行ってみようと思います！パララックスってなに？って思われる方もいらっしゃると思うので、まずは、このブログを下の方へスクロールしてみてください！

ちょっと前に流行った スクロールするとアニメーションしながら表示する仕組みのようなものです。正確にはスクロールエフェクトかもしれません。

ライブラリを使うことでこういうアニメーションをつけることがすごく簡単になりました。今回使ったのは下記の「skrollr」というライブラリです。

GitHub - Prinzhorn/skrollr: Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).

はてなブログを少しカスタマイズするだけで、ブログにもこのようなアニメーションしながら表示できるような仕組みを導入することができます！

少し手順を載せておきます。

1. メニューのデザインに移動
   

   

2. フッタのカスタマイズで外部にアップしたskrollrのJSファイルを読み込み、初期起動のJSを挿入
   

3. 画像を貼り付けたら、HTML編集モードに切り替えて、アニメーションの記述を足します

   

これだけで、完成です！使いどころが難しいですけど、うまくはまると「おっ！」って思わせられるモノが作れそうので、ぜひチャレンジしてみてくださいね！！