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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

1326閲覧

フェードインを時間差で発生させたい。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/09/19 13:28

フェードインを時間差で発生させたい。

フェードインの時間差処理の仕方を色々な方法で試してみましたが、上手くいきませんでした。
どうしてか、フェードイン処理のされているはずのテキストが最初から表示されており、その数秒後にフェードアウト・フェードインが発生します。
数秒遅れてフェードインをしたいのは、<p2>あいうえお</p2>の部分です。
不明瞭な文章で申し訳ありません。どうか、宜しくお願い致します。
テキストは恥ずかしい文章でして、ほぼ「あああああ」に変えました。読みにくいとは思いますが、ご了承ください。

該当のソースコード

html

1<!DOCTYPE> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta> 6 <script src="jquery-3.5.1.min.js"></script> 7 <link rel="stylesheet" href="nayami.css"> 8 </head> 9 <body> 10 <h2>ああああああ</h2><br> 11 12 <div class="a b"> 13 <img src="sky.jpg"> 14 <p>あああああ<br>ああああ</p> 15 <p2>あいうえお</p2></div> 16 <br><br><br><br><br><br><br><br> 17 <section> 18 <div class="fade">あああああ</div> 19 <div class="fade2"><br>あああああ<br><br>ああああああああ<br><br>ああああああ</div><br><br><br><br><br><br> 20 <div class="fade3">service</div><br><br><br><br><br><br><br> 21 <div class="fade4"></div><br><br><br><br><br> 22 <div class="fade5"></div> 23 <div class="fade6"></div><br><br><br><br><br> 24 <div class="fade7"></div> 25 </section> 26 <script src="na.js"></script> 27 </body> 28</html> 29

css

