ページトップにフルスクリーン(幅高さともに100%)のスライドショーがあり、
その下にコンテンツが続きます。
フルスクリーンのスライドショーが表示開始するほんの数秒に
下のコンテンツがページトップに表示されてしまいます。
それを解消するため、
・要素をすべて読み込んでから表示させる
・その間にローディング画面を表示させる
が考えられると思うのですが、もっと簡易な方法はないでしょうか。
HTML
1<div id="top_01"> 2<div class="fullSlideShow"> 3<ul> 4<li><img src="/img/01.jpg" alt=""></li> 5<li><img src="/img/02.jpg" alt=""></li> 6<li><img src="/img/03.jpg" alt=""></li> 7</ul> 8</div> 9</div> 10 11<section class="concept"> 12<h2>CONCEPT</h2> 13<p>texttext</p> 14</section> 15
CSS
1#top_01{ 2 width: 100%; 3 height: 100%; 4 position: relative; 5 overflow: hidden; 6 background: #333; 7} 8.fullSlideShow { 9 width: 100%; 10 text-align: left; 11 position: relative; 12 overflow: hidden; 13} 14.fullSlideShow ul { 15 top: 50%; 16 left: 50%; 17 width: 100%; 18 position: fixed; /* absolute or fixed */ 19 overflow: hidden; 20} 21.fullSlideShow ul li { 22 top: 0; 23 left: 0; 24 width: 100%; 25 display: none; 26 position: absolute; 27} 28.fullSlideShow ul li img { 29 width: 100%; 30} 31 32 33
回答1件
あなたの回答
tips
プレビュー