スクロールしたら指定のサイズまで画像を縮小する方法

2020/12/17

jQueryとCSSを使って、スクロールした時に、指定のサイズまで画像を縮小する方法をご紹介。

以下のようなお悩みを抱えている方の助けになれると思います！

追尾ヘッダーに設置したロゴ画像を下スクロールしたときに、指定のサイズまで縮小させる方法やサンプルコードが知りたい
指定のサイズまで画像をぬるっと縮小させるデモが見たい

それでは作り方、サンプルコードを見ていきましょう。

スクロールしたら指定のサイズまで画像を縮小するサンプルコード

スクロールしたら指定のサイズまで画像を縮小するサンプルコード

デモ

See the Pen スクロールしたら指定のサイズまで画像を縮小する方法 by 石森裕也 (@yuyaphotograph) on CodePen.

HTML

<!-- ヘッダー -->
<header class="Header">
  <a href="#" class="Header-Logo">
    <img src="" alt="ロゴ画像">
  </a>
</header>
<!-- コンテンツ -->
<div class="Content"></div>
<div class="Content02"></div>

CSS

.Header{
  position: fixed;
  top: 0;
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  background: #fff;
  z-index: 100;
}
.Header-Logo{
  margin-left: auto;
  margin-right: auto;
  width: 240px;
  display: block;
  transition: all 0.4s ease;
}
.Header-Logo.isSmall{
  width: 120px!important;
}
img{
  width: 100%;
  height: auto;
  display: block;
}

.Content{
  width: 100%;
  height: 1200px;
  background: #999;
}
.Content02{
  width: 100%;
  height: 1200px;
  background: #eee;
}

「isSmall」クラスがついたときの「Header-Logo」の横幅をスクロールしたときに縮小させたい値に指定してあげましょう。

ぬるっと画像が縮小する動きは、「transition: all 0.4s ease」で実現しています。

jQuery

$(function(){
  $(window).scroll(function(){
    var obj = $('.Header-Logo');
    scroll = $(window).scrollTop();
    if (scroll > 1) {
      obj.addClass('isSmall');
    } else{
      obj.removeClass('isSmall');
    }
  })
});

次はこの記事！