Q&A
一定の時間に文字がすっと現れて消える動作にしたいのですが、
2行目以降が変わらなかったり、
写真が全部映らない(グラスが全部映らない)、ということが起きています。
以下のURLのようになってしまいます。
http://practices.biz/css/example1/index.html
タグについてはHTML・CSS次のようになっています。
HTMLとJquery（<body>以下）
<body> <div id="cover"> <p class="welcome">ようこそ</p> <p class="otsu">今日も1日お勤めご苦労様でした。<br> 今日はどのような1日でしたか？<br> ゆっくりお体を休めてくださいませ。</p> <p class="gohoubi">そんなあなたに3つのご褒美があります。</p> <p class="1">ビールと・・・</p> <p class="2">枝豆と・・・</p> <p class="3">焼き鳥です！</p> <p class="beer">まずはビールから。<br> さぁ、グビグビ1杯やりましょ！</p> <p class="image"><img src="beer.jpg"></p> <p class="enjoy">では、ごゆっくり！</p> </div><!-- /cover --> <div id="main"> <header> <h1>こんにちは。</h1> </header> <div id="container"> <article> <p>この文章はテスト文章です。テストのために書いています。<br> テストですので、テスト止まりです。<br> それ以上の意味はありません。</p> </article> <aside> </aside> </div><!-- /container --> </div><!-- /main --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(function() { $(window).on({ load: function() { $('#cover .welcome').delay(1000).fadeIn(600); $('#cover .otsu').delay(3000).fadeIn(600); $('#cover .gohoubi').delay(6000).fadeIn(600); $('#cover .1').delay(9000).fadeIn(600); $('#cover .2').delay(12000).fadeIn(600); $('#cover .3').delay(15000).fadeIn(600); $('#cover .beer').delay(18000).fadeIn(600); $('#cover .image').delay(21000).fadeIn(600); $('#cover .enjoy').delay(24000).fadeIn(600); $('#cover').delay(27000).fadeOut(600); } }); }); </script> </body> </html>CSS全体
@charset "utf-8";
/* CSS Document */
/* 全体の設定 */
body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: normal;
}
/* 共通の設定 */
ul li {
list-style: none;
}
/* トップページが表示されるまで */
#cover {
z-index: 100;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fafafa;
}
#cover p {
display: none;
position: absolute;
top: 50%;
width: 100%;
margin-top: -5em;
text-align: center;
background: #fafafa;
}
/* トップページの表示後 */
#main {
max-width: 980px;
margin: 0 auto;
padding: 10px;
line-height: 1.8;
}
header {
width: 980px;
}
header h1 {
width: 980px;
margin-left: 24px;
font-size: 32px;
font-weight: bold;
}
長文になりましたが、どこかおかしなところはありませんか？
それとも、CSSのanimationとはそういうものなのでしょうか？
プロの方からご指摘を頂けると幸いです。
回答1件
0
ベストアンサー
2行目以降が変わらない
各要素がfadeInした状態で残っていますので、
消えたように見えているのは、単に<p>タグに背景色が指定されているので、上に重なっているから消えているように見えているだけです。
ですので、. otsu の様に改行があると高さが3行分になります。その後に表示される要素が1行分の高さしか無いと下2行分は上に重なるものがないので見えてしまいます。
手っ取り早いのは各要素に同じ高さを指定してあげるか、次の要素がfadeInするタイミングで表示されている要素をdisplay:none;にしてしまう方法だと思います。
写真が全部映らない
写真の入ってるpタグのスタイルがテキストと同じで、下記のようになっています。
css
1#cover p { 2display: none; 3 position: absolute; 4 top: 50%; 5 width: 100%; 6 margin-top: -5em; 7 text-align: center; 8 background: #fafafa; 9}
おそらくブラウザの真ん中に表示させたかったのだと思いますが、
写真の上部が画面全体の半分(top: 50%;)の位置から-5emした位置になっているので、
ブラウザの高さが足りない時は
囲っている#coverにposition; fixedとheight:100%が指定されているので縦スクロールが表示されませんので、そのまま見切れている状態になっているだと思います。
写真のサイズが固定なのでしたら、
写真の入っているpタグ用のCSSを作成してmargin-topのネガティブマージン量を調整するのがよろしいかと思います。
#cover .image { margin-top: -(画像サイズ / 2)px }
※ p. enjoyの「では、ごゆっくり！」の文字が写真の上に出る事になるので、そこは必要であれば別途CSSで位置の調整をしてください
投稿2015/09/03 08:40
総合スコア596
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。