フェードを使った画面遷移について
別のページに移動する際に使うのが、画面遷移アニメーションです。画面遷移に関しては通常ならパッと切り替わりますが、少しリッチさを演出したい時は、アニメーションを入れるのが定番。過去にスライドモーションを使ったタイプを紹介しましたが、今回は、フェードアニメのものを見ていきましょう。
フェードは徐々に消えたり、逆に現れたりするアニメーションで、スライドと同じくよく利用されています。スライドの方がアクティブさを演出するのに対し、フェードの方は柔らかく上品なイメージでしょうか。
プログラムの発火条件を変更することで、ウインドウを読み込んだときに自動で動作させることもできます。どちらかというとボタンクリックなどより、ページ読み込み時に自動で動作させる方が多いかもしれません。
フェードを使った画面遷移の活用シーン
- リッチで高級感のあるページを作りたい
- スライド系のモーションより落ち着いたものがほしい
高級コスメや結婚式場などでよく使われている気がします。もちろん、工夫次第で色々な場面い適用可能。ただし、フェードが長い、多用しすぎなどの場合は、ユーザビリティが低下するので注意が必要でしょう。
フェードを使った画面遷移の作り方
HTMLとCSSで画面全体をマスクするような真っ白のDIV要素を作っておきます。真っ白のDIVを画面全体にかぶせ、opacityを1から0に移行させることで徐々に透明化し、フェードインしたように見せています。
今回は、キーフレームを使って、アニメーションもCSSで制御するようにしました。JavaScriptは、動作させるためにクラスの付与を行います。このため、JavaScriptを修正すれば、色々な場面でフェードアニメを使うことが可能です。
ソースコード
HTML
<div id="fader"></div>
<!–ze-no:以下は不要な場合は削除してください–>
<div id="fade">FadeIn-test<br>
<button class="bt_count" id="BtFade">Go Fade</button>
</div>
CSS
#fader{
background-color: #ffffff;
position:fixed;
width:0%;
height:0%;
top:0;
left:0;
opacity: 1;
z-index: 9999;
}
.fadeon{
width: 100%!important;
height:100%!important;
animation: aniFade 0.6s backwards;
}
#fade{
width:fit-content;
margin:120px auto;
font-size:48px;
text-align: center;
}
#BtFade{
margin:10px auto;
width:fit-content;
}
@keyframes aniFade {
0% {
opacity: 1;
}
40%{
opacity: 1;
}
100% {
opacity: 0;
}
}
background-color: #ffffff;
position:fixed;
width:0%;
height:0%;
top:0;
left:0;
opacity: 1;
z-index: 9999;
}
.fadeon{
width: 100%!important;
height:100%!important;
animation: aniFade 0.6s backwards;
}
#fade{
width:fit-content;
margin:120px auto;
font-size:48px;
text-align: center;
}
#BtFade{
margin:10px auto;
width:fit-content;
}
@keyframes aniFade {
0% {
opacity: 1;
}
40%{
opacity: 1;
}
100% {
opacity: 0;
}
}
JavaScript
//ze-no:WebDevelopment
const BtFade = document.getElementById("BtFade");
const fader = document.getElementById("fader");
console.log("Ze-No Button", BtFade)
//window.addEventListener('DOMContentLoaded', function() { に切り替えるとウインドウオープン時に発火
BtFade.addEventListener('click', ()=>{
var check=document.body.classList.contains("fadeon");
if(check==false){
fader.classList.add("fadeon");
console.log("Ze-No fader", fader)
BreakTime();
}
});
//sleepで設定した時間を経過後、クラスを取り除きます
async function BreakTime(){
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));
await sleep(600);
fader.classList.remove("fadeon");
}
const BtFade = document.getElementById("BtFade");
const fader = document.getElementById("fader");
console.log("Ze-No Button", BtFade)
//window.addEventListener('DOMContentLoaded', function() { に切り替えるとウインドウオープン時に発火
BtFade.addEventListener('click', ()=>{
var check=document.body.classList.contains("fadeon");
if(check==false){
fader.classList.add("fadeon");
console.log("Ze-No fader", fader)
BreakTime();
}
});
//sleepで設定した時間を経過後、クラスを取り除きます
async function BreakTime(){
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));
await sleep(600);
fader.classList.remove("fadeon");
}
まとめ
画面遷移モーションのご紹介でした。CSSのOpacityを変更することでフェードインをフェードアウトにしたりと、色々できます。
目次-Index-
