Screen transition

D01で作成した「Butterfly」のページを利用して
jQueryで画面遷移 がめんせんい （Screen transition）のあるページを作成してみよう

練習ファイルダウンロード

01　CSSのリンク

</head>の上にstyle sheet「screen1.css」をリンクさせる

 

HTML

<link rel="stylesheet" href="css/screen1.css">
</head>

 

02　画面を変更させたい場所にHTMLを入れる

<body>の下へ

 

HTML

<body>
<div id="splash">
<div id="splash-logo">Loading..</div>
</div>
<div class="splashbg"></div>

 

03　jQueryを読み込む

jQueryを使う場合には、jQuery本体を読み込んでおく必要があります。
CDNで読み込む方法と、jQeryをダウンロードして読み込む方法の2パターンがあります。
今回は簡単なCDNで読み込む方法
※</body>の上へ入れる
※本体のjQueryの下へ自作のJavaScriptを読み込ませる

 

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/screen1.js"></script>
</body>

 

04　横から画面が変わる

※screen2.css、screen2.jsに変更するだけで、横からのパターンに変更できます。
バックグラウンドカラーは自分の好きな色に変更してみてください。

 

05　JavaScript記述

1200=1.2秒
screen1.js内に詳しい説明を入れてありますので確認してください。

 

JS

$(window).on('load',function(){
$("#splash-logo").delay(1200).fadeOut('slow');
$("#splash").delay(1500).fadeOut('slow',function(){
$('body').addClass('appear');
});
$('.splashbg').on('animationend', function() {
});
});