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

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

ただいまの
回答率

90.50%

  • HTML

    11521questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8168questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS3

    2630questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

【CSS3】-webkit-keyframesの途中で画像が表示されない

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 1,132

NobumitsuHata

score 37

画像を15枚下から上にスライドしていくようなcssアニメーションをおこなっているのですが、7枚目から画像が表示されなくなります。
原因がまったくわかりません。
問題になっているのは、idがphotoの部分です。

<div class="stage">
        <div class="cube">
            <!-- 横回転 -->
            <div id="cube3" class="cube_right">
                <span>
                    <div id="photo_select">
                        <div id="photo2014" class="photo_year" data-year="2014">
                            <img src="<?php echo URL_IMG . '/photo/2014/1.jpg'; ?>">
                            <div class="filter">2014</div>
                        </div>
                        <div id="photo2015" class="photo_year" data-year="2015">
                            <img src="<?php echo URL_IMG . '/photo/2015/1.jpg'; ?>">
                            <div class="filter">2015</div>
                        </div>
                        <div id="photo2016" class="photo_year" data-year="2016">
                            <img src="<?php echo URL_IMG . '/photo/2016/1.jpg'; ?>">
                            <div class="filter">2016</div>
                        </div>
                    </div>
                    <div id="photo">
                        <div id="photo_wrapper_2014" class="photo_wrapper" data-year="2014">
                            <?php
                                $i = 1;
                                while($i <= 15):
                            ?>
                                <img src="<?php echo URL_IMG . '/photo/2014/' . $i . '.jpg'; ?>">
                            <?php
                                    $i = $i + 1;
                                endwhile;
                            ?>
                        </div>
                        <div id="photo_wrapper_2015" class="photo_wrapper" data-year="2015">
                            <?php
                                $i = 1;
                                while($i <= 15):
                            ?>
                                <img src="<?php echo URL_IMG . '/photo/2015/' . $i . '.jpg'; ?>">
                            <?php
                                    $i = $i + 1;
                                endwhile;
                            ?>
                        </div>
                        <div id="photo_wrapper_2016" class="photo_wrapper" data-year="2016">
                            <?php
                                $i = 1;
                                while($i <= 15):
                            ?>
                                <img src="<?php echo URL_IMG . '/photo/2016/' . $i . '.jpg'; ?>">
                            <?php
                                    $i = $i + 1;
                                endwhile;
                            ?>
                        </div>
                    </div>
                </span>
            </div>
        </div>
    </div>
/* タグ */

    /* 共通 */
    .cube > div {
        position: absolute;
    }

    /* フォト */
    .photo_wrapper img {
        margin-bottom: 40px;
        /*width: 800px;*/
        height: auto;
        vertical-align: bottom;
    }

    .cube_right span {
        display: table-cell;
        vertical-align: middle;
    }

    /* cube_back */



/* id */

    /* フォト */
    #photo_select {
        margin: 0 auto;
        width: 800px;
        overflow: hidden;
    }

        #photo2016 {
            position: relative;
            float: left;
            width: 30%;
            height: calc(800px / 10 * 3 / 4 * 3);
        }

        #photo2015 {
            position: relative;
            float: left;
            margin-right: 5%;
            width: 30%;
            height: calc(800px / 10 * 3 / 4 * 3);
        }

        #photo2014 {
            position: relative;
            float: left;
            margin-right: 5%;
            width: 30%;
            height: calc(800px / 10 * 3 / 4 * 3);
        }

            #photo_select img {
                width: 100%;
                height: auto;
                vertical-align: bottom;
            }

    #photo {
        display: none;
        margin: 0 auto;
        width: 800px;
        perspective: 600px;
        -webkit-perspective: 600px;
        height: 700px;
        overflow: hidden;
    }


