「画面が読み込まれた後」かつ「スクロールをした時」に要素を動かしたい、といった動くきっかけが複数ある場合、動きに独自の名前（関数）をつけてまとめ、それぞれの動きのきっかけに指定することができます。
（例）画面が読み込まれた後に要素をふわっと表示させ、スクロールした際にもふわっと表示させる
//====== 1.動くきっかけを独自の名前をつけて定義（ここでの関数は：fadeAnime）
function fadeAnime(){
//動きの指定
$(‘.fadeInTrigger’).each(function() { //fadeInTrigger というクラス名が
var elemPos = $(this).offset().top-50;//要素より、50px上の
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos – windowHeight){
$(this).addClass(‘fadeIn’);//画面内に入ったらfadeInというクラス名を追記
}else{
$(this).removeClass(‘fadeIn’);//画面外に出たらfadeInというクラス名を外す
}
});
}
//====== 2.定義した名前をページが読み込まれた後・スクロールした後それぞれのきっかけに指定
// 画面をスクロールをしたら動く場合の記述
$(window).scroll(function (){
fadeAnime(); /* アニメーション用の関数を呼ぶ */
}); //ここまで画面をスクロールしたら動く場合の記述
// 画面が読み込まれたらすぐに動く場合の記述
$(window).on(‘load’, function(){
fadeAnime(); /*アニメーション用の関数を呼ぶ */
}); //ここまで画面が読み込まれたらすぐに動く場合の記述
WordPressのjQueryを利用して自作のJavaScriptを読み込むときの書き方
WordPressのjQueryを利用して動かす場合、自作のJavaScriptの中に＄マークからはじまる記述があると動かない場合があります。その時はソースコード全体を、下記のコードでくくると解決します。
jQuery(function($){
// この中に$マークからはじまる記述を書けば動く
});
