<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.multiscroll/0.2.0/jquery.multiscroll.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.multiscroll/0.2.0/jquery.multiscroll.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js">
</script>
<style>@charset "utf-8";
/*========= レイアウトのためのCSS ===============*/
body {
word-break: break-all;
}
/* HEADER */
#header {
position: relative;
z-index: 999;
/*装飾のためのCSS*/
background: #222;
color: #f2f2f2;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 20px;
}
/*========= スクロールダウンのためのCSS ===============*/
/*スクロールダウン全体の場所*/
.scrolldown {
/*描画位置※位置は適宜調整してください*/
position: absolute;
bottom: 10px;
right: 50%;
/*マウスの動き1.6秒かけて動く永遠にループ*/
animation: mousemove 1.6s ease-in-out infinite;
}
/*下からの距離が変化して上から下に動く*/
@keyframes mousemove {
0% {
bottom: 10px;
}
50% {
bottom: 5px;
}
100% {
bottom: 10px;
}
}
/*Scrollテキストの描写*/
.scrolldown span {
z-index: 3;
/*描画位置*/
position: absolute;
left: -15px;
bottom: 45px;
/*テキストの形状*/
color: #333;
font-size: 0.7rem;
letter-spacing: 0.05em;
white-space: nowrap;
}
/*マウスの中の線描写 */
.scrolldown span::after {
z-index: 3;
content: "";
/*描画位置*/
position: absolute;
top: 10px;
left: 17px;
/*線の形状*/
width: 1px;
height: 15px;
background: #333;
/*線の動き1.4秒かけて動く。永遠にループ*/
animation: mousepathmove 1.4s linear infinite;
opacity: 0;
}
/*上からの距離・不透明度・高さが変化して上から下に流れる*/
@keyframes mousepathmove {
0% {
height: 0;
top: 10px;
opacity: 0;
}
50% {
height: 15px;
opacity: 1;
}
100% {
height: 0;
top: 30px;
opacity: 0;
}
}
/*マウスの描写 */
.scrolldown:before {
z-index: 3;
content: "";
/*描画位置*/
position: absolute;
bottom: 0;
left: -10px;
/*マウスの形状*/
width: 25px;
height: 37px;
border-radius: 10px;
border: 1px solid #333;
}
/*マウスの中の丸の描写*/
.scrolldown:after {
z-index: 3;
content: "";
/*描画位置*/
position: absolute;
bottom: 26px;
left: 0;
/*丸の形状*/
width: 5px;
height: 5px;
border-radius: 50%;
border: 1px solid #333;
}
/*全体のエリア設定*/
.ms-section {
color: #666;
padding: 20px;
}
.ms-section a {
color: #666;
}
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.3rem;
margin: 0 0 20px 0;
text-align: center;
}
p {
margin: 0 0 20px 0;
}
/*右にある丸ナビゲーション色*/
#multiscroll-nav span {
background: transparent !important;
border-color: #fff !important;
}
/*右にある丸のナビゲーション現在地色*/
#multiscroll-nav li .active span {
background: #666 !important;
}
/*右上のナビゲーション*/
#menu li {
display: inline-block;
margin: 10px;
}
#menu li a {
text-decoration: none;
color: #fff;
padding: 5px 10px;
display: block;
border-radius: 10px;
}
#menu li.active a {
color: #666;
}
/*右エリア画像設定*/
#right1 {
background: url("/wp-content/uploads/demos/_assets/nail1.jpg") no-repeat
center;
background-size: cover;
}
#right2 {
background: url("/wp-content/uploads/demos/_assets/nail2.jpg") no-repeat
center;
background-size: cover;
}
#right3 {
background: url("/wp-content/uploads/demos/_assets/nail3.jpg") no-repeat
center;
background-size: cover;
}
#right4 {
background: url("/wp-content/uploads/demos/_assets/nail4.jpg") no-repeat
center;
background-size: cover;
}
#right5 {
background: url("/wp-content/uploads/demos/_assets/nail5.jpg") no-repeat
center;
background-size: cover;
}
#right6 {
background: url("/wp-content/uploads/demos/_assets/nail6.jpg") no-repeat
center;
background-size: cover;
}
/*＝＝＝＝＝＝＝＝＝＝＝320px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width: 320px) {
#header {
justify-content: center;
}
/*全体のボックスについている余白をリセット*/
.ms-section {
padding: 0;
}
/*天地中央になっている見せ方を上ぞろえに上書き*/
.ms-tableCell {
vertical-align: top;
}
/*右上ナビゲーションと右エリア非表示*/
#menu,
.ms-right {
display: none;
}
/*左エリアを横幅100%にして画像＋テキストを出す設定*/
.ms-left {
width: 100% !important;
}
/*左エリア上部画像設定*/
.sp-top {
height: 50%;
margin: 0 0 20px 0;
}
#left1 .sp-top {
background: url("/wp-content/uploads/demos/_assets/daniel-chen-546446-unsplash.jpg")
no-repeat center;
background-size: cover;
}
#left2 .sp-top {
background: url("/wp-content/uploads/demos/_assets/hisu-lee-169301-unsplash.jpg")
no-repeat center;
background-size: cover;
}
#left3 .sp-top {
background: url("/wp-content/uploads/demos/_assets/jeff-sheldon-3226-unsplash.jpg")
no-repeat center;
background-size: cover;
}
#left4 .sp-top {
background: url("/wp-content/uploads/demos/_assets/daniel-chen-546446-unsplash.jpg")
no-repeat center;
background-size: cover;
}
#left5 .sp-top {
background: url("/wp-content/uploads/demos/_assets/hisu-lee-169301-unsplash.jpg")
no-repeat center;
background-size: cover;
}
#left6 .sp-top {
background: url("/wp-content/uploads/demos/_assets/jeff-sheldon-3226-unsplash.jpg")
no-repeat center;
background-size: cover;
}
/*左エリア下部テキスト余白設定*/
.sp-bottom {
padding: 20px;
}
}
.ms-right .ms-section {
color: #666;
}</style>
</head>
<body>
<body>
<header id="header">
<h1>WEB先案内</h1>
<nav>
<ul id="menu">
<li data-menuanchor="area1" class="active">
<a href="#area1">Area 1</a>
</li>
<li data-menuanchor="area2">
<a href="#area2">Area 2</a>
</li>
<li data-menuanchor="area3">
<a href="#area3">Area 3</a>
</li>
<li data-menuanchor="area4">
<a href="#area4">Area 4</a>
</li>
<li data-menuanchor="area5">
<a href="#area5">Area 5</a>
</li>
<li data-menuanchor="area6">
<a href="#area6">Area 6</a>
</li>
</ul>
</nav>
</header>
<div id="wrapper">
<div class="ms-left">
<section class="ms-section" id="left1">
<div class="sp-top">
</div>
<div class="sp-bottom">
<h2>Area 1</h2>
<p>テキストが入ります。</p>
</div>
<!--/left1-->
</section>
<section class="ms-section" id="left2">
<div class="sp-top">
</div>
<div class="sp-bottom">
<h2>Area 2</h2>
<p>テキストが入ります。</p>
</div>
<!--/left2-->
</section>
<section class="ms-section" id="left3">
<div class="sp-top">
</div>
<div class="sp-bottom">
<h2>Area 3</h2>
<p>テキストが入ります。</p>
</div>
<!--/left3-->
</section>
<section class="ms-section" id="left4">
<div class="sp-top">
</div>
<div class="sp-bottom">
<h2>Area 4</h2>
<p>テキストが入ります。</p>
</div>
<!--/left4-->
</section>
<section class="ms-section" id="left5">
<div class="sp-top">
</div>
<div class="sp-bottom">
<h2>Area 5</h2>
<p>テキストが入ります。</p>
</div>
<!--/left5-->
</section>
<section class="ms-section" id="left6">
<div class="sp-top">
</div>
<div class="sp-bottom">
<h2>Area 6</h2>
<p>参照： <a href="https://alvarotrigo.com/multiScroll/" target="_blank">https://alvarotrigo.com/multiScroll/</a>
</p>
<p>レスポンシブに対応したい場合は有料プラグイン（<a href="https://alvarotrigo.com/multiScroll/extensions/" target="_blank">https://alvarotrigo.com/multiScroll/extensions/</a>）の購入が必要です。<br>※サンプルは右カラムを非表示にする形で疑似的にレスポンシブ化をしています。</p>
</div>
<!--/left6-->
</section>
<!--/ms-left-->
</div>
<div class="scrolldown">
<span>Scroll</span>
</div>
<div class="ms-right">
<div class="ms-section" id="right1">
</div>
<div class="ms-section" id="right2">
</div>
<div class="ms-section" id="right3">
</div>
<div class="ms-section" id="right4">
</div>
<div class="ms-section" id="right5">
</div>
<div class="ms-section" id="right6">
</div>
<!--/ms-right-->
</div>
<!--/wrapper-->
</div>
<script>$("#wrapper").multiscroll({
sectionsColor: [
"#E8B8C4",
"#949C22",
"#ABDAF0",
"#99B0F3",
"#B1A1D0",
"#E99E39"],
//セクションごとの背景色設定
anchors: ["area1", "area2", "area3", "area4", "area5", "area6"], //セクションとリンクするページ内アンカーになる名前
menu: "#menu", //上部ナビゲーションのメニュー設定
navigation: true, //右のナビゲーション出現、非表示は false
navigationTooltips: ["Area1", "Area2", "Area3", "Area4", "Area5", "Area6"], //右のナビゲーション現在地時に入るテキスト
loopTop: true, //最初のセクションを上にスクロールして最後のセクションまでスクロールするかどうかを定義します。
loopBottom: true //最後のセクションを下にスクロールして最初のセクションまでスクロールするかどうかを定義します。
});
//# sourceURL=pen.js</script>
</body>
</html>