【jQuery】スクロールすると画像が「拡大・縮小」する処理。3カラムで試します。

jQuery

こんにちは、ダイキです。
今回は jQuery を使用して、画面がスクロールされると、画像が「拡大・縮小」する処理を書いていきます。
display: flex; で、3カラム仕様でやってみます。といっても、参考サイトがあり、それを部分的に抜き出したに過ぎないんです。
ですが、全体を見ても読み取るのは苦労です。なので、部分的に抜き出しておけば、いつでも使用可能ですね。
ついでに誰かの役に立てればいいかなと思います。
※jQueryのプラグイン「jquery.inview.min.js」を使用していますので、配布元からダウンロードして追加してください。

HTMLです。スクロールすると画像が「拡大・縮小」する処理。3カラムで試します。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <div id="mainvisual">
    <img src="img/feature1.jpg" alt="">
    <img src="img/feature1.jpg" alt="">
    <img src="img/feature1.jpg" alt="">
  </div>

  <div class="box"></div>

  <script src="js/jquery.inview.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

CSSです。スクロールすると画像が「拡大・縮小」する処理。3カラムで試します。


/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
  display: flex;
  justify-content: center;
  /* スクロールで画像を拡大させた際に、横スクロールが出ないよう設定 */
  overflow-x: hidden;
}
/*
スクロールしたタイミングでjQueryにて画像を拡大するが、
その際に画像が縮まないよう「flex-shrink: 0;」を設定する
*/
#mainvisual img {
  width: calc(100%/3);
  height: 100vh;
  flex-shrink: 0;
  object-fit: cover;
}

.box {
  height: 10000px;
}

JavaScriptです。スクロールすると画像が「拡大・縮小」する処理。3カラムで試します。


$(function () {
  /*=================================================
  スクロール時のイベント
  ===================================================*/
  $(window).scroll(function () {
    // スクロール位置を取得
    let scroll = $(window).scrollTop();

    /*=================================================
    メインビジュアルの拡大・縮小
    ===================================================*/
    mv_scale(scroll);

  });

});

/*=================================================
メインビジュアルの拡大・縮小(共通処理)
===================================================*/
function mv_scale(scroll) {
  // window.innerWidthで画面幅を取得
  // PC表示の場合の処理(画面幅が900pxより大きい場合 ※900pxはCSSのブレークポイントとあわせる)
  if (window.innerWidth > 900) {
    // メインビジュアルのCSS(width)を変更する
    // widthの値をスクロール量にあわせて増やすことで画像を拡大させる
    $("#mainvisual img").css({
      width: 100 / 3 + scroll / 10 + "%",
    });
    // スマホ表示の場合の処理(画面幅が900px以下の場合)
  } else {
    // メインビジュアルのCSS(width)を変更する
    // widthの値をスクロール量にあわせて減らすことで画像を縮小させる
    $("#mainvisual img").css({
      width: 100 - scroll / 10 + "%",
    });
  }
}