jQueryでスクロールするとフワッとさせる方法をご紹介します。ロード時にも有効です。

See the Pen
Untitled by nakasan (@coder-memo)
on CodePen.

このコードは、ウェブページ上でスクロールイベントを扱い、特定の要素がビューポートに入った際にアニメーションやスタイルの変更を行うためのJavaScriptコードです。それぞれの部分について説明します。

1. ウィンドウのスクロールイベントを設定する:
   javascriptCopy code

   $(window).scroll(function () {
executeScrollFunction();
});


   この部分は、ブラウザウィンドウのスクロールイベントにexecuteScrollFunction関数をバインドしています。ユーザーがスクロールするたびにこの関数が呼び出されます。

2. executeScrollFunction関数の定義:
   javascriptCopy code

   function executeScrollFunction() {
$('.js-fade').each(function () {
// ...
});
}


   この関数は、クラス名.js-fadeを持つすべての要素に対して操作を行います。.each()メソッドは、これらの要素それぞれに対して指定された関数を実行します。

3. 各要素に対する操作:
   javascriptCopy code

   var pos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > pos - windowHeight + 100) {
$(this).addClass('scroll');
}


   ここでは、各.js-fade要素に対して以下のステップを実行します:

   • pos: 要素のドキュメントの先頭からの垂直位置を取得します。
   • scroll: 現在のスクロール位置（ウィンドウの上端からの距離）を取得します。
   • windowHeight: ブラウザウィンドウの高さを取得します。
   • 最後のif文では、要素がビューポートの下端よりも上にあるかどうかをチェックします（100ピクセルのオフセットを加えて）。この条件が真の場合、その要素にscrollクラスを追加します。

このコードは、スクロールに応じて特定の要素にアニメーションやスタイルの変更を加えるためによく使われます。たとえば、スクロールによって要素がビューポートに入った際にフェードインするような効果を実現できます。