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

ロゴ スクロール 小さく

From: アキヤマ ユウスケ (@ay8_jp)

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>

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

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

8行目の 『$('#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のスクロールイベントは色んな使い方が出来て便利ですよ。

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

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

僕が会社を辞めて起業するためにやったこと

ホントはやりたくない仕事を我慢してイヤイヤ続けていませんか?

どうせなら楽しいことを仕事にして生きていきたいと思いませんか?

会社に縛られず、自分の好きなライフスタイルに憧れるなら起業して自由になるしかありません。

「起業」って言っても難しいことじゃなくて、自宅で一人仕事をするのだって立派な起業。

好きな時間に起きて、好きな時間仕事して、好きな時間に寝る。

そんな自由を手に入れるために、やるべきことがあります。

メルマガでは「僕が9年務めた会社を辞めて、起業するためにやったこと」をお伝えしています。

ブログには書けない濃い内容になってるんで、今の現状に満足してない方はぜひご購読ください。

↓下のボタンを押せばメールが開くんで、そのまま送信してください。

今すぐ無料で読んでみる

SNSでも最新情報を受け取れます

初心者でも稼げる副業|おすすめネ...

やる気が出ない人必見|勉強のやる...