上記コードではスクロールバーが表示される場合にはスクロール領域外には設定が反映されません。
Webページでダイアログ風のレイヤーを表示する際に、背景が暗くなったりする場合があります。
ここではCSSを用いてWebページ全体にフェード効果を付ける方法を紹介します。
画面全体を覆うレイヤーを表示します。レイヤーの透明度を設定することでフェードの効果を調整します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="FadeDark.css" />
<script type="text/javascript">
function fade() {
var target = document.getElementById("fadeLayer");
target.style.visibility = "visible";
}
</script>
</head>
<body>
<div class="MainFrame">
あいうえお<br />
ABCDE<br />
<div style="height:120px"></div>
<a href="javascript:void(0);" onclick="fade();">黒フェード</a>
</div>
<div id="fadeLayer"></div>
</body>
</html>
body {
background-image:URL("img/img.jpg");
}
.MainFrame {
text-align:center;
margin-left:auto;
margin-right:auto;
width:420px;
background-color:#FFFFFF;
}
#fadeLayer {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000000;
opacity:0.5;
visibility:hidden;
z-index:1;
}
"<div id="fadeLayer"></div>"が画面全体を覆うフェード用のレイヤーです。初期状態では"visibility:hidden;"に設定し画面に表示されない状態にします。フェードのリンクのクリックによりJavaScriptでフェード用のレイヤーの"visibility"を"visible"に変更します。フェード用レイヤーの要素はDivタグのIDから取得します。IDからの要素の取得についてはこちらの記事を参照して下さい。
HTMLファイルを表示します。下図の画面が表示されます。
画面の[黒フェード]リンクをクリックします。全画面に半透明のレイヤーが表示され、画面が暗くなりました。
CSSのopacityの値を変更すると効果が変わります。こちらは"opacity:0.8"の場合です。
こちらは"opacity:0.2"の場合です。
白色でフェードする場合のコードは以下になります。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="FadeLight.css" />
<script type="text/javascript">
function fade() {
var target = document.getElementById("fadeLayer");
target.style.visibility = "visible";
}
</script>
</head>
<body>
<div class="MainFrame">
あいうえお<br />
ABCDE<br />
<div style="height:120px"></div>
<a href="javascript:void(0);" onclick="fade();">白フェード</a>
</div>
<div id="fadeLayer"></div>
</body>
</html>
body {
background-image:URL("img/img.jpg");
}
.MainFrame {
text-align:center;
margin-left:auto;
margin-right:auto;
width:420px;
background-color:#FFFFFF;
}
#fadeLayer {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#FFFFFF;
opacity:0.75;
visibility:hidden;
z-index:1;
}
FadeLayerの色を変えると白くフェードさせることもできます。
画面領域がスクロールする場合は、レイヤー表示時に画面全体の幅と高さをJavaScriptで取得して設定するコードを追加します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="FadeDark.css" />
<script type="text/javascript">
function fade() {
var target = document.getElementById("fadeLayer");
var maxheightA = Math.max(document.body.clientHeight, document.body.scrollHeight)
var maxheightB = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
var MaxHeight = Math.max(maxheightA,maxheightB);
target.style.height = MaxHeight+"px";
var maxwidthA = Math.max(document.body.clientWidth, document.body.scrollWidth)
var maxwidthB = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)
var MaxWidth = Math.max(maxwidthA, maxwidthB);
target.style.width = MaxWidth + "px";
//下記の記述でも良い
/*
var MaxHeight = Math.max(
Math.max(document.body.clientHeight, document.body.scrollHeight),
Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight));
target.style.height = MaxHeight+"px";
var MaxWidth = Math.max(
Math.max(document.body.clientWidth, document.body.scrollWidth),
Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth));
target.style.width = MaxWidth + "px";
*/
target.style.visibility = "visible";
}
</script>
</head>
<body>
<div class="MainFrame">
あいうえお<br />
ABCDE<br />
<div style="height:120px"></div>
<a href="javascript:void(0);" onclick="fade();">黒フェード</a>
</div>
<div id="fadeLayer"></div>
</body>
</html>
CSSファイル (FadeDark.css)
CSSファイルは先のものから変更はありません。
レイヤーを表示するJavaScriptのコード部分に、スクロール領域を含めた画面の幅、高さを取得するコードを追加し、最も大きな値をレイヤーの幅、高さに設定します。スクロールバーが無い状態では、clientWidth, clientHeightの値が大きくなり、スクロールバーがある場合はscrollHeight, scrollWidthの値が大きくなります。
