野良ジニアのスクラップブック

野良エンジニアによる雑記帳。技術、本、便利グッズなどを気の向くままに。

【コピペでOK】おなじみの吹き出しにアニメーションを追加でワンランク上のブログに!【はてなブログカスタマイズ】

 あとで読む

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

みなさん、ブログカスタマイズしてますか?みんなが大好きな吹き出しを使ってキャラが会話してる風にできるカスタマイズがありますよね。そう、シロマティさん(id:shiromatakumi)の以下の記事(はてブ数がもうすぐ500!!)です。

www.notitle-weblog.com

僕はそのカスタマイズをやってなかったので、思い立ったが吉日とばかりに設定させてもらいました。

で、どうせだから「吹き出しがアニメーションで出てきて、本当に会話してる風にできないかなー」と。最近、そんな記事を見たなーと思ったら、こどみすさん(id:codomisu)の以下の記事でした。

hitsuzi.hatenablog.com

こどみすさんの記事では Animate.css を使ってるのですが、「とりあえず吹き出し部分に使うだけ」ってこともあり、AOS(Animate on Scroll)を使って吹き出しにアニメーションを設定してみました。

どういう動きになるの?

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

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>

注意点

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

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

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

github.com

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

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

michalsnik.github.io

ざっくり書いておくと、

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

の大きく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 アニメーションを何回も動かすか

正直、デフォルト値(何も変更しない)で別に問題ないと思いますが、どうしても「カスタマイズしたい!」という方は、github を見て色々と試してみてください!

アニメーションさせるのは PC だけにしたい、とかの設定もできるみたいですよー。

まとめ

  • シロマティさんの吹き出しを導入したよ!
  • AOSを使って吹き出しにアニメーションを付けてみたよ!
  • 吹き出し以外にもアニメーション付けれるから、気になる人は調べてみてね!

こどみすさんがやってるみたいに、画像部分にアニメーションを付けるとか活用方法はいっぱいあると思います!
※Animate.css の方がエフェクトは多いので、ご自分の利用シーンにあったものをお使いください。

ちなみに slide-left とかに設定すると、他エリア上でスタンバイしちゃうのでご注意くださいw
(スマホだとたぶん問題ない)

スライドしてくるよ
スライドしてくるよ
広告を非表示にする