/* class */

    /* 共通 */
    .stage {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        -webkit-perspective: 1000;
        -ms-perspective: 1000;
        -o-perspective: 1000;
        -moz-perspective: 1000px;
        perspective: 1000;
    }

    .cube {
        position: relative;
        margin:0 auto;
        width: 100%;
        transform-style: preserve-3d;
        transition:all 1s;
    }

    /* 横回転 */
    .cube_front {
        top: 0px;
        left: 0px;
        color: #56FBB7;
        background-color: #000011;
    }

    .cube_back {
        top: 0px;
        left: 0px;
        background-color: #000011;
    }

    .cube_right {
        display: table;
        top: 0px;
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
        background-color: #000011;
    }

    .cube_left {
        top: 0px;
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        background-color: #000011;
    }


    /* フォト */
    .photo_year {
        cursor: pointer;
    }

    .filter {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: calc(800px / 10 * 3 / 4 * 3);
        color: #fff;
        background-color: rgba(66, 73, 83, 0.4);
        font-size: 24px;
        font-weight: bold;
        line-height: calc(800px / 10 * 3 / 4 * 3);
        text-align: center;
    }

    .photo_wrapper {
        display: none;
        -webkit-animation: typetext linear 20s infinite;
    }

    @-webkit-keyframes typetext {
        0% {transform: rotateX(45deg) translate3d(0,1000px,2600px);}
        100% {transform: rotateX(45deg) translate3d(0,-4800px,2600px);}
    }
function setCube(){
        // 横回転
        $('.cube').css({'transform':'translateZ(-' + wW/2 +'px)'});
        $('.cube').css({'height': wH + 'px'});
        $('#profile_wrapper').css({'height': wH + 'px'});
        $('#form_wrapper').css({'height': wH + 'px'});
        $('.cube').children("div").css({'width' : wW + 'px', 'height': wH + 'px'});
        $('.cube_left').css({'left' : '-' + wW/2 + 'px'});
        $('.cube_right').css({'right' :'-' + wW/2 + 'px'});
        $('.cube_front').css({'transform':'translateZ(' + wW/2 + 'px)'});
        $('.cube_back').css({'transform':'translateZ(-' + wW/2 + 'px) rotateY(180deg)'});
    }

    function clickNav() {
        $(".rotate").click(function(event) {
            var destination = $(this).text();
            if ('photo' === destination) {
                $("#now").text("photo");
                $("#nav_right").text("contact");
                $("#nav_left").text("profile");
            } else if ("profile" === destination) {
                $("#now").text("profile");
                $("#nav_right").text("photo");
                $("#nav_left").text("message");
            } else if ('message' === destination) {
                $("#now").text("message");
                $("#nav_right").text("profile");
                $("#nav_left").text("contact");
            } else if ("contact" === destination) {
                $("#now").text("contact");
                $("#nav_right").text("message");
                $("#nav_left").text("photo");
            }
            // 横回転
            event.preventDefault();
            var moveDeg = $(this).data('deg');
            console.log('動く分' + moveDeg);
            var now_deg = deg;
            console.log('動く前' + now_deg);
            deg = deg + moveDeg;
            console.log('動いた結果' + deg);
            $('.cube').css({
                'transition-duration': '1s',
                'transform':'translateZ(-'+wW/1.5+'px) rotateY('+now_deg+'deg)'
            });
            setTimeout(function(){
                $('.cube').css({
                    'transition-duration': '1s',
                    'transform':'translateZ(-'+wW/1.5+'px) rotateY('+deg+'deg)'
                });
                setTimeout(function(){
                    $('.cube').css({
                        'transition-duration': '1s',
                        'transform':'translateZ(-'+wW/2+'px) rotateY('+deg+'deg)'
                    });
                    // $("#cube1").removeClass('cube_front').addClass('cube_left');
                    // $("#cube2").removeClass('cube_back').addClass('cube_right');
                    // $("#cube3").removeClass('cube_right').addClass('cube_front');
                    // $("#cube4").removeClass('cube_left').addClass('cube_back');
                    // $('.cube').css({'transform':'rotateY(0deg)'});
                },1000);
            },500);
            //アニメーション重複を回避
            // $(this).parents('ul').find('a').removeClass('active');
            // $(this).addClass('active');
            // 縦回転
            // event.preventDefault();
            // var deg = $(this).data('deg');
            // $('.cube').css({'transform':'translateZ(-'+wH/2+'px) rotateX('+deg+'deg)'});
        });
    }
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • NatsumiOki

    2016/08/15 16:33

    PHPのコードではなく、実際に出力されたHTMLコードを貼っていただいた方がわかりやすいです。
    HTMLコード自体が崩れていてCSSやJSが効かない場合もありますので、まずは正しく出力されたHTMLに対して処理が走っているかどうかの確認が必要です。

    キャンセル

まだ回答がついていません

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

  • HTML

    11521questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8168questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS3

    2630questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。