このブログのリストページはカテゴリを4色に分類して横に並べたナビがあります。

スマートフォンなどでは横幅が足りないため横スクロールさせていて、スクロール可能なことをグラデーションで表現していました。

しかし、解像度が合うと3つしかカテゴリがないように見えることに気づいたので、バウンドアニメーションを取り入れました。

横スクロールを促すアニメーション

Reloadするとわかりますが、アクセス時に左側にスライドしたようなアニメーションで、margin-leftをマイナスに振ってます。

.target {
  animation: bound .5s forwards;
}
@keyframes bound {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: -10vh; //左へ移動
  }
  100% {
    margin-left: 0; //元に戻す
  }
}

縦スクロールを促すアニメーション

縦スクロールはbodyがメインになることが多いと思うのでこれで良さそう。でも、縦スクロールは一般化してるので、使う場面は少なそう。

body {
  animation: bound .5s forwards;
}
@keyframes bound {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: -10vh; //上へ移動
  }
  100% {
    margin-top: 0; //元に戻す
  }
}

---

今回はmarginで動きをつけてるので、overflow: scroll;を指定した親要素ではなく、スクロールする要素を指定してあげる必要があります。

親要素に指定するためには、paddingで指定することもできますが、paddingはマイナスの指定ができないので、逆の動きにすることになります。

試しにデモを載せてみたけど、どちらでも動きがあるだけで注目はしてもらえる気がする。

---

というか、今更だけどパフォーマンスを考えるとtransformで指定してあげたほうがいい気がする。