diff --git a/paper/fuga.txt b/paper/fuga.txt index ec6f954..2efc5ff 100644 --- a/paper/fuga.txt +++ b/paper/fuga.txt @@ -11,12 +11,47 @@ これにより本やネットの情報を流し読みするよりも、楽しみのある学習をすることが可能になる。 -ロード画面: 「jQuery」を使用して作られている。 + +1,ロード画面 +・「jQuery」を使用して作られている。 「jQuery」とは、「JavaScriptライブラリ」と呼ばれるものの1つである。 「JavaScriptライブラリ」とは、JavaScriptの動きを予め大量に記述してある、誰かが制作してくれたJavaScriptファイルのことである。 という記述をHTMLに追加することで、ネットから「jQuery」と名付けられたJavaScriptファイルを読み込み、「jQuery」が使用できるようになる。 + + + ここからはソースの解説に入る。 +ソースコードーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー +//$(function(){...})=HTMLの読み込みが全て完了した後に中身を実行 + $(function() { +//var h = $(window).height(); =jQueryで、ウィンドウの高さを取得する? + var h = $(window).height(); + + $('#loader-bg ,#loader').height(h).css('display','block'); +}); + + $(window).load(function () { //すべての読み込みが完了したら実行 + //delay(1000)で1秒間動作の停止。 + //HTML要素.fadeOut( 時間(ミリ秒) )でHTML要素を少しずつアニメーションさせながら非表示にすることができるメソッド + $('#loader-bg').delay(900).fadeOut(800); + $('#loader').delay(600).fadeOut(300); +}); + +//5秒たったら強制的にロード画面を非表示 + $(function(){ +//setTimeout…一定時間後に特定の処理をおこなう(繰り返さずに一度だけ) + setTimeout('stopload()',5000); +}); + +function stopload(){ + $('#loader-bg').delay(900).fadeOut(800); + $('#loader').delay(600).fadeOut(300); +} +ここまでがソースコードーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー + + +・それぞれの働きの説明 (function(){...})と記述すると{...}の中に書かれた動きをHTMLの読み込みが全て完了した後に実行してくれる。 var h = $(window).height();でhという変数の中にウィンドウの高さを代入している。 $('#loader-bg ,#loader').height(h).css('display','block');により、ウィンドウの高さに合わせて新たな画面を仮面のように貼り付けている。 @@ -27,6 +62,8 @@ setTimeout('stopload()',5000); setTimeout…一定時間後に特定の処理をおこなう(繰り返さずに一度だけ)。これにより5秒たつと強制的にロード画面を非表示にすることが出来る。 + +・どのような記述で実装しているか
Now Loading... @@ -36,7 +73,39 @@ という形で実装している。2枚の絵を合体させたgifとNow Loading...の文字をHTML内で追加することで本当のロード画面のように見栄えを良くしている。 -操作説明の画面(モーダウィンドウorポップアップ) + +2,操作説明の画面(モーダウィンドウ) +ウィンドウが暗くなり、その上に表示される小さなウィンドウをモーダウィンドウという。 +この小さなウィンドウはHTMLと同じように中身を記述することが出来る。 +今回はそれを使って操作説明の画面を表示している。 +ここからはソースの解説に入る。 + + +ソースコードーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー +$(function(){ + $('.js-modal-open').on('click',function(){ + $('.js-modal').fadeIn(); + return false; + }); + $('.js-modal-close').on('click',function(){ + $('.js-modal').fadeOut(); + return false; + }); + }); + + + + + +