Web筋トレも使っているサーバー!ロリポップを使ってみない?

【コピペOK】どんなウィンドウサイズにも最下部にメニューがフィット!◇コーディングテク【デモあり】

Sponser Link

今日はLPを想定して、レスポンシブ対応で、

『画面いっぱいのKV(キービジュアル)とウィンドウ下部のメニュー』

のコーディングをやっていきたいと思います。

今日やりたいこと。

①大きいKV(キービジュアル)+メニュー(グロナビ)のデザイン

②初期値はメニュー(グロナビ)は画面の最下部。どんなウィンドウサイズでも。

③KVは順番に出てくる。左上→右側→左下→中央

④KVはスマホ、タブレット、PCでどれでもバランス良く見えるように場所を調整。

⑤メニュー(グロナビ)はスクロールしてウィンドウ上部にきたら、上部に固定される。

⑥スマホでは右上にハンバーガーボタン

⑦上から下りてくるドロワーメニュー

⑧スマホは『購入するボタン』を下部に常に表示。『pagetopへボタン』は常に表示。

⑨PCでは『購入するボタン』『pagetopへボタン』は少しスクロールしたら表示。

⑩スムーススクロール(アニメーション)で戻る。

 

See the Pen
LP大きいKVとスティッキーメニュー
by studio-0 (@studio-0)
on CodePen.

Sponser Link

目次

①大きいKV(キービジュアル)+メニュー(グロナビ)のデザイン

スマホサイズ

タブレットサイズ

PCサイズ

このデザインでコーディングしていきます。

Sponser Link

②初期値はメニュー(グロナビ)は画面の最下部。背景固定。

画面の最下部に固定するjs

style=”height:724px;”と自動でウィンドウの高さを書き出してくれます。

.visual_wrapperは

画面の最下部に固定するcss

.visual_wrapperはposition: relative;

.visual_wrapperは上のjsで高さが出てるので、

その値を基準として#navの場所が決まる。

bottom:0;

下部に固定。

jsなくても大丈夫かも

height:100vh;でも大丈夫な気がしてます。

背景固定方法

HTML

containerの上にbg–fixを書く。

CSS

画面いっぱいに背景画像を固定、onクラスで透過0、0.3秒のアニメーション。

JavaScript

ページ読み込み開始と同時に.bg–fixクラスにonクラスを追加

KVより先に背景が表示される。

Sponser Link

③KVは順番に出てくる。左上→右側→左下→中央

左上からの画像

0.7秒かけて変化します。

右側からの画像

0.3秒遅く始めます。

右下からの画像

0.6秒遅く始めます。

中央からの画像

0.9秒遅く始めて0.3秒かけて変化します。

フェイドインする仕掛け

onクラスが付いています。

これがあることによってアニメーションが起こります。

onクラスを付けるjs

Sponser Link

④KVはスマホ、タブレット、PCでどれでもバランス良く見えるように場所を調整。

PC

1281px以上でPC表示

height: 31.6%;

高さを指定しています。

背景画像:jpg・3840×2160・301KB

左上画像:png・728×526・411KB

右側画像:png・1338×1488・642KB

左下画像:png・1356×1334・731KB

共通中央画像:png・768×1078・86KB

タブレット

768px以上、1280px以下でタブレット表示

max-height: 606px;

height: 88.72%;

高さを指定しています。

背景画像:jpg・2048×2732・227KB

左上画像:png・930×1212・783KB

右側画像:png・556 × 1297・284KB

左下画像:png・1004 × 1560・720KB

共通中央画像:png・768×1078・86KB

スマホ

767px以下でスマホ表示

width: 31.8%;

横幅を指定しています。

背景画像:jpg・750 × 1334・48KB

左上画像:png・238 × 316・701KB

右側画像:png・290 × 1091・171KB

左下画像:png・267 × 502・251KB

共通中央画像:png・768×1078・86KB

Sponser Link

⑤メニュー(グロナビ)はスクロールしてウィンドウ上部にきたら、上部に固定される。

JavaScript

fixedクラスを追加してます。

CSS

z-index: 99;で一番上になるようにしています。

Sponser Link

⑥スマホでは右上にハンバーガーボタン

spクラスでスマホの時のみ表示するように設定

 

Sponser Link

⑦上から下りてくるドロワーメニュー

HTML

 

JavaScript

 

⑧スマホは『購入するボタン』を下部に常に表示。『pagetopへボタン』

は⑨のPCと同じ。

HTML

<div class=”btn–fix sp”>でスマホだけに表示させている。

CSS

 

⑨PCでは『購入するボタン』『pagetopへボタン』は少しスクロールしたら表示。

300px以上スクロールしたら表示されます。

HTML

<li class=”pc”>でPCでのみ表示させている。

JavaScript

⑩スムーススクロール(アニメーション)で戻る。

これは定番のjsです。とっても便利です。

(11)文字サイズの設定

基準フォントサイズを10pxに設定しています。

PC

「rem」 は常にhtml 要素のフォントサイズを基準にするので、

20pxになります。

タブレット

「rem」 は常にhtml 要素のフォントサイズを基準にするので、

16pxになります。

スマホ

「rem」 は常にhtml 要素のフォントサイズを基準にするので、

15pxになります。

(14)重なり順:z-indexの設定

#nav(PCのグローバルナビ)

.visual_wrapper h1(中央画像)

#footer .btn–fix(スマホの『購入する』ボタン)

.page__ul(ページトップへ)

.menu__box(スマホのグローバルナビ)

.menu__box .menu__inner .close(スマホのクローズボタン)

.menu

完成!

キレイなファーストビューが出来上がりました!

See the Pen
LP大きいKVとスティッキーメニュー
by studio-0 (@studio-0)
on CodePen.

Sponser Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA