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

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

新規登録して質問してみよう
ただいま回答率
85.46%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

HTML

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

CSS

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

Q&A

1回答

786閲覧

テキストアニメーションの作り方がわかりません

morfonica

総合スコア33

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/08/16 12:07

前提・実現したいこと

Ruby on Railsでwebアプリを作っています。

テキストアニメーションを実装中に以下の問題が発生しました。

発生している問題

何も表示されません。

該当のソースコード

html

1<div class="about-bg"> 2 <div class="container"> 3 4 <div class="row"> 5 <div class="heading"><h5>ABOUT</h5></div> 6 </div> 7 8 <div class="row"> 9 <h5 class="title"> 10 <span>使</span> 11 <span></span> 12 <span></span> 13 <span></span> 14 <span>&</span> 15 <span></span> 16 <span></span> 17 <span></span> 18 <span></span> 19 </h5> 20 </div> 21 22 </div> 23</div> 24

css

1.expand-image:hover { 2 opacity: 0.8; 3 } 4 5.modal { 6 position: fixed; 7 top: 0; 8 left: 0; 9 width: 100%; 10 height: 100vh; 11 background-color: rgba(0, 0, 0, 0.8); 12 display: none; 13 } 14 15.bigimg { 16 position: absolute; 17 width: 80%; 18 max-width: 800px; 19 top: 80px; 20 left: 0; 21 right: 0; 22 margin-right: auto; 23 margin-left: auto; 24 } 25 26.close-btn { 27 color: #fff; 28 font-size: 40px; 29 position: absolute; 30 right: 20px; 31 top: 0; 32 } 33 34.close-btn a { 35 color: #fff; 36 text-decoration: none; 37 }

js

1const CLASSNAME = "-visible"; 2const TIMEOUT = 1500; 3const $target = $(".title"); 4 5setInterval(() => { 6 $target.addClass(CLASSNAME); 7 setTimeout(() => { 8 $target.removeClass(CLASSNAME); 9 }, TIMEOUT); 10}, TIMEOUT * 2);

試したこと

https://baigie.me/officialblog/2021/02/25/css-tips-1/
上記のサイトを参考にしました。
デベロッパーツールを用いてみましたが、実装部分が丸ごと存在しませんでした。

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

cloud9
rails version 5.2.6

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

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

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

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

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

yambejp

2021/08/17 00:39 編集

jQueryはちゃんと読み込んでいますか? それとテキストアニメーションの仕様を記載ください
morfonica

2021/08/17 02:05

他のjQueryは機能しています。 仕様は1文字ずつフェードインする感じです。
guest

回答1

0

仕様は1文字ずつフェードインする感じです。

javascript

1$(function(){ 2 $('.title span').hide().each(function(x){ 3 $(this).delay(x*100).fadeIn(); 4 }); 5});

投稿2021/08/17 02:13

yambejp

総合スコア115010

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問