お世話になります。
現在、レスポンシブサイトにてトップページのファーストビューに、特定の要素を
画面いっぱいに表示させる事にトライしております。
参考サイトの該当部分のコードの解読を試みておりますが、
一部解読ができません。
コードの方添付させていただきます。
テスト:https://jsfiddle.net/8z8drhab/2/
【HTML】
<div class="block block-main"> <div class="cover"> <div class="pic" style="background-image: url(http://test-12.capoo.jp/1-12.jpg);"> </div></div> <div class="message-svg"> テキストテキストテキストテキスト </div> </div></div>
【CSS】
.block { position: relative; } .cover { position: relative; width: 100%; height: 520px; overflow: hidden; } .cover .pic { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 2; }
【Javascript】
$(window).on('load resize', function(){ var w = _ctrl.clientW; ・・・・①_ctrl.clientWの部分が何なのかが不明。。 var h = _ctrl.innerHeight; ・・・・②内部高さを取得(?)。_ctrlは何なのか不明。 var max = (w>h)? 135: 100; ・・・・③不明。 var bottomH = Math.max(max, h*0.15); ・・・・④max要素とhかける0.15で大きい方の値を返す(?) var picH = h-bottomH; ・・・・⑤h引くbottomHの値を返す $(".cover").css("height", picH); ・・・・⑥element.styleにpicHの高さを取得する $(".message-svg").css("height", bottomH); ・・・・⑦element.styleにbottomHの高さを取得する }); ※参考サイトの関係があると思われる該当部分のコードです。 注釈の解説は当方の解釈で入れておりますので、間違っているかもしれません。。
※参考サイト:https://gyazo.com/68c0797ea31e01f78dd4ded0eb540ab0
(企業サイトでしたため、リンクを貼っていいのかわからず、
すみませんがキャプチャーのみ添付させていただきます。)
上記のキャプチャー内のAの部分とBの部分が
参考のサイトのように、ファーストビューでどのデバイスでもBまでの部分が表示されるように実装したいのですが、上記のjsのコードを入れるとエラーが出てしまいます。
もし何かお分かりの方がいらっしゃいましたら、ぜひご教授ください。
どうぞよろしくお願い申し上げます。