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

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

新規登録して質問してみよう
ただいま回答率
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ブラウザのほとんどに搭載されています。

解決済

文字に動きのあるサイトを作りたい

free_teku
free_teku

総合スコア82

CSS3

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

HTML5

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

JavaScript

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

1回答

-1評価

0クリップ

138閲覧

投稿2022/01/09 01:36

編集2022/01/09 01:37

前提・実現したいこと

表題の通り、fvが読み込まれたとき、文字にタイピングのような動きを出したい。

発生している問題・エラーメッセージ

試したこと

動き
上記のサイトを見ながら作成しました。
少しアレンジを加え、fvが開いたら(認証したら)、文字に動きを入れるようにしたいので
if構文を使って下記のJsを書きました。文法なども見て確認したものの、エラーが出たりしてうまくいかなかったので、質問しました。

if($(fixFv).onload = function() {

これがelse含めて、終わったら、「 )」を使って終了させる認識を持っていますが、
エラーを解消するには elseの前に);を入れると解消されます。私の認識が間違えていますか?
それとも、ほかの部分が間違えていますか?

該当のソースコード

HTML

<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="asset/css/destyle.css"> <link rel="stylesheet" href="asset/css/style.css"> <script src="./asserts/js/jquery-3.6.0.min.js"></script> <script src="./asserts/js/script.js"></script> </head> <body> <section class="fv"> <div class="fv-inner"> <ul class="fv-list" id="slide_wrap"> <!-- <li class="fv_item"><img src="./asserts/img/fv/fv-pc (1).jpg" alt=""></li><!== /.fv-item --> <!-- <li class="fv_item"><img src="./" alt=""></li>/.fv-item --> <!-- <li class="fv_item"><img src="./asserts/img/fv/fv-code.png" alt=""></li>/.fv-item --> <li class="fv_item"><img alt="" src="./asserts/img/fv/web%20era_natural.png"></li><!-- /.fv_item --> </ul><!-- /.fv-list --> <h2 class="fv-txt"></h2> <p class="fv-txt1 TextTyping"><span>〇</span><span>〇</span><span>〇</span></p><span>〇</span>代<span>〇</span> <span>〇</span><span>〇</span><span>〇</span><span>〇</span><span>〇</span><span>〇</span><span>〇</span> <span>〇</span> <span>Sit〇</span> <span>〇</span> <!-- <br class="fv-txt2"> --> <!-- /.fv-txt --> </div><!-- /.fv-inner --> </section><!-- /.fv --> </body> </html>

CSS

.fv { position: relative; overflow: hidden; width: 100%; } @media screen and (min-width: 600px) and (max-width: 1024px) { .fv { margin-top: 0px; padding: 0px 3%; } } @media screen and (max-width: 599px) { .fv { margin-top: 0px; padding: 0px 5%; } } .fv-inner { position: relative; } .fv-txt { position: absolute; top: 50%; left: 25%; -webkit-transform: translate(-40%, -40%); transform: translate(-40%, -40%); /* white-space: nowrap; */ color: lightcyan; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 2.5em; } .fv-txt span { letter-spacing: 2rem; } .TextTyping span { display: none; } .TextTyping::after { content: "|"; -webkit-animation: typinganime .8s ease infinite; animation: typinganime .8s ease infinite; } @-webkit-keyframes typinganime { from { opacity: 0; } to { opacity: 1; } } @keyframes typinganime { from { opacity: 0; } to { opacity: 1; } }

JS

function TextTypingAnime() { $('.TextTyping').each(function() { var fix =$('.fv') var fixFv =fix.offset().top var thisChild = ""; if($(fixFv).onload = function() { thisChild = $(this).children(); // spanタグを取得 // spanタグ1つ1つ要素の処理を追加 thisChild.each(function (){ var time = 100; // 時差で表示する際のdelayを指定しその時間後にFadeIn $(this).delay(time * i).fadeIn(time); }); } else { thisChild = $(this).children(); thisChild.each(function (i) { $(this).stop(); //delay処理を止める $(this).css("display", "none"); //spanタグ非表示 }); }); }); }

補足情報(FW/ツールのバージョンなど)

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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ブラウザのほとんどに搭載されています。