横スクロール型のサイトでセクションごとにページ数をカウントしたい

実現したいこと

ここに実現したいことを箇条書きで書いてください。
横スクロール型のサイトでセクションごとにページ数をカウントしたい
参考サイト：https://www.zoom-japan.com

前提

現在GSAPを使用して横スクロール型のサイトを作成しています。
各セクションが画面内に入ったタイミングで「1/9」「2/9」のように現在のページ数を表示させたいです。

動きとしては参考サイトとまったく同じです。

発生している問題・エラーメッセージ

このページ数を表示させるようなjsライブラリなどを探しているのですが見つかりません。

試したこと

「ページャー js」や「ページネーション js」などで調べたのですが、wordpressの記事一覧ページに使うようなものしか出てきませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

コードがないので具体的には何とも言えませんが、ページ切り替え用の要素などを用意しておいて、その要素のビューポート上の位置をもとに表示を切り替えるといいのではないかと思いました。

適当に書いてみました。

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document</title>
8  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.0/destyle.min.css">
9  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js"
10    integrity="sha512-7Au1ULjlT8PP1Ygs6mDZh9NuQD0A5prSrAUiPHMXpU6g3UMd8qesVnhug5X4RoDr35x5upNpx0A6Sisz1LSTXA=="
11    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
12  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/ScrollTrigger.min.js"
13    integrity="sha512-LQQDtPAueBcmGXKdOBcMkrhrtqM7xR2bVrnMtYZ8ImAZhFlIb5xrMqQ6uZviyeSB+4mYj89ta8niiCIQM1Gj0w=="
14    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
15  <style>
16    .page {
17      position: fixed;
18      z-index: 1;
19    }
20  </style>
21</head>
22
23<body>
24  <div class="page"></div>
25  <br><br><br><br><br><br><br><br><br><br>
26  <div class="scroll">
27    <img src="http://placehold.jp/150x150.png?text=" alt="" data-page="1">
28    <img src="http://placehold.jp/150x150.png?text=" alt="" data-page="2">
29    <img src="http://placehold.jp/150x150.png?text=" alt="" data-page="3">
30  </div>
31  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
32  <script>
33    const target = document.querySelector('.scroll');
34    const page = document.querySelector('.page')
35
36    gsap.to(target, {
37      x: () => -500,
38      ease: 'none',
39      scrollTrigger: {
40        trigger: target,
41        start: 'top top',
42        end: '+=1000',
43        scrub: true,
44        pin: true,
45      },
46    });
47
48    const callback = (entries, observer) => {
49      entries.forEach((entry) => {
50        if (entry.isIntersecting) page.textContent = `${entry.target.dataset['page']}/3`;
51      });
52    };
53    const options = {
54      root: document,
55      rootMargin: '0px -100% 0px 0px',
56      threshold: 0
57    }
58
59    const observer = new IntersectionObserver(callback, options);
60    target.querySelectorAll('img').forEach(el => observer.observe(el));
61
62  </script>
63</body>
64
65</html>

投稿2023/12/04 07:23

編集2023/12/04 10:29

Lhankor_Mhy

総合スコア37445

saku615

2023/12/06 09:03

ありがとうございます！試してみたのですが既存のjsファイルに追加したところ横スクロールができなくなりました。というかコンテンツが表示されなくなってしまいました…。もう少し色々と試してみます。ありがとうございます。 const target = document.querySelector('#wrapper'); const page = document.querySelector('.pager') gsap.to(target, { x: () => -500, ease: 'none', scrollTrigger: { trigger: target, start: 'top top', end: '+=1000', scrub: true, pin: true, }, }); const callback = (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) page.textContent = `${entry.target.dataset['page']}/3`; }); }; const options = { root: document, rootMargin: '0px -100% 0px 0px', threshold: 0 } const observer = new IntersectionObserver(callback, options); target.querySelectorAll('img').forEach(el => observer.observe(el)); window.addEventListener('load', () => { new scrollHorizontal(); }) class scrollHorizontal { constructor() { this.wrapper = '#wrapper'; this.panel = '.panel'; this.anchor = '.anchor'; this.init(); this.anchorScroll(); } init() { const wrapper = document.querySelector(this.wrapper); if (wrapper) { // gsap.registerPlugin(ScrollTrigger); const panels = gsap.utils.toArray(this.panel); const wrapperWidth = wrapper.offsetWidth; /** * 横スクロール開始 */ gsap.to(panels, { xPercent: -100 * (panels.length - 1), ease: "none", scrollTrigger: { trigger: wrapper, pin: true, scrub: 1, // snap: { // snapTo: 1 / ( panels.length - 1 ), // duration: {min: .4, max: .6}, // ease: "none" // }, end: () => "+=" + wrapperWidth } }) } } anchorScroll() { const wrapper = document.querySelector(this.wrapper); if (wrapper) { // gsap.registerPlugin(ScrollToPlugin, ScrollTrigger); // npm/yarnの際に必要 const anchors = document.querySelectorAll(this.anchor); let index = ''; anchors.forEach((anchor) => { anchor.addEventListener('click', (e) => { e.preventDefault(); index = [].slice.call(anchors).indexOf(anchor); // 何番目のアンカーリンクをクリックしたか取得 const target = document.querySelector(e.currentTarget.querySelector('a').getAttribute('href')); // クリックしたアンカーリンクに紐づくpanelを取得 const scrollbarWidth = window.innerWidth - document.body.clientWidth; // スクロールバーの長さを取得 const wrapperOffset = target.offsetLeft * (wrapper.clientWidth / (wrapper.clientWidth - window.innerWidth)) + scrollbarWidth * index; // 移動位置を取得 gsap.to(window, { scrollTo: { y: wrapperOffset, autoKill: false }, duration: 1 }); }); }); } } }