目次
cssでスクロール効果を作る
基本的なhtmlを作成しましょう:
<body>
<header id="header">
<h1>Scroll me</h1>
<div class="scrolldown1"><span>Scroll</span></div>
</header>
<div id="container">
<p>このエリアがスクロールすると上にかぶさります</p>
<!--/container--></div>
</body>
CSS の説明:
/*スクロールダウン全体の場所*/
.scrolldown1{
/*描画位置※位置は適宜調整してください*/
position:absolute;
left:50%;
bottom:10px;
/*全体の高さ*/
height:50px;
}
/*Scrollテキストの描写*/
.scrolldown1 span{
/*描画位置*/
position: absolute;
left:-15px;
top: -15px;
/*テキストの形状*/
color: #eee;
font-size: 0.7rem;
letter-spacing: 0.05em;
}
/* 線の描写 */
.scrolldown1::after{
content: "";
/*描画位置*/
position: absolute;
top: 0;
/*線の形状*/
width: 1px;
height: 30px;
background: #eee;
/*線の動き1.4秒かけて動く。永遠にループ*/
animation: pathmove 1.4s ease-in-out infinite;
opacity:0;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
0%{
height:0;
top:0;
opacity: 0;
}
30%{
height:30px;
opacity: 1;
}
100%{
height:0;
top:50px;
opacity: 0;
}
}
/*========= レイアウトのためのCSS ===============*/
h1{
position: fixed;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
color:#eee;
text-shadow: 0 0 15px #666;
text-align: center;
}
#header{
width:100%;
height: 100vh;
position: relative;
}
#header:before{
content: '';
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height: 100vh;
/*背景画像設定*/
background:url("/assets/img/bg.jpg") no-repeat center;
background-size:cover;
}
#container{
position: relative;
z-index:1;
background:#eee;
padding:600px 0;
text-align: center;
}
cssを使って目を引くスクロール効果を作るのはとても便利だと思います。
Javascript を使用して Modaal を作成しましょう:
ステップ 1) HTML を追加します:
<!-- トリガー/モーダルを開く -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
ステップ 2) CSS を追加します:
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
ステップ 3) JavaScript を追加します:
// モーダルを取得する
var modal = document.getElementById("myModal");
// モーダルを開くボタンを取得する
var btn = document.getElementById("myBtn");
// モーダルを閉じる <span> 要素を取得する
var span = document.getElementsByClassName("close")[0];
// ユーザーがボタンをクリックすると、モーダルが開きます
btn.onclick = function() {
modal.style.display = "block";
}
// ユーザーが <span> (x) をクリックすると、モーダルが閉じます
span.onclick = function() {
modal.style.display = "none";
}
// ユーザーがモーダル以外の場所をクリックすると、モーダルを閉じます
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
これらは、モーダルを作成するための理解しやすいやり方と思います。
