質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.04%

CSSのanimationについて、です。思うような動作ができません。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 960

score 11

一定の時間に文字がすっと現れて消える動作にしたいのですが、
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とはそういうものなのでしょうか?

プロの方からご指摘を頂けると幸いです。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

 2行目以降が変わらない

各要素がfadeInした状態で残っていますので、
消えたように見えているのは、単に<p>タグに背景色が指定されているので、上に重なっているから消えているように見えているだけです。
ですので、. otsu の様に改行があると高さが3行分になります。その後に表示される要素が1行分の高さしか無いと下2行分は上に重なるものがないので見えてしまいます。
手っ取り早いのは各要素に同じ高さを指定してあげるか、次の要素がfadeInするタイミングで表示されている要素をdisplay:none;にしてしまう方法だと思います。

 写真が全部映らない

写真の入ってるpタグのスタイルがテキストと同じで、下記のようになっています。
#cover p {
display: none; 
  position: absolute; 
  top: 50%; 
  width: 100%; 
  margin-top: -5em; 
  text-align: center; 
  background: #fafafa;
}
おそらくブラウザの真ん中に表示させたかったのだと思いますが、
写真の上部が画面全体の半分(top: 50%;)の位置から-5emした位置になっているので、
ブラウザの高さが足りない時は
囲っている#coverposition; fixedheight:100%が指定されているので縦スクロールが表示されませんので、そのまま見切れている状態になっているだと思います。

写真のサイズが固定なのでしたら、
写真の入っているpタグ用のCSSを作成してmargin-topのネガティブマージン量を調整するのがよろしいかと思います。
#cover .image {
  margin-top: -(画像サイズ / 2)px
}
※ p. enjoyの「では、ごゆっくり!」の文字が写真の上に出る事になるので、そこは必要であれば別途CSSで位置の調整をしてください

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る