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

こんにちは!フリーランスディレクター兼エンジニアののせっち@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-infade-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

  1. jQueryのoffset()はドキュメントの左上からターゲットまでの位置を取得する。
  2. Javascriptには、offset()に置き換わるものは存在しない。
    →よって下記の計算により導く。
  3. getBoundingClientRect()はターゲットまでの位置を取得するが、ビューポートの左上から(ドキュメントの左上からではない)
  4. window.pageYOffsetは、ドキュメントの左上からのスクロール量を取得できる。
  5. よって、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');
}

ほぼ同じですね。

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

参考:スクロール位置を取得する3つのメソッド

スクロール位置の取得について、3つのメソッドが出てきているのですが、ざっくり下記のような役割です。

  • getBoundingClientRect・・・画面内における要素の位置座標を取得
  • window.innerHeight・・・ブラウザの高さを取得
  • window.pageYOffset・・・スクロール量を取得

3つの関係性について、とてもわかりやすかった記事

スクロール位置取得方法をいい加減忘れないようにメモ

https://qiita.com/makoto1219/items/9d5b71a792025703cdea

Javascriptのおすすめ勉強法

学習サイトとしてはドットインストールがオススメです。

僕は基本Progate派なのですが、Javascriptに関してはドットインスールが最適です。

  • とにかく講座数が多い(課金は必須)
  • 実際にアプリを作りながら学べるので実践に近い
  • よく使う技術は何度も出てくるため、自然と覚えられる

Javascriptのオススメ書籍

Javascriptでオススメの書籍はこちらです。

正直内容はツマラナイのですが・・・。

タイトル通り「コードレシピ集」となっており、辞書的に使うのに最適です!

上記のドットインストールと合わせて使うことで、内容を補完し合えるのでオススメです。

jQueryのオススメ書籍

jQueryのオススメ書籍は『jQuery標準デザイン講座』です

jQueryの基礎の基礎から、アコーディオン、スムーススクロール、スライダー、パララックスなどWebサイト制作でそのまま使えるサンプルを通して学ぶことができます。

少しですが、Javascriptの基礎にも触れているので、初学者にとっての最初の一冊にオススメです!

もう一冊、Amazonのみですが、『コーディングが5倍速くなる!jQueryセレクター超入門』もかなりオススメです。

クリックでAmazonのページが開きます。

『セレクタに関する事のみ』に集中して書かれている硬派な本でして、他の部分は極力シンプルな構成になっています。

ですので、プログラミング系であるあるな「いきなりよくわからん内容が出てきて詰んだ・・・」ということがありません。

Kindle Unlimitedで無料で読めます!

まとめ

Javascriptに詳しい方にとっては、もっといい書き方があるぞ!と思われるかもしれません。

しかし、jQueryから入った人間にとっては、jQuery vs Javascriptを比較することで、Javascriptを理解する手助けとなるのではないでしょうか?

少しでも参考になれば幸いです。

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
- WordPressが得意!
- 初心者向けGulp教材は購入者100部以上!