【脱jQuery】スクロールでふわっと出現するアニメーションをJavascriptのみで実装

投稿日 2020年5月31日
更新日 2021年2月19日
著者のせっち
カテゴリープログラミング
カテゴリー脱jQueryシリーズ

こんにちは！フリーランスディレクター兼エンジニアののせっち@nosecchi01です。

スクロールでふわっと要素を出現させるアニメーションを、Javascriptのみで実装します。

jQueryは使いません。

元々jQueryで使っていたコード（スニペット）を元にjavascriptに書き直した形なので、下記のような方にもオススメです。

「jQueryはわかるけどJavascriptはイマイチ・・・」
「jQueryを使わずにバニラjsで書いてみたいけど、正直自分で書くのは面倒。」

それではいってみましょう！

目標物を確認

早速コードペンで見てみましょう！

jQueryと比較するとわかりやすいので、jQuery、Javascriptを両方記載します。

jQuery

jQueryで書いたものが下記です。

See the Pen scroll-in(jQuery) by Yuki Nose (@yukinouz1) on CodePen.

Javascript

Javascriptで書いたものが下記です。

See the Pen scroll-in(Javascript ) by Yuki Nose (@yukinouz1) on CodePen.

やっていることは全く同じです。

jQueryでやっていることをただJavascriptに書き換えただけです。

「jQueryはわかるけど、Javascriptはイマイチ・・・」という人は、jQueryと比較しながら見るのがオススメです！

「ここはjQueryでいうこれの事だな！というのがなんとなくわかるからです。

CSSを確認(アニメーションに関するところだけ）

今回はスクロールに合わせてCSSを付けるので簡単に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);
}

fade-inで共通のCSSを記載
opacity: 0　で最初は隠しておく。
transition関係で、「ふわっと」の表現
fade-in-up, fade-in-down, fade-in-left, fade-in-rightでそれぞれ、どの位置からアニメーションを開始するかを指定
scroll-in　これをスクロールイベントで付与する。

例えば、下からふわっとアニメーションさせたい場合は、fade-inとfade-in-upをクラスに指定します。

jQuery vs Javascriptで中身を解説していく

jQueryとJavascriptで比較しながら解説していきます。

// jQuery
var fadeIn = $('.fade-in');

// Javascript
let fadeInTarget = document.querySelectorAll('.fade-in');

対象となるクラスを取得しています。

Javascriptで複数の要素を選択する場合には、document.querySelectorAll();　を使います。

// jQuery
$(window).on('scroll', function () {
 // ここに関数
});

// Javascript
window.addEventListener('scroll', () => {
 // ここに関数
});

どちらもスクロールイベントを宣言していますね。

Javascriptの方は、アロー関数で() =>と書いていますが、function()と書いてもOKです。

// jQuery
$(fadeIn).each(function () {
// ここに繰り返し処理
});

// Javascript
for (let i = 0; i < fadeInTarget.length; i++){
// ここに繰り返し処理
}

jQueryの場合は、jQuery.each、Javascriptの場合はfor文を回し、要素一つ一つに対して繰り返し処理を行います。

// jQuery
var offset = $(this).offset().top;

// Javascript
 const rect = fadeInTarget[i].getBoundingClientRect().top;
 const scroll = window.pageYOffset || document.documentElement.scrollTop;
 const offset = rect + scroll;

ドキュメントの左上からターゲットまでの位置を取得します。

jQueryのoffset().topに当たる記述が、Javascriptではとても複雑でして、、、先人の知恵をお借りしつつ書きましたm(_ _)m

jQueryのoffset()はドキュメントの左上からターゲットまでの位置を取得する。
Javascriptには、offset()に置き換わるものは存在しない。
→よって下記の計算により導く。
getBoundingClientRect()はターゲットまでの位置を取得するが、ビューポートの左上から（ドキュメントの左上からではない）
window.pageYOffsetは、ドキュメントの左上からのスクロール量を取得できる。
よって、3 + 4してあげる

脱jQuery .height() .width() .offset() .scrollTop()
https://q-az.net/without-jquery-height-width-offset-scrolltop/

要素の位置座標を取得する方法
https://lab.syncer.jp/Web/JavaScript/Snippet/10/

// jQuery
var scroll = $(window).scrollTop(); 

// Javascript
const scroll = window.pageYOffset

ウィンドウのスクロール量(Y軸）を取得します。

// jQuery
var windowHeight = $(window).height();

// Javescript
const windowHeight = window.innerHeight;

現在のブラウザの高さを取得します。

// jQuery
if (scroll > offset - windowHeight + 150) {
  $(this).addClass("scroll-in");
}

// Javascript
if (scroll > offset - windowHeight + 150) {
  fadeInTarget[i].classList.add('scroll-in');
}

ほぼ同じですね。

なんの計算をしているかよくわからん・・・という人は下記の参考をどうぞ！