これはどんな仕組み？

JavaScriptの「Intersection Observer API」という機能を使って、対象の要素（HTMLタグ）が「画面に入った？／出た？」という状態を監視しています。そしてこの「入った／出た」のタイミングで、対象の要素に「class」を付けたり外したりしています。

CSSの「後に書いた方が上書きされる」という特性を利用して、「入った（=classの付与）」「出た（=classの削除）」の度に対象の要素のスタイルが上書きされることでアニメーションを実現させています。

実装ポイント・注意事項

１：階層構造になっているHTMLタグには使えません。

<!-- NGなパターン （階層構造になっている）-->
<div class="sl-txt" data-dire="top">
	<p>アニメーションさせたいテキスト</p>
</div>

<!-- OKなパターン （階層構造になっていない）-->
<p class="sl-txt" data-dire="top">アニメーションさせたいテキスト</p>

• なぜ階層構造だとダメなの？

２：<br>タグ以外のタグは含められません。

<!-- NGなパターン -->
<p class="sl-txt" data-dire="top">アニメーションさせたいテキスト<img src="./sample.jpg" alt=""></p>

<!-- OKなパターン -->
<p class="sl-txt" data-dire="top">アニメーション<br>させたいテキスト</p>

※１とほぼ同じ意味ですが、<img><input>などの終了タグがないHTMLタグなども、同様に単なる文字として処理されるため使えません。

３：<p>タグ以外のタグも使えます。

<h1 class="sl-txt" data-dire="top">アニメーションさせたいテキスト</h1>

<div class="sl-txt" data-dire="top">アニメーションさせたいテキスト</div>

<span class="sl-txt" data-dire="top">アニメーションさせたいテキスト</span>

基本的な使い方（簡単3step!）