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

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

ただいまの
回答率

87.95%

Safariでアニメーションが動かない

解決済

回答 1

投稿 編集

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

score 4

Chromeではアニメーションが動くのですが、
Safari(MacBook Pro13inch)で
アニメーションが動かないのを解決したいです。

iphone11proでは、動きました。

お分かりになる方いらっしゃいましたら、
ご教授お願い致します。

対象ページ
https://sample1.veronica9.com/concept/

<?php get_header(); ?>
<div class="header-box"></div>
<div class="page_head js-animation">
    <h1>コンセプト</h1>
    <p>「お食事を大切にすることは、自分自身を大切にすること」<br>
        この理念に全ての想いが入っています。<br>
             毎日のごはんが、日々の幸せに繋がっていきます。</p>
</div>
<div class="page_head_img">
<img src="https://sample1.veronica9.com/wp-content/uploads/2021/06/4.jpg" alt="" class="js-animation_left">
</div>
<div class="page_contents js-animation">
    <p>発酵食、無添加、ホールフード、オーガニック、そしてサステナブル。<br>
        未来の明るい世界を意識した、お食事方法を大切にしています。</p></div>
<div class="page_contents_left_img js-animation_right">
<img src="https://sample1.veronica9.com/wp-content/uploads/2021/06/4.jpg" alt=""></div>
<div class="page_contents js-animation">
    <p>お料理が苦手でも、感動するほどのごはんを作れるように。<br>
        自信溢れる豊かな人生を切り開いていきます。</p></div>
<div class="page_head_img">
<img src="https://sample1.veronica9.com/wp-content/uploads/2021/06/4.jpg" alt="" class="js-animation_left">
</div>
<div class="page_contents_center js-animation">
    <p>発酵を取り入れた毎日のお食事で、<br>
        あなたの人生は、どんどん変わります。</p></div>
<?php get_footer(); ?>
.js-animation {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}

.js-animation.is-show {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
            transform: translateY(0px);
}

.js-animation_left {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;

    -webkit-transform: translateX(-150px);

        -ms-transform: translateX(-150px);

            transform: translateX(-150px)
}

.js-animation_left.is-show {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
}

.js-animation_right {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(150px);
        -ms-transform: translateX(150px);
            transform: translateX(150px);
    -webkit-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}

.js-animation_right.is-show {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0)
}

.page_head {
    width: 69%;
    margin: auto;
    margin-top: 100px;
}

.page_head h1 {
    margin: 0 0 1em;
    font-size: 2.2rem;
    font-weight: normal;
}

.page_head h1:before {
    position: relative;
    padding-right: 10px;
    left: 0;
    top: 3px;
    content: "";
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    background: url(https://sample1.veronica9.com/wp-content/uploads/2021/06/mark2.svg) no-repeat;
    background-size: contain;
}

.page_head p {
    line-height: 2.5;
    font-size: 1.15rem;
}

.page_head_img {
    width: 85%;
    margin-top: 100px;
    margin-left: auto;
}

.page_contents {
    width: 69%;
    margin: auto;
    margin-top: 100px;
    font-size: 1.15rem;
    line-height: 3.5;
}

.page_contents_left_img {
    width: 80%;
    margin-top: 100px;
    margin-right: auto;
}


.page_contents_center {
    width: 69%;
    margin: auto;
    margin-top: 100px;
    font-size: 1.15rem;
    line-height: 3.5;
    text-align: center;
}
<script type="text/javascript">
/**
 * 到達したら要素を表示させる
 */
function showElementAnimation() {

  var element = document.getElementsByClassName('js-animation');
  if(!element) return; // 要素がなかったら処理をキャンセル

  var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
  var scrollY = window.pageYOffset;
  var windowH = window.innerHeight;

  for(var i=0;i<element.length;i++) { var elemClientRect = element[i].getBoundingClientRect(); var elemY = scrollY + elemClientRect.top; if(scrollY + windowH - showTiming > elemY) {
      element[i].classList.add('is-show');
    } else if(scrollY + windowH < elemY) {
      // 上にスクロールして再度非表示にする場合はこちらを記述
      element[i].classList.remove('is-show');
    }
  }
}
showElementAnimation();
window.addEventListener('scroll', showElementAnimation);
</script>
<noscript>
  <style>
  .js-animation {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
  }
  </style>
</noscript>
<script type="text/javascript">
/**
 * 到達したら要素を表示させる
 */
function showElementAnimation() {

  var element = document.getElementsByClassName('js-animation_left');
  if(!element) return; // 要素がなかったら処理をキャンセル

  var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
  var scrollY = window.pageYOffset;
  var windowH = window.innerHeight;

  for(var i=0;i<element.length;i++) { var elemClientRect = element[i].getBoundingClientRect(); var elemY = scrollY + elemClientRect.top; if(scrollY + windowH - showTiming > elemY) {
      element[i].classList.add('is-show');
    } else if(scrollY + windowH < elemY) {
      // 上にスクロールして再度非表示にする場合はこちらを記述
      element[i].classList.remove('is-show');
    }
  }
}
showElementAnimation();
window.addEventListener('scroll', showElementAnimation);
</script>
<noscript>
  <style>
  .js-animation_left {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
  }
  </style>
</noscript>
<script type="text/javascript">
/**
 * 到達したら要素を表示させる
 */
function showElementAnimation() {

  var element = document.getElementsByClassName('js-animation_right');
  if(!element) return; // 要素がなかったら処理をキャンセル

  var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
  var scrollY = window.pageYOffset;
  var windowH = window.innerHeight;

  for(var i=0;i<element.length;i++) { var elemClientRect = element[i].getBoundingClientRect(); var elemY = scrollY + elemClientRect.top; if(scrollY + windowH - showTiming > elemY) {
      element[i].classList.add('is-show');
    } else if(scrollY + windowH < elemY) {
      // 上にスクロールして再度非表示にする場合はこちらを記述
      element[i].classList.remove('is-show');
    }
  }
}
showElementAnimation();
window.addEventListener('scroll', showElementAnimation);
</script>
<noscript>
  <style>
  .js-animation_right {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
  }
  </style>
</noscript>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

私のMacでは動いてますけどね?OSは最新ではないのですが。

MacBook Pro 13inch
OS: Catalina 10.15.7

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2021/06/11 02:01

    ご回答ありがとうございます。

    当方でも
    ・google chrome(windows10)PC
    ・Microsoft edge(windows10)PC
    ・ios (i phone 11pro)
    ・android chrome スマホ
    ・safari(i pad)
    でアニメーションの動作が確認できました。

    ですので、
    個人のMac book proのsafariのOS等の
    問題かと思われます。

    こちらのコードの問題ではなさそうですので、解決出来ました。

    どうもありがとうございました。

    キャンセル

  • 2021/06/11 02:01

    ご回答ありがとうございます。

    当方でも
    ・google chrome(windows10)PC
    ・Microsoft edge(windows10)PC
    ・ios (i phone 11pro)
    ・android chrome スマホ
    ・safari(i pad)
    でアニメーションの動作が確認できました。

    ですので、
    個人のMac book proのsafariのOS等の
    問題かと思われます。

    こちらのコードの問題ではなさそうですので、解決出来ました。

    どうもありがとうございました。

    キャンセル

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

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

関連した質問

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