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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

618閲覧

webサイトのアニメーションが動作しない

AN3000

総合スコア37

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/04/12 07:57

編集2022/04/12 18:19

デモサイトのコーディングをしていまして、試しにサイトにアップしてみたところiPhone(safari , chrome)の一部のアニメーションが動きませんでした。Androidoは動作確認できました。

丸一日調べてみたのですが、解決に至らなかったのでこちらで質問させていただきました。

動作としては、jsで画面領域に対象の要素が入ったら activeを付与し、要素が左右から出てくるというごく一般的なアニメーションになります。

以下に動作NGの一部のソースコードを載せますので、わかるかた教えていただけないでしょうか?

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>test</title> 8 <link rel="stylesheet" href="css.css"> 9</head> 10<body> 11 12 13 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 14 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 15 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 16 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 17 <div class="area"> 18 <div class="slide online"> 19 <div class="wrap"> 20 <img src="https://code-step.com/demo/html/lp/img/icon-pc.png" alt=""> 21 <div class="text-area"> 22 <p>オンライン対応</p> 23 <p>24時間いつでも受講できる!</p> 24 </div> 25 </div> 26 </div> 27 28 <div class="slide teacher"> 29 <div class="wrap"> 30 <img src="https://code-step.com/demo/html/lp/img/icon-teacher.png" alt=""> 31 <div class="text-area"> 32 <p>講師はネイティブ</p> 33 <p>お気に入りの講師が自由に 34 選べる!</p> 35 </div> 36 37 </div> 38 </div> 39 </div> 40 <script src="java.js"></script> 41</body> 42</html>

css

1* { 2 margin: 0; 3 padding: 0; 4} 5 6.area { 7 background: blue; 8 width: 100%; 9 height: 360px; 10 position: relative; 11 overflow: hidden; 12} 13 14.slide { 15 display: flex; 16 justify-content: 17 space-between; 18 align-items: center; 19 background: white; 20 height: 120px; 21 position: absolute; 22 padding: 20px; 23 box-sizing: border-box; 24} 25 26.wrap { 27 display: flex; 28 justify-content: space-between; 29 align-items: center; 30 margin: 0 auto; 31} 32 33.online { 34 top: 40px; 35 right: 16px; 36 left: 0; 37 border-radius: 0 20px 20px 0; 38 39} 40 41.teacher { 42 top: 200px; 43 right: 0; 44 left: 16px; 45 border-radius: 20px 0 0 20px; 46} 47 48 49.online > .wrap > img { 50 width: 87px; 51 height: 60px; 52 margin-right: 40px; 53} 54 55.teacher > .wrap > img { 56 width: 50px; 57 height: 60px; 58 margin-right: 40px; 59} 60 61.text-area p:first-of-type{ 62 font-size: 24px; 63 color: #FF2A2A; 64 font-weight: bold; 65 letter-spacing: 0.1em; 66} 67 68.text-area p:last-of-type { 69 font-size: 18px; 70 letter-spacing: 0.1em; 71 line-height: 1.6; 72} 73 74.slide.online { 75 opacity: 0; 76 -webkit-transform: translateX(-90%); 77 transform: translateX(-90%); 78 79} 80 81.slide.online.active { 82 opacity: 1; 83 -webkit-transform: translateX(0); 84 transform: translateX(0); 85 transition: 0.5s; 86 -webkit-transition: 0.5s; 87} 88 89 90.slide.teacher { 91 opacity: 0; 92 -webkit-transform: translateX(90%); 93 transform: translateX(90%); 94 95} 96 97 98.slide.teacher.active { 99 opacity: 1; 100 -webkit-transform: translateX(0); 101 transform: translateX(0); 102 transition: 0.5s; 103 -webkit-transition: 0.5s; 104 105 106} 107

javascript

1'use strict'; 2 3{ 4 5 6 const online = document.querySelector('.slide.online'); 7 8 const teacher = document.querySelector('.slide.teacher'); 9 10 const options = { 11 rootMargin: '0px', 12 threshold: 0.1, 13 }; 14 15 const setItemActive = (entries) => { 16 entries.forEach((entry) => { 17 // console.log(entries); 18 if (entry.isIntersecting === true) { 19 console.log(entry); 20 entry.target.classList.add('active'); 21 } 22 23 24 }); 25 }; 26 27 const observer = new IntersectionObserver(setItemActive, options); 28 29 30 observer.observe(online); 31 32 observer.observe(teacher); 33}

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2022/04/12 08:09

「一部のアニメーション」とは具体的には何ですか?
AN3000

2022/04/12 08:20

質問にある画面左右から表示されるアニメーションです。 https://code-step.com/demo/html/lp/ こちらのデモサイトを自身で作成しているのですが、「受験生の声」から下のアニメーションはiPhone(safari , chrome)でも動作していましたが、「BBBが選ばれる理由」下の動作がうまくいかず、要素が表示されませんでした。
m.ts10806

2022/04/12 08:21

>webサイトが表示されない タイトルが現状の要件、起きている問題と合致していません。 質問修正してください。
AN3000

2022/04/12 08:31

すみません!今、直しました。ありがとうございます。
Lhankor_Mhy

2022/04/12 08:33

ご提示のコードとご提示のサイトのコードがかなり違うようですが、これはなぜですか?
recal

2022/04/12 08:34

15.4.1に乗ってるsafariだと動いてましたよ。
Lhankor_Mhy

2022/04/12 08:39

もしかして、このページを模写してるとかで、提示のページには問題が起きていないのかな?
AN3000

2022/04/12 08:43

Lhankor_Mhy>>>デザインカンプを見ながらコーディングしたのでオリジナルとは違うコードになっています。 recal>>>私のiPhoneも最新verですが、だめです...
Lhankor_Mhy

2022/04/12 08:57

たぶん、recal さんは、ご提示のオリジナルのページをご覧になったとだと思いますよ。 問題を把握しました。
guest

回答1

0

ベストアンサー

当方の環境ではこれで大丈夫でした。

js

1 const options = { 2 rootMargin: '0px', 3 threshold: 0.095, 4 };

投稿2022/04/12 08:58

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AN3000

2022/04/12 09:09

うまくいきました!!ありがとうございます。 ちなみになぜ、thresholdの値を変えられたのですか?
Lhankor_Mhy

2022/04/12 09:11

片っ端から怪しいところをコメントアウトして調べました。
AN3000

2022/04/12 09:15

なるほど。消去法ですね。 解決できてよかったです。ありがとうございました。
Lhankor_Mhy

2022/04/12 09:19

ご解決されて何よりですが、0.095 が他のiOSデバイスで必ず安全だとは限らないような気がしますので、お気を付けください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問