最新のスマートフォンでも解像度・縦横比率が少しずつ変化しているように、デスクトップの解像度も少しずつ上がっていくかもしれません。
Webページのヒーローエリアは、ユーザーが最初に見る情報なので、離脱されないためにもこのサイズを適切に理解してデザインしたいところです。
この記事では、そんなヒーローエリアをJavaScriptを使って、ヒーローエリアをファーストビューにピッタリ収まるよう可変させます。
.addEventListener
JavaScriptの .addEventListener は、指定した要素のイベント毎に呼び出される関数を設定するメソッドです。
document.getElementById('element').addEventListener('click', () => {
// ここに処理内容
});
めちゃめちゃ便利なメソッドです。
この記事では「ページのロード時」「ウィンドウのサイズが変わった時（リサイズ）」でイベントが発火するように記述しています。
サイズを可変するサンプル
早速サンプルです。
擬似的にヒーローエリアを作っていますが、要素の height が可変して縦のウィンドウサイズと同じサイズになります。
サンプルの背景には動画を置いて、その上にロゴを配置しています。
サンプルのように、ページの中段付近でリサイズしてもあまり意味がありませんが、ページのヒーローエリアに全幅で置くと、リサイズで高さが合うのでいい感じにハマります。
実装の手順と方法
コードの解説の前に、実装の手順と方法について解説します。
まずはじめに、HTMLで設置したい表示したい場所へコードを記述します。
<div id="FVimg">
<video src="https://dubdesign.net/wp-content/uploads/2020/05/production-ID_4065924-online-video-cutter.com_.mp4" autoplay muted loop></video>
<img src="https://dubdesign.net/wp-content/uploads/2022/06/samplelogo.svg" alt="サンプルのロゴ" class="FVUnder">
</div>次に、JavaScriptでSwiperのオプションを記述します。
コードは <body>〜</body>で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
window.addEventListener("load", () => {
const fv = document.getElementById("FVimg");
const wh = window.innerHeight;
fv.style.height = wh + "px";
console.log(fv)
}, false);
window.addEventListener("resize", () => {
const fv = document.getElementById("FVimg");
const wh = window.innerHeight;
fv.style.height = wh + "px";
}, false);最後にCSSを記述して、見た目を整えます。
#FVimg {
position: relative;
}
#FVimg video {
width: 100%;
object-fit: cover;
height: 100%;
}
#FVimg:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
z-index: 1;
}
img.FVUnder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 300px;
z-index: 1;
}
ざっくりとしたコードの解説
コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。
HTML
HTMLは「FVimg」のid名を持つ div タグを親にして、mp4の動画と画像ファイルを中に入れます。
動画の video タグには「autoplay muted loop」の属性を記述して、自動再生をさせます。
<div id="FVimg">
<video src="https://dubdesign.net/wp-content/uploads/2020/05/production-ID_4065924-online-video-cutter.com_.mp4" autoplay muted loop></video>
<img src="https://dubdesign.net/wp-content/uploads/2022/06/samplelogo.svg" alt="サンプルのロゴ" class="FVUnder">
</div>JavaScript
JavaScriptは、.addEventListener の「ロードした時」「ウィンドウサイズが変わった時（リサイズ）」2つのイベントで発火して、id名「FVimg」の div タグの要素の高さがその時のウィンドウサイズと同じになります。
window.addEventListener("load", () => {
const fv = document.getElementById("FVimg");
const wh = window.innerHeight;
fv.style.height = wh + "px";
console.log(fv)
}, false);
window.addEventListener("resize", () => {
const fv = document.getElementById("FVimg");
const wh = window.innerHeight;
fv.style.height = wh + "px";
}, false);ウィンドウの高さは、window.innerHeight プロパティで取得して、div タグを style.height で高さを可変させます。
CSS
CSSは、可変サイズに対応するよう video タグには object-fit: cover; で高さが合うようにします。
#FVimg {
position: relative;
}
#FVimg video {
width: 100%;
object-fit: cover;
height: 100%;
}
#FVimg:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
z-index: 1;
}
img.FVUnder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 300px;
z-index: 1;
}
設置した動画の白味が強いので、before の擬似要素で少しフィルターをかけています。
さいごに
ヒーローエリアは、ユーザーが真っ先に視認するエリアで、視覚と直感で商品やサービスのイメージをそこで感じとります。
ので、一部ウィンドウに収まらない時にはイメージや情報が異なるので、この記事を参考にして可変にするなど対応してみてください。
