はてなブログ・吹き出しにアニメーションを追加するカスタマイズ

こんにちわ、野良ジニアです。

今回は、シロマティさん(id:shiromatakumi)の吹き出しカスタマイズにアニメーションをつける方法をご紹介します。

Amazon プライムのメリット総まとめ
スペース倍増！キッチン作業が最高に捗る突っ張りキッチンラック
【Amazonプライム】内村さまぁ～ず第1〜50回から選ぶ爆笑ベスト10

吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 - NO TITLE
コピペで簡単！アニメーションを使ってはてなブログを超おしゃれにするカスタマイズ術 - ひつじの雑記帳

どういう動きになるの？
どこを設定すればいい？
アニメーションの細かい設定とか
- AOS でどんなアニメーションが使えるの？
- アニメーション時間とかも設定したい
まとめ

どういう動きになるの？

まずはこちらのサンプルをご覧ください。

AOSを使ったら…

スクロールで…

吹き出しが飛び出てくるよ！

こんな感じで、画面スクロールすると会話部分が飛び出してくるようになります。
※アニメーションがうまく動いてない場合は、吹き出し部分が見えなくなるまで上にスクロールしてみてください。

どこを設定すればいい？

設定変更箇所は2箇所になります。

1. headに要素を追加

設定 - 詳細設定 - 検索エンジン最適化 - headに要素を追加

<!-- AOS.css -->
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">

2. 記事下にスクリプトを追加

デザイン - カスタマイズ - 記事 - 記事下

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
  $(function(){ 
   $("p.l-fuki").attr('data-aos', 'fade');
   $("p.r-fuki").attr('data-aos', 'fade');
  });
  AOS.init();
</script>

タグやクラス名をいじってる方は $("p.l-fuki") の部分を、自分の環境に合わせて変更してください。

注意点

jQuery で吹き出し部分の要素を変更するので、全ての吹き出しがアニメーション対象になります。

アニメーションの細かい設定とか

今回使っているのは AOS(Animate on Scroll)というものになります。

michalsnik/aos: Animate on scroll library

AOS でどんなアニメーションが使えるの？

実際にアニメーションを見るのが分かりやすいです。

AOS - Animate on scroll library

ざっくり書いておくと、

フェード系
ズーム系
スライド系
フリップ系

の大きく4種類のアニメーションが使えます。

$("p.l-fuki").attr('data-aos', 'fade'); の 'fade' の部分を書き換えると、アニメーションの種類が変えられます。ですので、右の吹き出しと、左の吹き出しでアニメーションを変えることも可能です。

アニメーション
fade
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left
flip-up
flip-down
flip-left
flip-right
slide-up
slide-down
slide-left
slide-right
zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right

アニメーション時間とかも設定したい

AOS.init(); の部分を次のように変更することで、細かい設定ができます。

  AOS.init({
    offset: 200,
    duration: 600,
    easing: 'ease-in-sine',
    delay: 100,
  });

設定値	意味
offset	どのぐらいスクロールしたらアニメーション開始するか
duration	アニメーションの動作時間
easing	アニメーションの滑らかさ
delay	アニメーションが始まるまでの時間
...
once	アニメーションを何回も動かすか