ファーストビューをフルスクリーンにするためのJquery

WEB制作

名古屋でホームページ制作をしているダブダブダブのwebデザイナーです。 デザインしたりコーディングしたりマーケティング・ コンテンツSEOだったり、wordpressの組み込みをしています。
ファーストビューをフルスクリーンにするためのjQueryをよく使うので簡単にまとめてみました。

jquery

(function($,win) {
  var elem = $('#mainvisual');
  function fullscreen() {
    //開いた画面の高さを取得
    var WindowHeight = win.height(); //WindowHeightは変数のため任意の名前をつける
    if(WindowHeight > 1){ //開いた画面が1px以上なら実行

      //body要素に高さを書き込む
      elem.css('height',WindowHeight+'px');

    } else {
      //// 639以下のときにやること
    }
  }
  ////読み込んだときに高さ合わせ
  fullscreen();
  //// window のサイズ変わったら都度高さ合わせ
  win.on('resize', function(){
    fullscreen();
  });
})(jQuery,$(window));

簡単ですが...

あとはCSSで調整するだけです。

参考になれば幸いです。

この記事を書いた人

稲葉 恭平

稲葉 恭平

愛知県刈谷市・名古屋でホームページ制作をしているダブダブダブのwebデザイナーです。 デザインしたりコーディングしたりマーケティング・ コンテンツSEOだったり、wordpressの組み込みをしています。 記事が参考になったらシェアして頂けると幸いです。