交差オブザーバーAPI（Intersection Observer API）とは、画面に任意の要素が出現したかどうかを監視してくれるAPIです。交差オブザーバーAPIを使うことで、要素に対して簡単に出現した際の動作を付けることができます。
今回は交差オブザーバーAPIを使いつつ、画像出現時のアニメーションを5パターン作ってみました。
次のように書きます。
const targetEl = document.querySelector('#targetEl')
const observer = new IntersectionObserver(callback, option)
observer.observe(targetEl)targetElは監視する要素です。この要素が画面内に入ったとき、callbackが実行されます。
optionは次の3つが指定でき、省略可能です。
今回は、目的の要素（.images-box_item）が画面内に入ってきたときにクラスを付けたいと思います。また、ある程度要素が画面に表示されてからcallbackを実行したいので、thresholdを指定します。
const targetEl = document.querySelectorAll(".images-box_item")
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-show')
} else {
entry.target.classList.remove('is-show')
}
})
}, {
threshold: .5
})
targetEl.forEach(element => {
observer.observe(element)
})「isIntersecting」を見ることで、要素が「画面内に入ったか」「画面外に出ていったのか」を判別可能です。画像が入ってきたときはクラスを追加し、出ていったときは外しています。
JSでクラスの付け外しはできたので、それではこれにアニメーションを指定していきましょう。
まず最初は、オーソドックスに「ぼやけながら表示されるやつ」を作ってみます。
スクロールしていくと、画像がぼやっと表示されるかと思います。画面から外れたときはクラスを外すので、何度かスクロールをするとその度に再表示されます。
opacityとfilter、scaleを用い、少し縮小しながら段々像を結ぶ感じにしてみました。おしゃれなサイトに良さそうですね。
次は「下からぼよんぼよんしながら出現するやつ」を作ってみましょう。
transitionの指定に「cubic-bezier」を使いました。これはベジェ曲線を用いて動きを指定するためのものなのですが、使う際はジェネレータを使うと分かりやすいです。
もうちょっと動きを激しくしても面白いかもしれませんね。コミカルなサイトにどうでしょうか。
次は「スッ……、と表示されるやつ」です。
これは「mask-image」を使って実装しています。縦幅が画像の二倍あるマスクを用意し、0～50%を白、50％～100%を白から透明へのグラデーションにしました。.is-showクラスが付いたときは、「mask-position」の値を変更してマスクをずらしています。
では次に「ブラインドっぽいやつ」です。
ブラインドは「mask-image」と「linear-gradient」で実装していますが、通常gradientはアニメーションが効きません。しかし「@property」でカスタムプロパティを定義し、その値を変更することによってアニメーションが可能になります。
ここではブラインドの幅を「mask-size」で30pxとし、その範疇でグラデーションの白い部分を0%から100%にまで変化させています。
最後に、@propertyを複数定義して、「水面っぽいやつ」を作ってみました。
やっていることは、ひとつ前のものと大体同じです。「radial-gradient」で定義した複数のリングをマスクとして使い、@propertyで定義した変数を変動させることで動作させました。
ちょっとしたアクセントにどうでしょうか。
今回は交差オブザーバーAPIを使ってアニメーションを実装しました。また、CSSのマスクや@propertyも組み合わせて使ってみました。
アイデア次第で色んな表現ができそうですね。
