概要
スクロール途中で横スクロールになるギミックの実装方法を紹介。用途・要件
- スクロール途中で横スクロールになる仕様の実装。
- JavaScriptアニメーションライブラリGSAP(https://greensock.com/gsap/)内の「ScrollTrigger」を使用する。
検証ブラウザ
- Google Chrome(最新)
- Microsoft Edge(最新)
- Firefox(最新)
- Safari(最新)
実装
HTML
<div class="c-wrap-1">
<section class="c-section-1">
<h2>途中から横スクロール<br><br>↓</h2>
</section>
<!-- [/c-section-1] -->
<div class="c-slider-1 js-slider-wrap">
<section class="c-slider-1__slide js-slider-item">
<h2>1/4枚目</h2>
</section>
<section class="c-slider-1__slide js-slider-item">
<h2>2/4枚目</h2>
</section>
<section class="c-slider-1__slide js-slider-item">
<h2>3/4枚目</h2>
</section>
<section class="c-slider-1__slide js-slider-item">
<h2>4/4枚目</h2>
</section>
</div>
<!-- [/c-slider-1] -->
<section class="c-section-1">
<h2>横スクロール終了</h2>
</section>
<!-- [/c-section-1] -->
</div>
<!-- [/c-wrap-1] -->
SCSS
/* ---------------------------------------------
* c-wrap-1
--------------------------------------------- */
.c-wrap-1 {
width: 100%;
overflow: hidden;
}
/* ---------------------------------------------
* c-section-1
--------------------------------------------- */
.c-section-1 {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #222;
}
/* ---------------------------------------------
* c-slider-1
--------------------------------------------- */
.c-slider-1 {
width: fit-content;
height: 100vh;
display: flex;
flex-wrap: nowrap;
&__slide {
width: 100vw;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
&:nth-of-type(1) {
background-color: #ff0000;
}
&:nth-of-type(2) {
background-color: #000080;
}
&:nth-of-type(3) {
background-color: #008000;
}
&:nth-of-type(4) {
background-color: #4b0082;
}
}
}CSS
/* ---------------------------------------------
* c-wrap-1
--------------------------------------------- */
.c-wrap-1 {
width: 100%;
overflow: hidden;
}
/* ---------------------------------------------
* c-section-1
--------------------------------------------- */
.c-section-1 {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #222;
}
/* ---------------------------------------------
* c-slider-1
--------------------------------------------- */
.c-slider-1 {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
height: 100vh;
display: flex;
flex-wrap: nowrap;
}
.c-slider-1__slide {
width: 100vw;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.c-slider-1__slide:nth-of-type(1) {
background-color: #ff0000;
}
.c-slider-1__slide:nth-of-type(2) {
background-color: #000080;
}
.c-slider-1__slide:nth-of-type(3) {
background-color: #008000;
}
.c-slider-1__slide:nth-of-type(4) {
background-color: #4b0082;
}JS
const scrollItem = document.querySelectorAll('.js-slider-item'),
scrollContainer = document.querySelector('.js-slider-wrap');
const scrollTween = gsap.to(scrollItem, {
xPercent: -100 * (scrollItem.length - 1),
ease: 'none'
});
const horizontalScroll = ScrollTrigger.create({
animation: scrollTween,
trigger: scrollContainer,
pin: true,
scrub: 1,
end: () => '+=' + scrollContainer.offsetWidth
});
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
