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

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

ただいまの
回答率

87.36%

Edge、IE11、IE10で途中からアニメーションする時にtransformのrotateがきかない

解決済

回答 1

投稿

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

score 54

■動作内容

ある一定のスクロールをすると、.first_boxに追加で新しいクラスが付アニメーションするようになっています。

特定の数値になると追加したクラスが外れ、次のクラスが新しくつきます。
追加されるクラスが変わるたびにアニメーションも変わるようになっています。

■不具合内容

・下にスクロールしてタイトル1のBoxがタイトル2のBoxになる時にEdge、IE11、IE10の場合表示される位置がガクッと下に下がってから移動が始まる

・下にスクロールしてタイトル2のBoxがタイトル3のBoxになる時にEdge、IE11、IE10の場合アニメーションで移動するが、回転をしない

■やった事

・IEのベンダープレフィックスを追加
・position: fixed;を使っているときにIEでスクロールの挙動がおかしくなるので「nicescroll.js」を設置して対応
・Googleで検索したのですが、解決策になるような記事が見つけられませんでした。

以下にソースを張ります。
宜しくお願い致します。

■HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>パララックステスト</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="js/animation.js"></script>
    <script src="js/jquery.nicescroll.js"></script>
    <script src="js/jquery.easeScroll.js"></script>

<script>
$(function() {
    $("body").niceScroll();
});
</script>

</head>
<body>
    <article class="first_box">
        <section class="first_text">
            <h1>タイトル1</h1>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </section>
        <section class="second_text">
            <h1>タイトル2</h1>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </section>
        <section class="third_text">
            <h1>タイトル3</h1>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </section>
        <section class="forth_text">
            <h1>タイトル4</h1>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </section>
        <section class="fifth_text">
            <h1>タイトル5</h1>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </section>
    </article>
    <div id="first" class="content">
        <p class="logo">Test x <br class="sp_display">テスト x <br class="sp_display">テキスト</p>
    </div>

    <div id="second" class="content">
    </div>

    <div id="third" class="content">
    </div>
</body>
</html>

■CSS

html {
  margin: 0;
  font-size: 16px;
  font-size: 100%;
  overflow: hidden;
}

body {
    min-width: 320px;
    font-size: 1rem;
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    overflow: auto;
}

img {
    width: 100%;
    height: auto;
}

.sp_display {
  display: none;
}

article h2, article h1 {
  font-size: 3.6em;
  line-height: 1em;
  margin: 25px 0;
}

.content {
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
  color: #333;
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#first {
  background: url(../img/bg-parallaxsample01.jpg) 50% 0 no-repeat fixed;
  background-size: cover;
}

#second {
  background: url(../img/bg-parallaxsample02.jpg) 50% 0 no-repeat fixed black;
  background-size: cover;
}

#third {
  background: url(../img/bg-parallaxsample03.jpg) 50% 0 no-repeat fixed black;
  background-size: cover;
}

/* section first */
.logo {
  color: rgba(255, 255, 255, 0.9);
  font-size:  3.2em;
  line-height: 1.2;
  font-weight: bold;
  margin: 0;
  position: fixed;
  top: calc(100 / 1920 * 100%);
  left: calc(50 / 1920 * 100%);
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}

.first_box {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(150, 150, 150, 0.1);
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
  padding: 18px;
  position: fixed;
  top: calc(300 / 1920 * 100%);
  width: calc(900 / 1920 * 100%);
  max-width:800px;
  left: -100%;
  transition: all 1s 0s ease;
  z-index: 3;
}

.odd_movie,
.even_movie {
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}

.first_box.right_move {
  left: 10%;
}

.first_box.riguht_doun {
  left:50%;
  top:50%;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(405deg) scale(1.4);
          -ms-transform: translateX(-50%) translateY(-50%) rotate(405deg) scale(1.4);
      transform: translateX(-50%) translateY(-50%) rotate(405deg) scale(1.4);
}

.first_box.left_top {
  left:76%;
  top:0%;
  -webkit-transform:translateX(-50%) translateY(-26%) rotate(0deg);
          -ms-transform:translateX(-50%) translateY(-26%) rotate(0deg);
      transform:translateX(-50%) translateY(-26%) rotate(0deg);
}


.first_box.right_move [class*="_text"],
.first_box.riguht_doun [class*="_text"],
.first_box.left_top [class*="_text"] {
  display: none;
}

.first_box.right_move .first_text,
.first_box.riguht_doun .second_text,
.first_box.left_top .third_text {
  display: block;
}

/* section second */
.second_box {
    position: absolute;
    top: calc(80 / 1150 * 100%);
    background: rgba(51, 51, 51, 0.9);
    border: 1px solid rgba(150, 150, 150, 0.1);
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
    color: white;
    margin-left: calc(100 / 1150 * 100%);
    padding: calc(10 / 1150 * 100%) calc(20 / 1150 * 100%);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    line-height: 1.5em;
    width: calc(445 / 1150 * 100%);
    transition: all 1s 0s ease;
}

/* section third */
.third_box {
    background: rgba(51, 51, 51, 0.9);
    border: 1px solid rgba(150, 150, 150, 0.1);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
    color: white;
    padding: calc(10 / 1150 * 100%) calc(20 / 1150 * 100%);
    margin: calc(100 / 1150 * 100%) 0 0 60%;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    line-height: 1.5em;
    color: white;
    position: absolute;
    top: 0;
    right: -50%;
    transition: all 1s 0s ease;
    width: 40%;
}

.third_box.left_move {
    -webkit-transform: translateX(-116%);
            transform: translateX(-116%);
}


.img_box {
    border: 8px solid white;
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
    height: auto;
    width: calc(400 / 1150 * 100%);
    position: absolute;
    left: calc(30 / 1150 * 100%);
    top: 0;
    transition: all 1s 0s ease;
}

