JavaScriptで要素が交差したらクラスを付け外しすることで表示を制御していきます。
- クラスの付け外し
- 早期リターン
クラスの付け外し
前回Intersection Observerを使うためにCSSの設定をしていきました。
詳しくは『Intersection Observerを使うためにCSSアニメーションの設定をしていく』の記事を御覧ください。
今回はJavaScriptを使って前回設定したimgクラス、appearクラスをつけ外ししていく方法について見ていきます。
具体的には20％画像が現れた段階でアニメーションをスタートさせたいのでisIntersecting がfalseのときはappearクラスを外してあげます。
まずクラスをつける要素について見ていきます。
JavaScriptで書いたentries[0]のターゲットで取得できるのでそこにclassList.addとしてあげましょう。
if (entries[0].isIntersecting) {
entries[0].target.classList.add(‘appear’);
}
と書いていけばappearクラスをつけることができます。
またfalseの場合を書いていきましょう。今回はその他の場合なのでelseで書いていけます。
else {
entries[0].target.classList.remove(‘appear’);
}
と書いて行くとfalseの場合はappearクラスを外すことができます。
早期リターン
次に交差が終わるときはアニメーションしたくないという場合もあります。
その場合はelseの処理を削るかfalseの場合,早期にreturnするように書く方法もあります。
その場合は書き直していきましょう。
早期にリターンしてあげる方法もif関数を使っていきます。
if (!entries[0].isIntersecting) {
return;
}
と書いて上げればいいでしょう。
そのうえでfalseではなかった場合はappearクラスをつけたいので
entries[0].target.classList.add(‘appear’);
を持ってきて上げればいいでしょう。
以上
