スクロールでサイトロゴのサイズ変更を実装する方法。

Webサイト（ブログ）をスマホで表示させる時、画面が小さいのであらゆる要素をPCに比べて小さく表示させる必要があります。

でもサイトのロゴ（サイト名）って訪問者が一番初めに目にする部分だから、そこでどんなサイトなのかを伝えたりブランドイメージとして印象に残らす必要があります。

訪問してくれた人に覚えて帰ってもらうためにも出来るだけ大きく表示して、常に見えるようにしておくのも1つの手です。

よく使われるのは、スクロールしても画面上部にロゴとメニューが固定されて、常に目に入るようにする方法ですね。

特にスマホサイトではサイドバーが設置できないから、他のページへのアクセスをしやすくするために、画面上部にメニューアイコンを固定させたりします。

この時メニューボタンだけだと寂しいし、せっかくだったらサイトロゴも表示させて常に見えるようにしておきたいところ。

でもスマホの画面は小さいから、あんまり大きく表示してしまうと肝心のコンテンツが読みにくくなってしまって、本末転倒な事になります。

でもロゴは大きく見やすくして覚えて帰って欲しい・・・。

このジレンマを解消する方法をご紹介します。

具体的には、初め（ファーストビュー）はロゴを大きく表示しておいて、スクロールしたら小さくして画面上部に固定する方法です。

需要があるかどうかは知らないけど、やってみたい人は挑戦してみてください。

まずは見てください。

スマホで見てる方は、既にロゴが小さくなって左上に固定されていると思います。

一番上までスクロールしたらサイズが大きくなるんでヤッてみてください。でもちゃんと戻ってきてくださいよ。

PCでご覧の人は下のGIFアニメを見てください。ロゴのサイズが可変してることが分かると思います。

スクロールするとロゴサイズが変わる

この記事を書いてる段階ではスマホのみだけど、多分もうすぐPCも変更すると思います。

実装方法

では早速コードを書いていきましょうか。

まずはjQueryを使ってスクロールを検知してロゴに新しクラスを与えられるようにします。

※ 以下のコードはサイトロゴの要素にid=”logo”が指定してあると想定しています。

jQueryスクロールイベント

<script>
(function($){

$(function(){
   $(window).scroll(function(){
      var scr = $(window).scrollTop();
      if(scr > 1){
         $('#logo').addClass('mini');
      }else{
         $('#logo').removeClass('mini');
      }
   })
})
})(jQuery);

</script>

６行目の 『var scr = $(window).scrollTop();』でウィンドウ上部からのスクロール量を取得します。

次に７行目の 『if(scr > 1)』でスクロール量が１を越えた段階でイベントが発生するようにしています。この『１』を任意の数字に変更すれば、指定した位置でイベントを発生させられます。

８行目の 『$('#logo').addClass('mini');』でid名logoにクラス名miniが追加されます。

後は
else{
$('#logo').removeClass('mini');
で指定した位置より上にスクロールされればクラス名miniを削除して元の表示に戻します。

CSS

さっき書いたjQueryで#logoにminiってクラス名を追加したり消したり出来るようになりました。

後は、CSSでクラス名miniのスタイルを指定すればOKです。

#logo {
    width: 300px;
}
#logo.mini {
    width: 150px !important;
}

こんな感じにしておけば、通常は幅300pxで、スクロールしたら150pxになります。

ちなみに僕は、これにCSSのアニメーションを追加しています。

こんな感じ↓

#logo.mini{
    width: 150px !important;
    -webkit-animation-name: logo_anime;
    -webkit-animation-duration:1s;
    animation-name:logo_anime;
    animation-duration:1s;
}
@-webkit-keyframes logo_anime{
    from{
        width: 300px;
    }
    to {
        width: 150px !important;
    }
}
@keyframes logo_anime{
    from{
        width: 300px;
    }
    to{
        width: 150px !important;
    }
}

サイズとかはご自分のサイトに合わせて調整してみてください。

まとめ

アニメーションとかは完全に自己満足の世界だけど、なんだかオシャレに見えません？（笑）

とにかくこれで、ロゴを常時表示させてても邪魔になりませんね。

ちなにみjQueryのスクロールイベントは色んな使い方が出来て便利ですよ。

例えばある要素までスクロールされたら表示を変えたり、オーバーレイで広告表示してみたり。

自分で触って研究してみてください。楽しみながらプログラムの知識が身に付きますよ。