.img_box.bottom_move {
    -webkit-transform: translateY(116%) rotate(-12deg);
            transform: translateY(116%) rotate(-12deg);
}

/* section the end */
#theend h2 {
  color: white;
  font-size: 4em;
  left: 50%;
  margin-left: calc(150 / 1150 * -100%);
  position: absolute;
  text-shadow: 0 0 16px rgba(140, 123, 96, 0.8);
  top: calc(180 / 1150 * 100%);
  width: calc(300 / 1150 * 100%);
}

@media all and (max-width: 1081px) {
  .first_box.right_top {
    width: calc(800 / 1150 * 100%);
  }

}
@media all and (max-width: 768px) {
.sp_display {
  display: block;
}

article h2, article h1 {
  font-size: 1.8em;
}

.first_box {
  top: calc(500 / 1150 * 100%);
  width:90%;
}

.first_box.right_move {
  left:calc(50%);
  -webkit-transform: translateX(-50%);
          transform:translateX(-50%);
}

.first_box.riguht_doun {
  left:calc(50%);
  -webkit-transform:translateX(-50%) translateY(-80%) rotate(-720deg);
          transform:translateX(-50%) translateY(-80%) rotate(-720deg);
}

.first_box.left_top {
  left:calc(50%);
  -webkit-transform:translateX(-50%) translateY(0%) rotate(720deg);
          transform:translateX(-50%) translateY(0%) rotate(720deg);
}

}

■JS

$(function(){
    var imgTopImgBox = $("#first").offset().top;
    var imgTopSecond = $("#second").offset().top;
    var imgTopThird = $("#third").offset().top;
    var difference = imgTopSecond/1.2;
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    var TopClass = imgTopSecond/3;
    window.onload = function () {
        var aa = $('.first_box').attr('class');
        var classVals = aa.split(' ');
        if(classVals.length <= 1){
               $('.first_box').addClass('right_move');
        }
    };

    $(window).scroll(function (){
        var scroll = $(window).scrollTop();
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var moveBox = $(".first_box").offset();
    });

    $(window).scroll(function (){
        var scroll = $(window).scrollTop();
        var windowHeight = $(window).height();
        if(0 <= scroll && scroll < windowHeight){
            $("#first").each(function(){
                if (0 <= scroll && scroll < windowHeight / 4){
                    $('.first_box').css("left","");
                    $('.first_box').removeClass('riguht_doun');
                    $('.first_box').addClass('right_move');
                } else if (scroll > windowHeight / 4){
                    $('.first_box').removeClass('right_move');
                    $('.first_box').removeClass('left_top');
                    $('.first_box').addClass('riguht_doun');
                }
            });
        };
        if(scroll >= imgTopSecond - 1 && scroll < imgTopThird){
            $("#second").each(function(){
                $('.first_box').removeClass('riguht_doun');
                $('.first_box').addClass('left_top');
                if(scroll < imgTopForth - difference){
                    $('.first_box').removeClass('right_top');
                    $('.first_box').addClass('left_top');
                };
            })
        };


        if(scroll >= imgTopThird - 1 && scroll < imgTopForth){
            $("#third").each(function(){
                $('.first_box').addClass('right_top');
                $('.first_box').removeClass('left_top');
            })
        };
    });

    //スクロールがゆっくり動く
    $('body').easeScroll({
      frameRate: 60,
      animationTime: 2000,
      stepSize: 120,
      pulseAlgorithm: 1,
      pulseScale: 8,
      pulseNormalize: 1,
      accelerationDelta: 20,
      accelerationMax: 1,
      keyboardSupport: true,
      arrowScroll: 50,
      touchpadSupport: true,
      fixedBackground: true
    });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

自己解決しました。

■下にスクロールしてタイトル1のBoxがタイトル2のBoxになる時にEdge、IE11、IE10の場合表示される位置がガクッと下に下がってから移動が始まる

IEではCSSの transform() と calc() を合わせた演算結果がブラウザによって異なるらしいので、初期に値に使用していたcalcを普通に%で書くことで解消しました。

.first_box {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(150, 150, 150, 0.1);
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
  padding: 18px;
  position: fixed;
  top: calc(300 / 1920 * 100%);←ここを「calc」ではなく、%で表示
  width: calc(900 / 1920 * 100%);
  max-width:800px;
  left: -100%;
  transition: all 1s 0s ease;
  z-index: 3;
}

■下にスクロールしてタイトル2のBoxがタイトル3のBoxになる時にEdge、IE11、IE10の場合アニメーションで移動するが、回転をしない

これはtransformの「scale」の値を端折っていたのが原因でした。
最初はscaleを1.4で指定してましたが、2回目はscaleの記述を書いていませんでした。
Chromeなどではこの辺書いていなくてもいい感じに1に戻してくれたので特に気にしていませんでしたが、
IEではscaleの記述が入っていないため、回転のアニメーションが動かなくなったようです。

解決策としては、めんどくさがらずに、「それぞれにscaleの値を入れる」です。

.first_box.riguht_doun {
  left:50%;
  top:50%;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(405deg) scale(1.4);
          -ms-transform: translateX(-50%) translateY(-50%) rotate(405deg) scale(1.4);
      transform: translateX(-50%) translateY(-50%) rotate(405deg) scale(1.4);
}

.first_box.left_top {
  left:76%;
  top:0%;
  -webkit-transform:translateX(-50%) translateY(-26%) rotate(0deg);←ここに scale(1)を入れる
          -ms-transform:translateX(-50%) translateY(-26%) rotate(0deg);←ここに scale(1)を入れる
      transform:translateX(-50%) translateY(-26%) rotate(0deg);←ここに scale(1)を入れる
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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