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

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

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

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

HTML

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

CSS

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

解決済

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

Koko1010
Koko1010

総合スコア0

JavaScript

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

HTML

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

CSS

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

1回答

0評価

0クリップ

19閲覧

投稿2020/09/19 13:28

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

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

該当のソースコード

html

<!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta> <script src="jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="nayami.css"> </head> <body> <h2>ああああああ</h2><br> <div class="a b"> <img src="sky.jpg"> <p>あああああ<br>ああああ</p> <p2>あいうえお</p2></div> <br><br><br><br><br><br><br><br> <section> <div class="fade">あああああ</div> <div class="fade2"><br>あああああ<br><br>ああああああああ<br><br>ああああああ</div><br><br><br><br><br><br> <div class="fade3">service</div><br><br><br><br><br><br><br> <div class="fade4"></div><br><br><br><br><br> <div class="fade5"></div> <div class="fade6"></div><br><br><br><br><br> <div class="fade7"></div> </section> <script src="na.js"></script> </body> </html>

css

body{ background: #f2f8ed } .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); } } .fade{opacity: 0;} .fadeInDown{ text-align: center; animation-name: fadeInDown; animation-duration: 1s; animation-fill-mode: forwards; font-weight: bold; font-size: 35px; font-family: serif; top: 1820px; } @keyframes fadeInDown { 0% { opacity: 0; } 100% { opacity: 1; transform: translatey(-50px); } } .fade2{opacity: 0;} .fadeInDown2{ text-align: center; animation-name: fadeInDown2; animation-duration: 1s; animation-fill-mode: forwards; font-size: 18px; font-family: serif; } @keyframes fadeInDown2 { 0% { opacity: 0; } 100% { opacity: 1; transform: translatey(-50px); } } .fade3{opacity: 0;} .fadeInDown3{ text-align: center; animation-name: fadeInDown3; animation-duration: 1s; animation-fill-mode: forwards; font-weight: bolder; font-size: 42px; font-family: serif; } @keyframes fadeInDown3 { 0% { opacity: 0; } 100% { opacity: 1; transform: translatey(-50px); } } .fade4{opacity: 0;} .fadeInDown4{ animation-name: fadeInDown4; animation-duration: 1s; animation-fill-mode: forwards; font-weight: bolder; font-size: 40px; font-family: serif; } @keyframes fadeInDown4 { 0% { opacity: 0; } 100% { opacity: 1; transform: translatey(-50px); } } .fade5{opacity: 0;} .fadeInDown5{ animation-name: fadeInDown5; animation-duration: 1s; animation-fill-mode: forwards; font-weight: bolder; font-size: 40px; font-family: serif; } @keyframes fadeInDown5 { 0% { opacity: 0; } 100% { opacity: 1; transform: translatey(-50px); } } .fade6{opacity: 0;} .fadeInDown6{ animation-name: fadeInDown6; animation-duration: 1s; animation-fill-mode: forwards; font-weight: bolder; font-size: 20px; font-family: serif; } @keyframes fadeInDown6 { 0% { opacity: 0; } 100% { opacity: 1; transform: translatey(-50px); } } .fade7{opacity: 0;} .fadeInDown7{ animation-name: fadeInDown7; animation-duration: 1s; animation-fill-mode: forwards; font-weight: bolder; font-size: 40px; font-family: serif; } @keyframes fadeInDown7 { 0% { opacity: 0; } 100% { opacity: 1; transform: translatey(-50px); } }

javascript

$(function () { $(window).scroll(function () { const wHeight = $(window).height(); const scrollAmount = $(window).scrollTop(); $('.fade').each(function () { const targetPosition = $(this).offset().top; if(scrollAmount > targetPosition - wHeight + 1300) { $(this).addClass("fadeInDown"); } }); }); }); $(function () { $(window).scroll(function () { const wHeight = $(window).height(); const scrollAmount = $(window).scrollTop(); $('.fade2').each(function () { const targetPosition = $(this).offset().top; if(scrollAmount > targetPosition - wHeight + 1300) { $(this).addClass("fadeInDown2"); } }); }); }); $(function () { $(window).scroll(function () { const wHeight = $(window).height(); const scrollAmount = $(window).scrollTop(); $('.fade3').each(function () { const targetPosition = $(this).offset().top; if(scrollAmount > targetPosition - wHeight + 1300) { $(this).addClass("fadeInDown3"); } }); }); }); $(function () { $(window).scroll(function () { const wHeight = $(window).height(); const scrollAmount = $(window).scrollTop(); $('.fade4').each(function () { const targetPosition = $(this).offset().top; if(scrollAmount > targetPosition - wHeight +1000) { $(this).addClass("fadeInDown4"); } }); }); }); $(function () { $(window).scroll(function () { const wHeight = $(window).height(); const scrollAmount = $(window).scrollTop(); $('.fade5').each(function () { const targetPosition = $(this).offset().top; if(scrollAmount > targetPosition - wHeight + 1000) { $(this).addClass("fadeInDown5"); } }); }); }); $(function () { $(window).scroll(function () { const wHeight = $(window).height(); const scrollAmount = $(window).scrollTop(); $('.fade6').each(function () { const targetPosition = $(this).offset().top; if(scrollAmount > targetPosition - wHeight + 1000) { $(this).addClass("fadeInDown6"); } }); }); }); $(function () { $(window).scroll(function () { const wHeight = $(window).height(); const scrollAmount = $(window).scrollTop(); $('.fade7').each(function () { const targetPosition = $(this).offset().top; if(scrollAmount > targetPosition - wHeight + 1000) { $(this).addClass("fadeInDown7"); } }); }); });

試したこと

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%/

}

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

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

JavaScript

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

HTML

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

CSS

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