飛行機雲のような下線がひかれるアニメーション
JSの「IntersectionObserver」を使用してテキスト要素がビューポートに入ったときに下線を引くアニメーションを開始しています。 下線は「linear-gradient」を使用し、疑似要素でSVG飛行機 + グラデーション線を文字に重なるように引いてます。 また「scroll-snap-type: y mandatory;」で垂直方向(y)にスクロールを強制的（mandatory）に止めるようにしています。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.carousel {
overflow: auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.text-section {
display: grid;
place-content: center;
height: 100%;
scroll-snap-align: start;
text-align: center;
line-height: 1.5;
background: #efefef;
}
.text-section:nth-child(odd) {
background-color: #ffffff;
}
h2 {
font-size: 3rem;
font-weight: bold;
margin-bottom: 1rem;
}
.under-line {
position: relative;
display: inline-block;
}
.under-line::after {
content: '';
position: absolute;
left: 0;
bottom: 10px;
width: 0%;
height: 8px;
background: linear-gradient(to right, #87CEEB, #E0F6FF, #87CEEB);
border-radius: 4px;
opacity: 0.8;
}
.airplane-trail {
position: absolute;
right: 100%;
bottom: -5px;
width: 30px;
height: 30px;
opacity: 0;
z-index: 10;
}
.airplane-trail::before {
content: '';
display: block;
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23333' d='M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
@keyframes flyPlane {
0% {
right: 100%;
opacity: 1;
}
70% {
opacity: 1;
}
100% {
right: -30px;
opacity: 0;
}
}
@keyframes trailExpand {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.under-line-visible::after {
animation: trailExpand 2s ease 0.1s forwards;
}
.under-line-visible .airplane-trail {
animation: flyPlane 2s ease 0s forwards;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="carousel">
<section class="text-section">
<h2 class="under-line">
タイトルが入ります
<div class="airplane-trail"></div>
</h2>
<p>ここに概要が入ります。ここに概要が入ります。</p>
</section>
<section class="text-section">
<h2 class="under-line">
タイトルが入ります
<div class="airplane-trail"></div>
</h2>
<p>ここに概要が入ります。ここに概要が入ります。</p>
</section>
<section class="text-section">
<h2 class="under-line">
タイトルが入ります
<div class="airplane-trail"></div>
</h2>
<p>ここに概要が入ります。ここに概要が入ります。</p>
</section>
<section class="text-section">
<h2 class="under-line">
タイトルが入ります
<div class="airplane-trail"></div>
</h2>
<p>ここに概要が入ります。ここに概要が入ります。</p>
</section>
</div>
<script id="js-section">document.addEventListener('DOMContentLoaded', function() {
// IntersectionObserverを作成し、各要素のビューポート内での位置を監視する
const observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
// 要素がビューポートに入っているかどうかをチェック
if (entry.isIntersecting) {
entry.target.classList.add('under-line-visible');
}
});
}, {
threshold: 0.5
});
const elements = document.querySelectorAll('.text-section h2');
// 各要素に対して、上記で作成したIntersectionObserverを適用
elements.forEach(function(el) {
observer.observe(el);
});
});
</script></body></html>
「IntersectionObserver」を使用したスクロール時に下線がひかれるアニメーション
JSの「IntersectionObserver」を使用してテキスト要素がビューポートに入ったときに下線を引くアニメーションを開始しています。 下線は「linear-gradient」を使用し文字に重なるように引いてます。 また「scroll-snap-type: y mandatory;」で垂直方向(y)にスクロールを強制的（mandatory）に止めるようにしています。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.carousel {
overflow: auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.text-section {
display: grid;
place-content: center;
height: 100%;
scroll-snap-align: start;
text-align: center;
line-height: 1.5;
background: #efefef;
}
.text-section:nth-child(odd) {
background-color: #ffffff;
}
h2 {
font-size: 3rem;
font-weight: bold;
margin-bottom: 1rem;
}
.under-line {
background: linear-gradient(transparent 75%, #FFFE03 60%);
background-repeat: no-repeat;
background-size: 0%;
background-position: left bottom 10px;
}
@keyframes underLine {
100% {
background-size: 100%;
}
}
.under-line-visible {
animation: underLine 1s ease 0.5s forwards;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"> <div class="carousel">
<section class="text-section">
<h2 class="under-line">タイトルが入ります</h2>
<p>ここに概要が入ります。ここに概要が入ります。</p>
</section>
<section class="text-section">
<h2 class="under-line">タイトルが入ります</h2>
<p>ここに概要が入ります。ここに概要が入ります。</p>
</section>
<section class="text-section">
<h2 class="under-line">タイトルが入ります</h2>
<p>ここに概要が入ります。ここに概要が入ります。</p>
</section>
<section class="text-section">
<h2 class="under-line">タイトルが入ります</h2>
<p>ここに概要が入ります。ここに概要が入ります。</p>
</section>
</div>
<script id="js-section">document.addEventListener('DOMContentLoaded', function() {
// IntersectionObserverを作成し、各要素のビューポート内での位置を監視する
const observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
// 要素がビューポートに入っているかどうかをチェック
if (entry.isIntersecting) {
entry.target.classList.add('under-line-visible');
}
});
}, {
threshold: 0.5
});
const elements = document.querySelectorAll('.text-section h2');
// 各要素に対して、上記で作成したIntersectionObserverを適用
elements.forEach(function(el) {
observer.observe(el);
});
});
</script></body></html>
スクロールに合わせて動画が再生されるJavaScriptライブラリ
「scrolly-video.js」というライブラリを使用。 JSでビデオを配置する要素のidと動画ファイルを指定するだけで実装できます。 <a href="https://scrollyvideo.js.org/" target="_blank">https://scrollyvideo.js.org/</a>
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><script src="https://cdn.jsdelivr.net/npm/scrolly-video@latest/dist/scrolly-video.js" class="manual-link"></script><style id="out-style">body,
html,
* {
margin: 0;
padding: 0;
}
.video-section {
height: 250vh;
}
.text-section {
height: 100vh;
display: grid;
place-content: center;
background-color: #fafafa;
text-align: center;
line-height: 1.5;
}
h2 {
font-size: 3rem;
margin-bottom: 2rem;
}
</style><style id="pic-style"></style>
</head><body id="svg-section" style="width: 800px; height: 450px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"> <div class="text-section">
<h2>スクロールしてください</h2>
<p>
ここに概要が入ります。ここに概要が入ります。
</p>
</div>
<div class="video-section">
<div id="scrolly-video"></div>
</div>
<div class="text-section">
<h2>タイトルが入ります</h2>
<p>
ここに概要が入ります。ここに概要が入ります。
</p>
</div>
<script id="js-section">new ScrollyVideo({
scrollyVideoContainer: "scrolly-video",
src: "https://pa-tu.work/storage/video/waterfall.mp4"
});
</script></body></html>
スマホにも対応。CSSだけで実装するパララックス
「clip-path: inset(0);」を指定し要素全体をクリップして、パララックスを実装しています。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.section {
position: relative;
width: 100vw;
height: 100vh;
}
.section-layer {
position: absolute;
inset: 0;
clip-path: inset(0);
/* 要素全体をクリップ */
}
.content {
display: grid;
place-content: center;
height: 100vh;
background-color: #efefef;
color: #353535;
font-size: 26px;
text-align: center;
}
.parallax {
position: fixed;
inset: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg-01 {
background-image: url(/storage/img/posts/64c9cd8b5a73d.jpg);
}
.bg-02 {
background-image: url(/storage/img/posts/64c9cd8b7c870.jpg);
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; overflow: auto;" class="vsc-initialized"><div class="container">
<div class="section">
<div class="section-layer">
<div class="parallax bg-01"></div>
</div>
</div>
<div class="section">
<div class="section-layer">
<div class="content">
<p>content</p>
</div>
</div>
</div>
<div class="section">
<div class="section-layer">
<div class="parallax bg-02"></div>
</div>
</div>
</div>
</body></html>
CSSだけで実装するパララックス
「background-attachment: fixed;」を指定しパララックスを実装しています。 ※「background-attachment: fixed」はiOSのSafariではサポートしていません。 スマホで使用する場合はJSプラグインなどを使用する必要があります。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.content {
display: grid;
place-content: center;
height: 100vh;
background-color: #efefef;
color: #353535;
font-size: 26px;
text-align: center;
}
.parallax {
width: 100%;
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg-01 {
background-image: url(/storage/img/posts/64c9cd8b5a73d.jpg);
}
.bg-02 {
background-image: url(/storage/img/posts/64c9cd8b7c870.jpg);
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; overflow: auto;" class="vsc-initialized"><div class="container">
<div class="parallax bg-01"></div>
<div class="content">
<p>content</p>
</div>
<div class="parallax bg-02"></div>
</div>
</body></html>
スクロール時に特定の位置でピタッと止めるスクロールスナップ
「scroll-snap-type: y mandatory;」で垂直方向(y)にスクロールを強制的（mandatory）に止めるようにしています。 「scroll-snap-align: start;」でスクロールが各 .item 要素の開始位置で止まるようにしています。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
background-color: white;
}
.carousel {
overflow: auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.item {
display: grid;
place-items: center;
font-size: 30px;
height: 100%;
scroll-snap-align: start;
background-color: #efefef;
}
.item:nth-child(odd) {
background-color: #fff;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<div class="carousel">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
</div>
</body></html>
スクロールバーをグラデーションにしたCSSデザイン
「-webkit-scrollbar〜」でスクロールバーの色を変えてます。Firefox、Edge等のブラウザでは使えません。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: white;
padding: 8rem;
}
.box {
width: 200px;
height: 200px;
background-color: #f9f9f9;
color: #f9f9f9;
overflow-y: scroll;
font-size: 23px;
}
.box::-webkit-scrollbar {
width: 15px;
}
.box::-webkit-scrollbar-track {
background-color: #000;
border: 3px solid #aaa;
}
.box::-webkit-scrollbar-thumb {
background-image: linear-gradient(135deg, #F6D242 10%, #FF52E5 100%);
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container">
<div class="box">
<p>スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。</p>
</div>
</div>
</body></html>
スクロールバーをグラデーションにしたCSSデザイン
「-webkit-scrollbar〜」でスクロールバーの色を変えてます。Firefox、Edge等のブラウザでは使えません。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
padding: 8rem;
}
.box {
width: 200px;
height: 200px;
background-color: #2C2F35;
color: #2D3240;
overflow-y: scroll;
font-size: 23px;
}
.box::-webkit-scrollbar {
width: 14px;
}
.box::-webkit-scrollbar-track {
background-color: #000;
border-radius: 10px;
}
.box::-webkit-scrollbar-thumb {
background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%);
border-radius: 10px;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container">
<div class="box">
<p>スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。</p>
</div>
</div>
</body></html>
スクロールバーをライトグリーンにしたCSSデザイン
「-webkit-scrollbar〜」でスクロールバーの色を変えてます。Firefox、Edge等のブラウザでは使えません。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
padding: 8rem;
}
.box {
width: 200px;
height: 200px;
background-color: #2D3240;
color: #2D3240;
overflow-y: scroll;
font-size: 23px;
}
.box::-webkit-scrollbar {
width: 14px;
}
.box::-webkit-scrollbar-track {
background-color: #EFEFEF;
border-radius: 10px;
}
.box::-webkit-scrollbar-thumb {
background-color: #A1CF4A;
border-radius: 10px;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container">
<div class="box">
<p>スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。スクロールバーをデザインする。</p>
</div>
</div>
</body></html>
スクロール時に見出しを固定する方法
h2タグの「position: sticky;」「top: 0;」でスクロール時に見出しを固定表示させています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: white;
padding: 2rem;
overflow-y: auto;
}
h2 {
margin: 1rem 0 0.5rem;
padding: 1rem 0.5rem;
background-color: #3fa0da;
color: #fff;
/**************************/
/*section内で見出しを固定 */
/**************************/
position: sticky;
top: 0;
}
p {
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<section>
<h2>見出し1</h2>
<p>最初のコンテンツがここに入ります。最初のコンテンツがここに入ります。最初のコンテンツがここに入ります。最初のコンテンツがここに入ります。最初のコンテンツがここに入ります。最初のコンテンツがここに入ります。最初のコンテンツがここに入ります。最初のコンテンツがここに入ります。最初のコンテンツがここに入ります。最初のコンテンツがここに入ります。最初のコンテンツがここに入ります。最初のコンテンツがここに入ります。最初のコンテンツがここに入ります。最初のコンテンツがここに入ります。最初のコンテンツがここに入ります。最初のコンテンツがここに入ります。</p>
</section>
<section>
<h2>見出し2</h2>
<p>2番目のコンテンツがここに入ります。2番目のコンテンツがここに入ります。2番目のコンテンツがここに入ります。2番目のコンテンツがここに入ります。2番目のコンテンツがここに入ります。2番目のコンテンツがここに入ります。2番目のコンテンツがここに入ります。2番目のコンテンツがここに入ります。2番目のコンテンツがここに入ります。2番目のコンテンツがここに入ります。2番目のコンテンツがここに入ります。2番目のコンテンツがここに入ります。2番目のコンテンツがここに入ります。2番目のコンテンツがここに入ります。2番目のコンテンツがここに入ります。2番目のコンテンツがここに入ります。</p>
</section>
<section>
<h2>見出し3</h2>
<p>3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。3番目のコンテンツがここに入ります。</p>
</section>
</div>
</body></html>
一行追加するだけ。スムーズにスクロールできるCSSプロパティ
「scroll-behavior: smooth;」を指定するとスムーズにスクロールされます。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: white;
padding: 2rem;
}
nav {
display: flex;
gap: 0.5rem;
background-color: #fff;
padding: 1rem;
}
.contents {
/* スムーズスクロール */
scroll-behavior: smooth;
overflow-y: auto;
height: 200px;
}
section {
height: 200px;
display: grid;
place-items: center;
}
section:nth-of-type(1) {
background-color: #43a4d8;
}
section:nth-of-type(2) {
background-color: #81d644;
}
section:nth-of-type(3) {
background-color: #d65c44;
}
h2 {
color: #fff;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<nav>
<a href="#section1">コンテンツ1</a>
<a href="#section2">コンテンツ2</a>
<a href="#section3">コンテンツ3</a>
</nav>
<div class="contents">
<section id="section1">
<h2>コンテンツ1</h2>
</section>
<section id="section2">
<h2>コンテンツ2</h2>
</section>
<section id="section3">
<h2>コンテンツ3</h2>
</section>
</div>
</div>
</body></html>