文字を細くする方法～transformを使った方法②～【AOS.js】と併用する時は注意

昨日書いた記事（1つ手前の記事）で、文字を細くする方法について書きました。

ここでは、AOS.js（JavaScriptのライブラリで、簡単にスクロール連動型のアニメーションを実装できるものです）と併用した場合に、transformが効かないことがあったので、それについて書き残しておきます。

元々、AOS.jsのプロパティにはtransformが組み込まれているものがあります。

アニメーションで動きをつけている表現なので、当たり前と言われればそうなのですが、私はこのことに気づくのが遅かったです。

例えば、既にAOS.jsを実装している要素に対して、文字を細くしたいからと、先日説明したtransformを用いても想定通りにあたってくれません。このような時は、AOS.jsを実装する要素は別に用意してあげて競合をなくしてあげる方法で解決しました。

例えば、

<h2 data-aos="fade-up">Hello World!!</h2>

と既にAOS.jsを実装している部分があったとして、後からこのh2に対してtransformで文字の細さを表現しようとしてもうまくいきません。そこで以下のように、AOS.jsを実装するようの固まりを外側に作ってあげて、子要素でAOS.jsが外れたh2に対してtransformを指定します。

<div data-aos="fade-up">
    <h2>Hello World!!</h2>
</div>

h2{
  transform: scale(0.8, 1) translate(-10px, 0);
}

そうすると、AOS.jのアニメーションはしっかりh2にかかりつつ、h2の文字の細長さも表現することができます。

AOS.jとの競合は、私はこのように解決しました。