teratail
回答率
87.20%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
87.20%
トップCSS3に関する質問
CSS3

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

HTML5

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

JavaScript

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

解決済

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

AN3000
AN3000

総合スコア34

CSS3

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

HTML5

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

JavaScript

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

1回答

0評価

1クリップ

303閲覧

投稿2022/04/12 07:57

編集2022/04/12 18:19

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

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

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

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

html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>test</title>
	<link rel="stylesheet" href="css.css">
</head>
<body>
	
	
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<div class="area">
		<div class="slide online">
			<div class="wrap">
				<img src="https://code-step.com/demo/html/lp/img/icon-pc.png" alt="">
				<div class="text-area">
					<p>オンライン対応</p>
					<p>24時間いつでも受講できる！</p>
			</div>
			</div>
		</div>

		<div class="slide teacher">
			<div class="wrap">
				<img src="https://code-step.com/demo/html/lp/img/icon-teacher.png" alt="">
				<div class="text-area">
					<p>講師はネイティブ</p>
					<p>お気に入りの講師が自由に
						選べる！</p>
			</div>
		
			</div>
		</div>
	</div>
	<script src="java.js"></script>
</body>
</html>
css
* {
	margin: 0;
	padding: 0;
}

.area {
	background: blue;
	width: 100%;
	height: 360px;
	position: relative;
	overflow: hidden;
}

.slide {
	display: flex;
	justify-content: 
	space-between;
	align-items: center;
	background: white;
	height: 120px;
	position: absolute;
	padding: 20px;
	box-sizing: border-box;
}

.wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
}

.online {
	top: 40px;
	right: 16px;
	left: 0;
	border-radius: 0 20px 20px 0;
	
}

.teacher {
	top: 200px;
	right: 0;
	left: 16px;
	border-radius: 20px 0 0 20px;
}


.online > .wrap > img {
	width: 87px;
	height: 60px;
	margin-right: 40px;
}

.teacher > .wrap > img {
	width: 50px;
	height: 60px;
	margin-right: 40px;
}

.text-area p:first-of-type{
	font-size: 24px;
	color: #FF2A2A;
	font-weight: bold;
	letter-spacing: 0.1em;
}

.text-area p:last-of-type {
	font-size: 18px;
	letter-spacing: 0.1em;
	line-height: 1.6;
}

.slide.online {
	opacity: 0;
	-webkit-transform: translateX(-90%);
	transform: translateX(-90%);

}

.slide.online.active {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
	transition: 0.5s;
	-webkit-transition: 0.5s;
}


.slide.teacher {
	opacity: 0;
	-webkit-transform: translateX(90%);
	transform: translateX(90%);

}


.slide.teacher.active {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
	transition: 0.5s;
	-webkit-transition: 0.5s;


}


javascript
'use strict';

{


	const online = document.querySelector('.slide.online');

	const teacher = document.querySelector('.slide.teacher');

	const options = {
		rootMargin: '0px',
		threshold: 0.1,
	};

	const setItemActive = (entries) => {
		entries.forEach((entry) => {
			// console.log(entries);
			if (entry.isIntersecting === true) {
				console.log(entry);
				entry.target.classList.add('active');
			}

			
		});
	};

	const observer = new IntersectionObserver(setItemActive, options);
	

	observer.observe(online);

	observer.observe(teacher);
}

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

Lhankor_Mhy
Lhankor_Mhy

2022/04/12 08:09

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

2022/04/12 08:20

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

2022/04/12 08:21

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

2022/04/12 08:31

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

2022/04/12 08:33

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

2022/04/12 08:34

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

2022/04/12 08:39

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

2022/04/12 08:43

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

2022/04/12 08:57

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

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

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

HTML5

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

JavaScript

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

トップCSS3に関する質問

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