見出し画像

【 WEBデザイン 】 縦スクロールで、横に動く　 FirE♯498

S.A.P.Studio

縦スクロールをしていき、一定の位置にくると、横スクロールになる動きを実装します。

ユーザーは縦にスクロールする動きを続けると、画面が横スクロールするので、スクロールが楽しくなり、面白い機能だと思います。

今回は、「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で止める(発火)

です。

どの位置に来たら、横スクロールにうするのかを、指定します。



【 まとめ 】

横スクロールを実装しました。

ユーザーは縦にスクロールする動きを続けると、画面が横スクロールするので、スクロールが楽しくなり、面白い機能だと思います。

しかし、最後までスクロールしないと、それ以下のコンテンツに移動できないので、
リストは増やしすぎないほうが良いでしょう。



いいなと思ったら応援しよう！