このサイト内に掲載している多くの動きは、jQueryというライブラリをベースにして動かしています。
「画面が読み込まれた後に動く」「スクロールしたら動く」「クリックしたら動く」
といった代表的な「動くきっかけ」の記述の仕方を理解していきましょう。
動くきっかけを指定する基本的な記述
1. 画面の読み込み時に動く
$(function() {
//画面の読み込み時に動かしたいソースコードを記述
});
2. 画面が読み込まれた後に動く
※画像などがすべて読み込まれた後に動きます。
$(window).on('load',function() {
//画面が読み込まれた後に動かしたいソースコードを記述
});
3. 画面がスクロールされたら動く
$(window).on('scroll', function () {
//画面がスクロールされたら動かしたいソースコードを記述
});
4. 画面がリサイズされたら動く
$(window).on('resize', function () {
//画面がリサイズされたら動かしたいソースコードを記述する
});
5. ●●（要素やクラス/ID名）をクリックしたら動く
$('●●').on('click', function() {
//クリックしたら動かしたいソースコードを記述する
})※スマホやタブレットで<a>タグ以外のものにクリックイベントを使いたい場合、タップをする要素のCSSにcursor: pointer;と指定をしないと動作しません。
6. ●●（要素やクラス/ID名）にマウスが乗ったり外れたりしたら動く
下記をセットで使用します。
$('●●').on('mouseenter', function () {
//マウスが乗ったら動かしたいソースコードを記述
})
$('●●').on('mouseleave', function () {
//マウスが外れたら動かしたいソースコードを記述
})※色の変化や拡大縮小など、シンプルな動きはCSSのhoverを使えば実現可能です。この書き方は、複雑な動きを実現したいときに使用します。
7. ●●（要素やクラス/ID名）がタッチされたり外れたりしたら動く
$('●●').on('touchstart', function () {
//タッチされた時に動かしたいソースコードを記述する
});
$('●●').on('touchend', function () {
//タッチして指が離れた時に動かしたいソースコードを記述する
});※タッチイベントはスマホやタブレット閲覧時にPCのhover（マウスが乗った時の挙動）の見せ方を実現したい時などに利用します。
・タッチが非対応のデバイスでは動作しません
・スマホやタブレット閲覧時は、クリックイベントで指定した時と比較して、タッチイベントの方が動作のレスポンスがはやくなります。
・同じ場所にクリックイベントとタッチイベントを両方指定する場合、両方のイベントが発生するので「タッチイベントが利用出来るか判定し、できないのであればクリックイベントに変更する」といった処理をjQueryで指定する必要があります。
8. マウスが移動したら動く
$(window).on('mousemove', function () {
//マウスが移動したら動かしたいソースコードを記述する
});その他の代表的な動くきっかけを指定する記述
●●（要素やクラス/ID名）のCSSアニメーションが終わった後に動く
（例）
$('●●').on('animationend', function () {
//CSSアニメーションが終わった後に動かしたいソースコードを記述する
})●秒遅れて動く
（例）
setTimeout(function () {
//時間を遅らせて動かしたいソースコードを記述する
}, 1000);//この場合1秒後ページが遷移された時に動く場合は
シンプルなアニメーションであればCSSのアニメーションのみで実現できます。
5. のクリックイベントを利用しても実現できます。
動くきっかけが複数ある時のまとめ方
「画面が読み込まれた後」かつ「スクロールをした時」に要素を動かしたい、というような、動くきっかけが複数ある場合、動きに独自の名前（関数）をつけてまとめ、それぞれの動きのきっかけに指定することが出来ます。
（例）画面が読み込まれた後に要素をふわっと表示させ、スクロールをした際にもふわっと表示させる。
//===== 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();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動く場合の記述See the Pen jQueryで動く「きっかけ」を指定しよう by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
WordPressのjQueryを利用して自作のJSを読み込むときの書き方
WordPressのjQueryを利用して動かす場合、自作のJavaScriptの中に$マークからはじまる記述があると動かない場合があります。その時はソースコード全体を、下記のコードでくくると解決します。
jQuery(function($){
// この中に$マークからはじまる記述を書けば動く
});基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください！
