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

永井ギャラクシー つくる部

関西を拠点とするウェブ制作チーム。あらゆる“つくる”にまつわる日記。つくる部部長(つ部長)が担当します。好きな時に更新します♪

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

f:id:nagai-galaxy:20160409142947p:plain

 

 

 

 

f:id:nagai-galaxy:20160409143411p:plain

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

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

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

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

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

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

    f:id:nagai-galaxy:20160409144804p:plain

  2. フッタのカスタマイズで外部にアップしたskrollrのJSファイルを読み込み、初期起動のJSを挿入
    f:id:nagai-galaxy:20160409144902p:plain
  3. 画像を貼り付けたら、HTML編集モードに切り替えて、アニメーションの記述を足します

    f:id:nagai-galaxy:20160409145129p:plain

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