.getBoundingClientRect()

JavaScriptの.getBoundingClientRect()のスクロールでふわっと要素をフェードイン

フェードインのアニメーション

この記事のスニペットは、以前記事にした「jQueryでフェードインさせるスニペット」のネイティブなJavaScriptバージョンです。

jQueryのイラスト jQueryのコピペでできるスクロールでふわっとフェードインさせるスニペット

フェードインは、.getBoundingClientRect() でトリガーを作っていき、CSSでアニメーションを加えていきます。

.getBoundingClientRect()

.getBoundingClientRect() は、要素の位置をブラウザの表示領域の左上を(0, 0)として、そこからの相対位置で示されます。

const myTarget = document.querySelector('div').getBoundingClientRect().top; 

例えば、上記のようなコードの場合、要素の上部にあたる座標を取得します。

スクロールでふわっとフェードインするサンプル

基本となるJavaScriptのコードを記述したら、アニメーションをつけたいタグのclassに、所定のclass名を記述することで簡単にアニメーションを付けることができます

fade-in fade-in-upで下から上に

タグのclassに class="fade-in fade-in-up" をつけることで、上からふわっと落ちてくるフェードインのアニメーションがつきます。

JavaScriptのサンプル

fade-in fade-in-leftで左から右に

左からスライドさせるには、 class="fade-in fade-in-left" をつけることで、左からスライドして表示させることができます。

JavaScriptのサンプル

fade-in fade-in-downで上から下に

上から下に落ちてくるフェードインさせるには、 class="fade-in fade-in-down" をつけてアニメーションさせることができます。

JavaScriptのサンプル

fade-in fade-in-rightで右から左に

右からスライドさせるには、 class="fade-in fade-in-right" をつけることで、右からスライドして表示させることができます。

JavaScriptのサンプル

.getBoundingClientRect()を使ったサンプルのコード

以下が、JavaScriptのコードです。

全体感で言うと、まずはじめに .getElementsByClassName でclassを追加する要素を取得します。そして、.getBoundingClientRect() で要素の位置を取得して、ループの中にその位置を通過した場合の処理内容を記述しています。

const fadeIn = function(){

    const target = document.getElementsByClassName('fade-in');
    const position = Math.floor(window.innerHeight * .75);

    for (let i = 0; i < target.length; i++) {

        let offsetTop = Math.floor(target[i].getBoundingClientRect().top);
        let offsetBottom = Math.floor(target[i].getBoundingClientRect().bottom);

        if (offsetTop < position) {
            target[i].classList.add('scroll-in');
        }
        
        if(offsetBottom < 0){
            target[i].classList.remove('scroll-in');
        }
    }
}
window.addEventListener('scroll', fadeIn, false);

CSS

スクロールでCSSのclassが要素に追加させるので、以下のCSSを全てコピペすればOKです。

/* スクロールCSS */
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}
かかかず
かかかず

使わないアニメーションがある場合、その部分は削除して利用ください。