【 WEBデザイン 】 縦スクロールで、横に動く FirE♯498
縦スクロールをしていき、一定の位置にくると、横スクロールになる動きを実装します。
ユーザーは縦にスクロールする動きを続けると、画面が横スクロールするので、スクロールが楽しくなり、面白い機能だと思います。
今回は、「Works」という制作実績のリストが横スクロールで表示されます。
■ CDN
<!-- ScrollMagic TweenMax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js"></script>
<!-- G SAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>GSAPなどの読み込みです。
■ HTML
<div class="space">
縦スクール
↓
</div>
<!--制作実績-->
<section class="works side-scroll">
<!--タイトル-->
<div class="works-title">
<h1 class="title">
Works
</h1>
</div>
<!--/タイトル-->
<div class="works-container">
<div class="works-container-inner">
<div class="side-scroll-list-wrapper">
<ul class="side-scroll-list">
<li class="side-scroll-item">
<!--実績1-->
<div class="works-container-inner-item">
<div class="works-img">
<img src="http://sap-sutdio.upper.jp/test-images/sap-studio.webp">
</div>
<div class="works-header">
<p>S.A.P.Studio</p>
<h2>S.A.P.Studio</h2>
</div>
<div class="works-body">
<dl>
<dt>WORK </dt>
<dd>coding</dd>
<dt>PERIOD </dt>
<dd>2weeks</dd>
</dl>
</div>
</div>
<!--/実績1-->
</li>
<li class="side-scroll-item">
<!--実績2-->
<div class="works-container-inner-item">
<div class="works-img">
<img src="http://sap-sutdio.upper.jp/test-images/sap-studio.webp">
</div>
<div class="works-header">
<p>S.A.P.Studio</p>
<h2>S.A.P.Studio</h2>
</div>
<div class="works-body">
<dl>
<dt>WORK </dt>
<dd>coding</dd>
<dt>PERIOD </dt>
<dd>2weeks</dd>
</dl>
</div>
</div>
<!--/実績2-->
</li>
<li class="side-scroll-item">
<!--実績3-->
<div class="works-container-inner-item">
<div class="works-img">
<img src="http://sap-sutdio.upper.jp/test-images/sap-studio.webp">
</div>
<div class="works-header">
<p>S.A.P.Studio</p>
<h2>S.A.P.Studio</h2>
</div>
<div class="works-body">
<dl>
<dt>WORK </dt>
<dd>coding</dd>
<dt>PERIOD </dt>
<dd>2weeks</dd>
</dl>
</div>
</div>
<!--/実績3-->
</li>
<li class="side-scroll-item">
<!--実績4-->
<div class="works-container-inner-item">
<div class="works-img">
<img src="http://sap-sutdio.upper.jp/test-images/sap-studio.webp">
</div>
<div class="works-header">
<p>S.A.P.Studio</p>
<h2>S.A.P.Studio</h2>
</div>
<div class="works-body">
<dl>
<dt>WORK </dt>
<dd>coding</dd>
<dt>PERIOD </dt>
<dd>2weeks</dd>
</dl>
</div>
</div>
<!--/実績4-->
</li>
<li class="side-scroll-item">
<!--実績5-->
<div class="works-container-inner-item">
<div class="works-img">
<img src="http://sap-sutdio.upper.jp/test-images/sap-studio.webp">
</div>
<div class="works-header">
<p>S.A.P.Studio</p>
<h2>S.A.P.Studio</h2>
</div>
<div class="works-body">
<dl>
<dt>WORK </dt>
<dd>coding</dd>
<dt>PERIOD </dt>
<dd>2weeks</dd>
</dl>
</div>
</div>
<!--/実績5-->
</li>
<li class="side-scroll-item">
<!--実績6-->
<div class="works-container-inner-item">
<div class="works-img">
<img src="http://sap-sutdio.upper.jp/test-images/sap-studio.webp">
</div>
<div class="works-header">
<p>S.A.P.Studio</p>
<h2>S.A.P.Studio</h2>
</div>
<div class="works-body">
<dl>
<dt>WORK </dt>
<dd>coding</dd>
<dt>PERIOD </dt>
<dd>2weeks</dd>
</dl>
</div>
</div>
<!--/実績6-->
</li>
<li class="side-scroll-item">
<!--実績7-->
<div class="works-container-inner-item">
<div class="works-img">
<img src="http://sap-sutdio.upper.jp/test-images/sap-studio.webp">
</div>
<div class="works-header">
<p>S.A.P.Studio</p>
<h2>S.A.P.Studio</h2>
</div>
<div class="works-body">
<dl>
<dt>WORK </dt>
<dd>coding</dd>
<dt>PERIOD </dt>
<dd>2weeks</dd>
</dl>
</div>
</div>
<!--/実績7-->
</li>
</ul>
</div>
</div>
</section>
<!--/制作実績-->
<div class="space">
縦スクロール
</div>横スクロールする中身を増やしたり、減らしたりする場合は、
<li class="side-scroll-item">
</li>ここを編集すれば、可能です。
■ CSS
.space{
width:100%;
height:800px;
text-align:center;
}
.works {
width: 100%;
background-color: #363636;
overflow: hidden;
}
.works-title {
width: 100%;
padding: 10px 0;
}
.works-title h1 {
text-align: center;
position: relative;
width: 140px;
margin: 0 auto;
z-index: 1;
padding: 12px 0;
}
.works-title h1 img {
position: absolute;
left: 0;
top: 16px;
z-index: -1;
}
.works-container {
width: 100%;
}
.works-container-inner {
width: 100%;
position: relative;
}
.works-container-inner .side-scroll {
width: 100%;
}
.works-container-inner .side-scroll-list-wrapper {
position: relative;
width: 100%;
height: 700px;
}
.works-container-inner .side-scroll-list {
position: absolute;
top: 10px;
left: 0;
display: flex;
gap: 0px 80px;
}
.works-container-inner .side-scroll-item {
display: flex;
align-items: flex-start;
justify-content: center;
width: 400px;
height: 420px;
}
.works-container-inner .side-scroll-item + .side-scroll-item {
margin: 0 0;
}
.works-container-inner .works-container-inner-item {
width: 100%;
margin: 0 auto;
padding: 0 0 10px 0;
}
.works-container-inner .works-container-inner-item .works-img {
width: 100%;
}
.works-container-inner .works-container-inner-item .works-img img {
width: 100%;
}
.works-container-inner .works-container-inner-item .works-header {
width: 100%;
margin: 0 auto;
padding: 12px 0px;
}
.works-container-inner .works-container-inner-item .works-header p {
color: #ffffff;
font-size: 1.6rem;
letter-spacing: 0.03em;
padding: 0 0 2px 0;
}
.works-container-inner .works-container-inner-item .works-header h2 {
color: #ffffff;
font-family: "Sawarabi Gothic", sans-serif;
font-size: 1.6rem;
letter-spacing: 0.03em;
text-align: center;
}
.works-container-inner .works-container-inner-item .works-body {
width: 100%;
padding: 0 4px;
font-size: 1.6rem;
}
.works-container-inner .works-container-inner-item .works-body dl {
color: #ffffff;
display: flex;
flex-wrap: wrap;
}
.works-container-inner .works-container-inner-item .works-body dl dt {
width: 30%;
padding: 10px 0;
}
.works-container-inner .works-container-inner-item .works-body dl dt::after {
content: ":";
}
.works-container-inner .works-container-inner-item .works-body dl dd {
width: 70%;
padding: 10px 0;
line-height: 1.26;
}
/* /制作実績 */■ JavaScript
// 実績 横スクロール
const listWrapperEl = document.querySelector('.side-scroll-list-wrapper');
const listEl = document.querySelector('.side-scroll-list');
gsap.to(listEl, {
x: () => -(listEl.clientWidth - listWrapperEl.clientWidth),
ease: 'none',
scrollTrigger: {
trigger: '.side-scroll', //.side-scrollで止める(発火)
start: 'top top', // 要素の上端（top）が、ビューポートの上端（top）にきた時
end: () => `+=${listEl.clientWidth - listWrapperEl.clientWidth}`,
scrub: true,
pin: true,
anticipatePin: 1,
invalidateOnRefresh: true,
},
});GSAPのアニメーションを制御します。
ポイントは、
trigger: '.side-scroll', //.side-scrollで止める(発火)です。
どの位置に来たら、横スクロールにうするのかを、指定します。
【 まとめ 】
横スクロールを実装しました。
ユーザーは縦にスクロールする動きを続けると、画面が横スクロールするので、スクロールが楽しくなり、面白い機能だと思います。
しかし、最後までスクロールしないと、それ以下のコンテンツに移動できないので、
リストは増やしすぎないほうが良いでしょう。
この記事が気に入ったらサポートをしてみませんか？