この記事のスニペットは、以前記事にした「jQueryでフェードインさせるスニペット」のネイティブなJavaScriptバージョンです。
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" をつけることで、上からふわっと落ちてくるフェードインのアニメーションがつきます。
fade-in fade-in-leftで左から右に
左からスライドさせるには、 class="fade-in fade-in-left" をつけることで、左からスライドして表示させることができます。
fade-in fade-in-downで上から下に
上から下に落ちてくるフェードインさせるには、 class="fade-in fade-in-down" をつけてアニメーションさせることができます。
fade-in fade-in-rightで右から左に
右からスライドさせるには、 class="fade-in fade-in-right" をつけることで、右からスライドして表示させることができます。
.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);
}
使わないアニメーションがある場合、その部分は削除して利用ください。
