<!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">
<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-scrollify/1.0.21/jquery.scrollify.min.js">
</script>
<style>@charset "utf-8";
/*========= レイアウトのためのCSS ===============*/
body {
background-image: linear-gradient(
103.3deg,
rgba(252, 225, 208, 1) 30%,
rgba(255, 173, 214, 1) 55.7%,
rgba(162, 186, 245, 1) 81.8%
);
}
#header {
padding: 40px;
background-image: radial-gradient(
circle farthest-corner at 12.3% 19.3%,
rgba(85, 88, 218, 1) 0%,
rgba(95, 209, 249, 1) 100.2%
);
color: #fff;
text-align: center;
}
.box {
color: #fff;
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#box1 {
background-image: linear-gradient(
112.1deg,
rgba(32, 38, 57, 1) 11.4%,
rgba(63, 76, 119, 1) 70.2%
);
}
/*========= スクロールダウンのための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 {
/*描画位置*/
position: absolute;
left: -15px;
bottom: 45px;
/*テキストの形状*/
color: #eee;
font-size: 0.7rem;
letter-spacing: 0.05em;
}
/*マウスの中の線描写 */
.scrolldown span::after {
content: "";
/*描画位置*/
position: absolute;
top: 10px;
left: 17px;
/*線の形状*/
width: 1px;
height: 15px;
background: #eee;
/*線の動き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 {
content: "";
/*描画位置*/
position: absolute;
bottom: 0;
left: -10px;
/*マウスの形状*/
width: 25px;
height: 37px;
border-radius: 10px;
border: 1px solid #eee;
}
/*マウスの中の丸の描写*/
.scrolldown:after {
content: "";
/*描画位置*/
position: absolute;
bottom: 26px;
left: 0;
/*丸の形状*/
width: 5px;
height: 5px;
border-radius: 50%;
border: 1px solid #eee;
}
#box2 {
background-image: radial-gradient(
circle farthest-corner at 10% 20%,
rgba(90, 92, 106, 1) 0%,
rgba(32, 45, 58, 1) 81.3%
);
}
#box3 {
background-image: radial-gradient(
circle farthest-corner at 10% 20%,
rgba(69, 86, 102, 1) 0%,
rgba(34, 34, 34, 1) 90%
);
}
#box4 {
background-image: radial-gradient(
circle farthest-corner at -4% -12.9%,
rgba(74, 98, 110, 1) 0.3%,
rgba(30, 33, 48, 1) 90.2%
);
}
#footer {
padding: 40px;
background-image: radial-gradient(
circle farthest-corner at 12.3% 19.3%,
rgba(85, 88, 218, 1) 0%,
rgba(95, 209, 249, 1) 100.2%
);
color: #fff;
padding: 40px;
text-align: center;
}
#footer a {
color: #fff;
}
/*========= ページネーションCSS ===============*/
.pagination {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 1em;
z-index: 10;
list-style: none;
}
.pagination a {
display: block;
height: 20px;
margin-bottom: 5px;
color: #fff;
position: relative;
padding: 4px;
}
.pagination a.active:after {
box-shadow: inset 0 0 0 5px;
}
/*現在地表示のテキストの設定*/
.pagination a .hover-text {
position: absolute;
right: 15px;
top: 0;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
padding-right: 15px;
}
.pagination a:hover .hover-text {
opacity: 1;
}
.pagination a:after {
-webkit-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
width: 10px;
height: 10px;
display: block;
border: 1px solid;
border-radius: 50%;
content: "";
position: absolute;
margin: auto;
top: 0;
right: 3px;
bottom: 0;
}
/*320px以下は現在地表示のテキストを非表示*/
@media screen and (max-width: 320px) {
.pagination a .hover-text {
display: none;
}
}</style>
</head>
<body>
<body>
<header id="header">
<h1>Header</h1>
</header>
<main>
<section id="box1" class="box" data-section-name="About">
<h2>About</h2>
<div class="scrolldown">
<span>Scroll</span>
</div>
<!--/box-->
</section>
<section id="box2" class="box" data-section-name="Service">
<h2>Service</h2>
<!--/box-->
</section>
<section id="box3" class="box" data-section-name="Access">
<h2>Access</h2>
<!--/box-->
</section>
<section id="box4" class="box" data-section-name="Contact">
<h2>Contact</h2>
<!--/box-->
</section>
</main>
<footer id="footer">
<small>参照<br>
<a href="https://projects.lukehaas.me/scrollify/" target="_blank">https://projects.lukehaas.me/scrollify/</a>
</small>
</footer>
<script>$.scrollify({
section: ".box", //1ページスクロールさせたいエリアクラス名
scrollbars: "false", //スクロールバー表示・非表示設定
interstitialSection: "#header,#footer", //ヘッダーフッターを認識し、1ページスクロールさせず表示されるように設定
easing: "swing", // 他にもlinearやeaseOutExpoといったjQueryのeasing指定可能
scrollSpeed: 300, // スクロール時の速度
//以下、ページネーション設定
before: function (i, panels) {
var ref = panels[i].attr("data-section-name");
$(".pagination .active").removeClass("active");
$(".pagination").
find('a[href="#' + ref + '"]').
addClass("active");
},
afterRender: function () {
var pagination = '<ul class="pagination">';
var activeClass = "";
$(".box").each(function (i) {
//1ページスクロールさせたいエリアクラス名を指定
activeClass = "";
if (i === $.scrollify.currentIndex()) {
activeClass = "active";
}
pagination +=
'<li>
<a class="' +
activeClass +
'" href="#' +
$(this).attr("data-section-name") +
'">
<span class="hover-text">' +
$(this).attr("data-section-name").charAt(0).toUpperCase() +
$(this).attr("data-section-name").slice(1) +
"</span>
</a>
</li>";
});
pagination += "</ul>";
$("#box1").append(pagination); //はじめのエリアにページネーションを表示
$(".pagination a").on("click", $.scrollify.move);
} });
//# sourceURL=pen.js</script>
</body>
</html>/*
外部依存 CSS:
- https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
外部依存 JS (このデモは下記の JS にも依存します):
- https://code.jquery.com/jquery-3.4.1.min.js
- https://cdnjs.cloudflare.com/jquery.scrollify.min.js
*/
@charset "utf-8";
/*========= レイアウトのためのCSS ===============*/
body {
background-image: linear-gradient(
103.3deg,
rgba(252, 225, 208, 1) 30%,
rgba(255, 173, 214, 1) 55.7%,
rgba(162, 186, 245, 1) 81.8%
);
}
#header {
padding: 40px;
background-image: radial-gradient(
circle farthest-corner at 12.3% 19.3%,
rgba(85, 88, 218, 1) 0%,
rgba(95, 209, 249, 1) 100.2%
);
color: #fff;
text-align: center;
}
.box {
color: #fff;
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#box1 {
background-image: linear-gradient(
112.1deg,
rgba(32, 38, 57, 1) 11.4%,
rgba(63, 76, 119, 1) 70.2%
);
}
/*========= スクロールダウンのための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 {
/*描画位置*/
position: absolute;
left: -15px;
bottom: 45px;
/*テキストの形状*/
color: #eee;
font-size: 0.7rem;
letter-spacing: 0.05em;
}
/*マウスの中の線描写 */
.scrolldown span::after {
content: "";
/*描画位置*/
position: absolute;
top: 10px;
left: 17px;
/*線の形状*/
width: 1px;
height: 15px;
background: #eee;
/*線の動き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 {
content: "";
/*描画位置*/
position: absolute;
bottom: 0;
left: -10px;
/*マウスの形状*/
width: 25px;
height: 37px;
border-radius: 10px;
border: 1px solid #eee;
}
/*マウスの中の丸の描写*/
.scrolldown:after {
content: "";
/*描画位置*/
position: absolute;
bottom: 26px;
left: 0;
/*丸の形状*/
width: 5px;
height: 5px;
border-radius: 50%;
border: 1px solid #eee;
}
#box2 {
background-image: radial-gradient(
circle farthest-corner at 10% 20%,
rgba(90, 92, 106, 1) 0%,
rgba(32, 45, 58, 1) 81.3%
);
}
#box3 {
background-image: radial-gradient(
circle farthest-corner at 10% 20%,
rgba(69, 86, 102, 1) 0%,
rgba(34, 34, 34, 1) 90%
);
}
#box4 {
background-image: radial-gradient(
circle farthest-corner at -4% -12.9%,
rgba(74, 98, 110, 1) 0.3%,
rgba(30, 33, 48, 1) 90.2%
);
}
#footer {
padding: 40px;
background-image: radial-gradient(
circle farthest-corner at 12.3% 19.3%,
rgba(85, 88, 218, 1) 0%,
rgba(95, 209, 249, 1) 100.2%
);
color: #fff;
padding: 40px;
text-align: center;
}
#footer a {
color: #fff;
}
/*========= ページネーションCSS ===============*/
.pagination {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 1em;
z-index: 10;
list-style: none;
}
.pagination a {
display: block;
height: 20px;
margin-bottom: 5px;
color: #fff;
position: relative;
padding: 4px;
}
.pagination a.active:after {
box-shadow: inset 0 0 0 5px;
}
/*現在地表示のテキストの設定*/
.pagination a .hover-text {
position: absolute;
right: 15px;
top: 0;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
padding-right: 15px;
}
.pagination a:hover .hover-text {
opacity: 1;
}
.pagination a:after {
-webkit-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
width: 10px;
height: 10px;
display: block;
border: 1px solid;
border-radius: 50%;
content: "";
position: absolute;
margin: auto;
top: 0;
right: 3px;
bottom: 0;
}
/*320px以下は現在地表示のテキストを非表示*/
@media screen and (max-width: 320px) {
.pagination a .hover-text {
display: none;
}
}/*
外部依存 JS:
- https://code.jquery.com/jquery-3.4.1.min.js
- https://cdnjs.cloudflare.com/jquery.scrollify.min.js
外部依存 CSS (このデモは下記の CSS にも依存します):
- https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
*/
$.scrollify({
section: ".box", //1ページスクロールさせたいエリアクラス名
scrollbars: "false", //スクロールバー表示・非表示設定
interstitialSection: "#header,#footer", //ヘッダーフッターを認識し、1ページスクロールさせず表示されるように設定
easing: "swing", // 他にもlinearやeaseOutExpoといったjQueryのeasing指定可能
scrollSpeed: 300, // スクロール時の速度
//以下、ページネーション設定
before: function (i, panels) {
var ref = panels[i].attr("data-section-name");
$(".pagination .active").removeClass("active");
$(".pagination").
find('a[href="#' + ref + '"]').
addClass("active");
},
afterRender: function () {
var pagination = '<ul class="pagination">';
var activeClass = "";
$(".box").each(function (i) {
//1ページスクロールさせたいエリアクラス名を指定
activeClass = "";
if (i === $.scrollify.currentIndex()) {
activeClass = "active";
}
pagination +=
'<li><a class="' +
activeClass +
'" href="#' +
$(this).attr("data-section-name") +
'"><span class="hover-text">' +
$(this).attr("data-section-name").charAt(0).toUpperCase() +
$(this).attr("data-section-name").slice(1) +
"</span></a></li>";
});
pagination += "</ul>";
$("#box1").append(pagination); //はじめのエリアにページネーションを表示
$(".pagination a").on("click", $.scrollify.move);
} });
//# sourceURL=pen.js