JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

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

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.getBoundingClientRect()

JavaScriptの.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);
}
かかかず
かかかず

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