スクロールで横に画面が推移するアニメーションはGSAPのプラグインが一番簡単です！
目次（もくじ）
横スクロール
スクロールすると画面が横に推移していくアニメーションです。
縦スクロールから横スクロール、横スクロールが終わったら、縦スクロールに切り替わる動作が出来ます。
コンテンツが少ないサイトなどにはメリハリが出来ておすすめです。
See the Pen Untitled by Satomi (@satomi79000033) on CodePen.
実際に使ってみる
GSAP Installationからダウンロードも出来ますが、ＣＤＮがおすすめです。
2つのファイルを読み込みます。<header><~heaader>内、WordPressの方はheader.phpにコピペ
ＣＤＮ(バージョン3.10.4）2022年7月時点
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>最新バージョンは公式サイトへ
HTML
横スクロール部分4.5.6は横並びにするため、<div>で囲います。
<div class="item item01"><span>1</span></div>
<div class="item item02"><span>2</span></div>
<div class="item item03"><span>3</span></div>
<div class="area js-area">
<div class="wrap js-wrap">
<div class="item item04 js-item"><span>4</span></div>
<div class="item item05 js-item"><span>5</span></div>
<div class="item item06 js-item"><span>6</span></div>
</div>
</div>
<div class="item item01"><span>7</span></div>
<div class="item item02"><span>8</span></div>
<div class="item item03"><span>9</span></div>CSS
横スクロール部分(wrap)はdisplay:flexで横並び。
.area{
overflow: hidden;
}
.wrap{
display: flex;
}
.item{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
font-weight: bold;
color: #fff;
}
.item01{ background: #e94d15; }
.item02{ background: #f18d1d; }
.item03{ background: #f8b633; }
.item04{ background: #8cc561; }
.item05{ background: #56aa59; }
.item06{ background: #3d6b35; }Javascript
end: "+=1000", の部分の変更でスクーロ－ルする量が調整されます。
もう少しスクロールをゆっくりしたい場合はend: "+=3000",などで調整すると少しずつ動きます。
HTML CSS JSResult Skip Results Iframe
EDIT ON
window.addEventListener("load", function(){
//プラグインを定義
gsap.registerPlugin(ScrollTrigger);
const area = document.querySelector(".js-area");
const wrap = document.querySelector(".js-wrap");
const items = document.querySelectorAll(".js-item");
const num = items.length;
gsap.set(wrap, { width: num * 100 + "%" });//横幅を指定
gsap.set(items, { width: 100 / num + "%" });//横幅を指定
gsap.to(items, {
xPercent: -100 * ( num - 1 ), //x方向に移動させる
ease: "none",
scrollTrigger: {
trigger: area, //トリガー
start: "top top", //開始位置
end: "+=1000", //終了位置 スクロール量の幅調整
pin: true, //ピン留め
scrub: true, //スクロール量に応じて動かす
}
});
});横スライドにタイトルを入れる場合
横スライドにタイトル入り、タイトルのみ横移動させたくない場合は<div class="wrap js-wrap"></div>の下にタイトルを入れます。高さは好みに合わせて調整してください。
See the Pen Untitled by Satomi (@satomi79000033) on CodePen.
引用元
ページを横にスクロールさせる（HTML、JavaScript） | アニメーション | コーディング | IMG-flow Blog（アイエムジーフローブログ） | 有限会社アイエムジーフロー
GSAPでこんなこともできる！途中から横にスクロールするページを作る方法 | 株式会社LIG(リグ)｜コンサルティング・システム開発・Web制作 (liginc.co.jp)