1body{ 2 background: #f2f8ed 3} 4 5.a{ 6 position: relative; 7} 8 9.a p{ 10 position: absolute; 11 font-family: serif; 12 font-size: 70px; 13 width: 635px; 14 border-bottom: solid 1px; 15 animation-name: my-fade-in; 16 animation: my-fade-in 1.1s ease forwards; 17 top: 150; 18 left: 40; 19 margin:0; 20 padding:0; 21} 22 23@keyframes my-fade-in { 24 from { 25 opacity: 0; 26 transform: translatex(-500px); 27 } 28 } 29 30.b p2{ 31 position: absolute; 32 top: 400px; 33 left:50px; 34 margin:0; 35 padding:0; 36 font-size: 22px; 37 font-family: serif; 38 animation: my-fade-in2 1.1s ease 1s 1 normal; 39} 40 41@keyframes my-fade-in2 { 42 0% { 43 opacity: 0; 44 transform: translateY(-35px); 45 } 46 100% { 47 opacity: 1; 48 transform: translatey(0px); 49 } 50} 51 52.fade{opacity: 0;} 53.fadeInDown{ 54 text-align: center; 55 animation-name: fadeInDown; 56 animation-duration: 1s; 57 animation-fill-mode: forwards; 58 font-weight: bold; 59 font-size: 35px; 60 font-family: serif; 61 top: 1820px; 62} 63 64@keyframes fadeInDown { 65 0% { 66 opacity: 0; 67 } 68 100% { 69 opacity: 1; 70 transform: translatey(-50px); 71 } 72} 73 74 75 76 77 78 79.fade2{opacity: 0;} 80.fadeInDown2{ 81 text-align: center; 82 animation-name: fadeInDown2; 83 animation-duration: 1s; 84 animation-fill-mode: forwards; 85 font-size: 18px; 86 font-family: serif; 87} 88 89@keyframes fadeInDown2 { 90 0% { 91 opacity: 0; 92 } 93 100% { 94 opacity: 1; 95 transform: translatey(-50px); 96 } 97} 98 99.fade3{opacity: 0;} 100.fadeInDown3{ 101 text-align: center; 102 animation-name: fadeInDown3; 103 animation-duration: 1s; 104 animation-fill-mode: forwards; 105 font-weight: bolder; 106 font-size: 42px; 107 font-family: serif; 108} 109 110@keyframes fadeInDown3 { 111 0% { 112 opacity: 0; 113 } 114 100% { 115 opacity: 1; 116 transform: translatey(-50px); 117 } 118} 119 120.fade4{opacity: 0;} 121.fadeInDown4{ 122 animation-name: fadeInDown4; 123 animation-duration: 1s; 124 animation-fill-mode: forwards; 125 font-weight: bolder; 126 font-size: 40px; 127 font-family: serif; 128} 129 130@keyframes fadeInDown4 { 131 0% { 132 opacity: 0; 133 } 134 100% { 135 opacity: 1; 136 transform: translatey(-50px); 137 } 138} 139 140.fade5{opacity: 0;} 141.fadeInDown5{ 142 animation-name: fadeInDown5; 143 animation-duration: 1s; 144 animation-fill-mode: forwards; 145 font-weight: bolder; 146 font-size: 40px; 147 font-family: serif; 148} 149 150@keyframes fadeInDown5 { 151 0% { 152 opacity: 0; 153 } 154 100% { 155 opacity: 1; 156 transform: translatey(-50px); 157 } 158} 159 160.fade6{opacity: 0;} 161.fadeInDown6{ 162 animation-name: fadeInDown6; 163 animation-duration: 1s; 164 animation-fill-mode: forwards; 165 font-weight: bolder; 166 font-size: 20px; 167 font-family: serif; 168} 169 170@keyframes fadeInDown6 { 171 0% { 172 opacity: 0; 173 } 174 100% { 175 opacity: 1; 176 transform: translatey(-50px); 177 } 178} 179 180 181.fade7{opacity: 0;} 182.fadeInDown7{ 183 animation-name: fadeInDown7; 184 animation-duration: 1s; 185 animation-fill-mode: forwards; 186 font-weight: bolder; 187 font-size: 40px; 188 font-family: serif; 189} 190 191@keyframes fadeInDown7 { 192 0% { 193 opacity: 0; 194 } 195 100% { 196 opacity: 1; 197 transform: translatey(-50px); 198 } 199} 200

javascript

1$(function () { 2 $(window).scroll(function () { 3 const wHeight = $(window).height(); 4 const scrollAmount = $(window).scrollTop(); 5 $('.fade').each(function () { 6 const targetPosition = $(this).offset().top; 7 if(scrollAmount > targetPosition - wHeight + 1300) { 8 $(this).addClass("fadeInDown"); 9 } 10 }); 11 }); 12}); 13 14$(function () { 15 $(window).scroll(function () { 16 const wHeight = $(window).height(); 17 const scrollAmount = $(window).scrollTop(); 18 $('.fade2').each(function () { 19 const targetPosition = $(this).offset().top; 20 if(scrollAmount > targetPosition - wHeight + 1300) { 21 $(this).addClass("fadeInDown2"); 22 } 23 }); 24 }); 25}); 26 27$(function () { 28 $(window).scroll(function () { 29 const wHeight = $(window).height(); 30 const scrollAmount = $(window).scrollTop(); 31 $('.fade3').each(function () { 32 const targetPosition = $(this).offset().top; 33 if(scrollAmount > targetPosition - wHeight + 1300) { 34 $(this).addClass("fadeInDown3"); 35 } 36 }); 37 }); 38}); 39 40$(function () { 41 $(window).scroll(function () { 42 const wHeight = $(window).height(); 43 const scrollAmount = $(window).scrollTop(); 44 $('.fade4').each(function () { 45 const targetPosition = $(this).offset().top; 46 if(scrollAmount > targetPosition - wHeight +1000) { 47 $(this).addClass("fadeInDown4"); 48 } 49 }); 50 }); 51}); 52 53$(function () { 54 $(window).scroll(function () { 55 const wHeight = $(window).height(); 56 const scrollAmount = $(window).scrollTop(); 57 $('.fade5').each(function () { 58 const targetPosition = $(this).offset().top; 59 if(scrollAmount > targetPosition - wHeight + 1000) { 60 $(this).addClass("fadeInDown5"); 61 } 62 }); 63 }); 64}); 65 66$(function () { 67 $(window).scroll(function () { 68 const wHeight = $(window).height(); 69 const scrollAmount = $(window).scrollTop(); 70 $('.fade6').each(function () { 71 const targetPosition = $(this).offset().top; 72 if(scrollAmount > targetPosition - wHeight + 1000) { 73 $(this).addClass("fadeInDown6"); 74 } 75 }); 76 }); 77}); 78 79$(function () { 80 $(window).scroll(function () { 81 const wHeight = $(window).height(); 82 const scrollAmount = $(window).scrollTop(); 83 $('.fade7').each(function () { 84 const targetPosition = $(this).offset().top; 85 if(scrollAmount > targetPosition - wHeight + 1000) { 86 $(this).addClass("fadeInDown7"); 87 } 88 }); 89 }); 90}); 91

試したこと

html

<div class="fade">ここがふわっとするよ</div>

css
.fade{

animation: fadeIn 0.2s ease 0.3s 1 normal;

}

@keyframes fadeIn { /animetion-nameで設定した値を書く/

0% {opacity: 0} /アニメーション開始時は不透明度0%/

100% {opacity: 1} /アニメーション終了時は不透明度100%/

}

このコードを応用して試してみたのですが、遅れて表示する処理はできませんでした。

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

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

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

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

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

guest

回答1

0

ベストアンサー

フェードインをcssではなく、jQueryでやってみてはいかがでしょうか?
faedinという関数があります。
たしか、コールバックがあったので時間差の制御がしやすくなると思います。

投稿2020/09/19 13:40

Kaiser

総合スコア295

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

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

退会済みユーザー

退会済みユーザー

2020/09/20 02:30

できませんでした…htmlの <div class="a b"> <img src="sky.jpg"> <p>あああああ<br>ああああ</p> <p2>あいうえお</p2></div> と、cssの .a{ position: relative; } .a p{ position: absolute; font-family: serif; font-size: 70px; width: 635px; border-bottom: solid 1px; animation-name: my-fade-in; animation: my-fade-in 1.1s ease forwards; top: 150; left: 40; margin:0; padding:0; } @keyframes my-fade-in { from { opacity: 0; transform: translatex(-500px); } } .b p2{ position: absolute; top: 400px; left:50px; margin:0; padding:0; font-size: 22px; font-family: serif; animation: my-fade-in2 1.1s ease 1s 1 normal; } @keyframes my-fade-in2 { 0% { opacity: 0; transform: translateY(-35px); } 100% { opacity: 1; transform: translatey(0px); } } に応用できないのです。
退会済みユーザー

退会済みユーザー

2020/09/20 02:40

出来ましたーーー!ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問