【jQuery】横スクロールを促すモーダルウィンドウの作り方【デモページ有】

  jQuery プログラミング

スマートフォン向けサイトを優先的に制作・公開する現場では横スクロールでレイアウトを組むことも多くなってきました。そこで今回は横スクロールを促すモーダルウィンドウの実装方法を解説します。

基本的には前回のモーダルウィンドウにスクロールイベントを追加しただけです。

詳しくはデモページも用意しましたので参考にしてみてください。

DEMO

また、GitHubにも実際のソースコードをアップしているのでクローンできます。

phpファイル
scssファイル
jsファイル

骨組みは以下の３つです。

  • モーダルウィンドウ
  • 横スクロールを促すアイコンアニメーション
  • スクロールイベントでモーダルを隠す

ではコードを見ていきます。

目次

モーダルウィンドウ

最初に横スクロールエリアの1番上のレイヤーになるようにモーダルウィンドウを表示させます。

HTML

<section>
  <div class="c-modal-scroll">
    <div id="ji-modalScroll" class="c-modal-scroll__container">
       ︙
    </div>
  </div>
</section>

SCSS

.c-modal-scroll {
  padding: 0;
  margin: 0 auto 40px;
  width: 720px;
  overflow: hidden;
  overflow-x: scroll;
  position: relative;

  @media screen and (max-width: 560px) {
    width: 360px;
  }

  /* モーダル部分のCSS */
  &__container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100;
  }
}

横スクロールを促すアイコンアニメーション

横スクロールを促すアイコンをCSSの@keyframesを用いてアニメーションを付けていきます。

また、CSSのcalc()関数でどのデバイスでもモーダルウィンドウ上で同じ配置になるように調整しておきます。

SCSS

.c-modal-scroll {
    ︙
  /* モーダル部分のCSS */
  &__container {
      ︙
    &:after {
      content: "";
      position: absolute;
      top: calc(25% - 98px / 2);
      left: calc(50% - 100px / 2);
      width: 98px;
      height: 100px;
      background: url(https://buff-design.com/sample/img/icon_scroll.png) center no-repeat;
      background-size: contain;
      z-index: 2;
      animation: 2s ease-in-out slide infinite;
    }
  }

  @keyframes slide {
    0% {
      transform: translateX(30px);
      opacity: 0;
    }
    30% {
      transform: translateX(30px);
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
    90% {
      transform: translateX(-20px);
      opacity: 1;
    }
    100% {
      transform: translateX(-20px);
      opacity: 0;
    }
  }
}

スクロールイベントでモーダルを隠す

HTML

要素やウィンドウを横スクロールした時に、スクロールイベントでモーダルウィンドウをfadeOut()関数で非表示にさせます。

<div id="ji-modalScroll" class="c-modal-scroll__container"></div>

jQuery

$(function() {
  // 横スクロールイベント
  $('.c-modal-scroll').on('scroll', function () {
    $('#ji-modalScroll').fadeOut();
  });
});

今回は以上になります。

モーダルウィンドウについてクリックイベントとスクロールイベントの実装方法について解説しました。まずはコピペして使ってみてください。

作成方法が不安な方は是非参考にしていただけると嬉しいです。

一覧へ

Recommended