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

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

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

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

118閲覧

アニメーション画像内でのアニメーション表示について

anagram

総合スコア5

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/02/12 09:24

HPのトップ画像(画像1)で右から徐々に表示するというアニメーションを付けており、その画像内に小さい画像(画像2)を上に重ねて表示しております。
その際に下記のコードを使い画像1は右から。。。画像2は左から。。。というアニメーションをつけたく、コードを記載したのですが、画像2が表示されなくなってしまいました。
デベロッパーツールでみると確かに表示はされているのですが、透明になってしまい次の要素の裏(positionを指定しなかった場合の場所)に隠れてしまっています。
そもそも画像2でposition指定をしているので、そこのエラーかと思いpositionを0にしてみたりしましたが、なかなかうまくいきません。。。
どこが原因か教えていただけませんでしょうか?
よろしくお願いいたします。

HTML

1<div class="top-box"> 2 <div class="img-wrap_right"> 3 <div class="topimg_title2"> 4 <img src="common/images/top.png" alt="" > 5 </div> 6 </div> 7 <div class="img-wrap_left"> 8 <div class="topimg_txt"> 9 <img src="common/images/toptxt.png" alt="" > 10 </div> 11 </div> 12</div>

右から画像を表示する
※左からはtransform: translateX(100%);に変更しているだけです。

CSS

1.img-wrap_right { 2 position: relative; 3} 4 5.img-wrap_right:before { 6 background: #fff; 7 bottom: 0; 8 content: ''; 9 left: 0; 10 pointer-events: none; 11 position: absolute; 12 right: 0; 13 top: 0; 14 z-index: 1; 15} 16.img-ani2 .img-wrap_right:before { 17 animation: img-wrap_right 2s cubic-bezier(.4, 0, .2, 1) forwards; 18} 19@keyframes img-wrap_right { 20 100% { 21 transform: translateX(-100%); 22 } 23}

画像2CSS

CSS

1.topimg_txt img{ 2 width:63%; 3 4 justify-content: center; 5 align-items: center; 6 7 position: absolute; 8 top: 69%; 9 left: 0; 10}

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

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

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

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

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

Lhankor_Mhy

2020/02/13 02:48

ご提示のコードを当方で試してみましたが、画像2(common/images/toptxt.png)は表示されていました。つまり、問題が再現されませんでした。 その代わりといっては何ですが、画像1(common/images/top.png)が表示されませんでした。 anagramさんは、ご提示いただいているコードだけで問題が再現しますか? 再現するのであれば、環境の問題かと思います。 再現しないのであれば、ご提示いただいていない部分の問題かと思いますので、問題が再現するコードをご提示ください。
anagram

2020/02/13 15:13

ご連絡遅くなってしまい申し訳ありません。 確かに別のサンプルサイトで同じコードを記載すると画像表示がされなくなってしまいます。(こちらは画像1、2共にでした。) CSSやJavascript等も確認しましたが問題点が見つからず。。。 <div class="img-wrap_right">のCSSが原因のようですが、、、丸一日みて色々試しましたがわかりませんでした。。。申し訳ありません。。。 下記が該当サイトなのですが、原因がわかったりしませんでしょうか? 厚かましく申し訳ありませんがよろしくお願いいたします。 https://www.sbibs.jp/select-jobchange/
Lhankor_Mhy

2020/02/14 00:38

完成イメージがわからないのですが、「転職に可能性を」はどのあたりに表示したいのですか?
guest

回答1

0

画像ではなくて、ラッパーを絶対配置した方が楽だと思います。
こうじゃないでしょうか。

css

1.img-wrap_left { 2 overflow: hidden; 3 /* position: relative; */ 4 position: absolute; 5 top: 69%; 6} 7.topimg_txt img { 8 /* width: 63%; */ 9 /* justify-content: center; */ 10 /* align-items: center; */ 11 /* position: absolute; */ 12 /* top: 69%; */ 13 /* left: 0; */ 14}

投稿2020/02/15 01:40

Lhankor_Mhy

総合スコア35871

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

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

anagram

2020/02/17 03:28 編集

ご回答ありがとうございます。 こちらでもできませんでした。。。 画像の下部(topから69%のところ)に白い帯のようなものが入ってしまい表示崩れが起きてしまいしました。 テスト環境でも再現ができなかったところを見ると今回記載していない部分が起因してうまくいかない可能性が高いのですかね・・・
Lhankor_Mhy

2020/02/17 03:44

> 画像の下部(topから69%のところ)に白い帯のようなものが入ってしまい え、それではダメなのですか? ご提示いただいたカンプどおりですよね?
anagram

2020/02/17 03:53

いえ、テキスト入りの画像ではなく、ただただ白い余白のようなものが表示されます。(Width指定しても横Maxで表示されてしまいます。) デベロッパーツールでみるとその白い余白の中の左側に確かに指定の画像が入ってはいるのですが、見えずホワイトアウトしております。右側は本来の余白として表示されます。 なのでtop69%の位置から完全に上下別れてしまっている状態です。 つたない表現で申し訳ありません。
Lhankor_Mhy

2020/02/17 03:58

?? その白い帯はアニメーションさせる予定なのでは? 「画像2は左から。。。というアニメーションをつけたく」「※左からはtransform: translateX(100%);に変更しているだけ」とはそういう意味ではないのですか?
Lhankor_Mhy

2020/02/17 04:04

まあ、どうしても白い帯を消したいなら、 .img-wrap_left:before のルールを全消ししたらいいかと思いますが……
anagram

2020/02/17 04:16

そのアニメーション自体(画像2)が機能せず白い帯が出ている状態です。 >「画像2は左から。。。というアニメーションをつけたく」「※左からはtransform: translateX(100%);に変更しているだけ」とはそういう意味ではないのですか? こちらが実装したいことで問題ありません。 ややこしくてすいません。 単純に画像2のアニメーションが起動せず、ただの白い画像(テキストなし)として表示されている状態です。
Lhankor_Mhy

2020/02/17 04:51

もう見れなくなってしまったので、何とも言えないのですが、私が拝見した時はアニメーション部分のCSSは未実装だったと思います。 なので、これから作る予定なのかな、と思っていましたが、違うのですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問