今回は、ページをクリックしたら、表示エリアのセンターに隠れていた画像が表示されるという流れを作成して見ました。
ルート階層の中に・・・
linksフォルダー（styles.css, scripts.js）
picフォルダー（example.png）
という構造です。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Fade In Example</title>
<link rel="stylesheet" href="links/styles.css">
</head>
<body>
<div id="mainbox">
<div class="image-container">
<img src="pic/example.png" alt="Image" id="fadeImage">
</div>
</div>
<script src="links/scripts.js"></script>
</body>
</html>
<!-- index.html -->
/* styles.css */
* {
margin: 0px;
padding: 0px;
}
body {
background: #edfd8e;
}
.image-container {
position: relative;
width: 640px;
height: 480px;
overflow: hidden;
}
#mainbox {
width: 640px;
height: 480px;
background-color: #edfd8e;
/* 水平・垂直方向の中央揃え */
margin: 0px auto;
}
#fadeImage {
width: 100%;
height: auto;
opacity: 0; /* 最初は非表示 */
transition: opacity 3.0s ease-in-out; /* フェードインのアニメーション設定 */
}
/* styles.css */
/* scripts.js */
document.addEventListener('DOMContentLoaded', function() {
var fadeImage = document.getElementById('fadeImage');
fadeImage.addEventListener('click', function() {
fadeImage.style.opacity = '1'; // クリック時にフェードイン
});
});
/* scripts.js */
ブラウザの表示領域の左右センターにmainboxを指定し、その中にexample.pngを非表示で忍ばせます。※実際にはmainboxは背景と同一色で線は無指定としています。
後はクリックすれば少しずつ画像が・・・
フェードインします。
