1990年代にインターネットを閲覧していた人なら、テキストやタイトル、画像、ウェブページ全体を点滅させることがいたるところで行われていたことを知っているだろう！しかし、それ以来、要素を点滅させることは、ブラウザの非互換性や一般的な読みにくさなどの理由で、好まれなくなりました。かつては<blink>や<marquee>のようなHTMLコードを使うことができましたが、現在ではGoogle Chrome、Firefox、Safariを含むすべての現行ブラウザで非推奨、または廃止されつつあります。 このWikiHowでは、HTMLと簡単なJavaScriptコード、または少し複雑なCSSコードを使用して、サイトに点滅するテキストを追加する方法を紹介します！
知っておくべきこと
- 現在のところ、HTMLだけでテキストを点滅させる方法はありません。
- JavaScript関数は、ヘッダーのHTMLと同じドキュメントに入力することができます。
- CSSアニメーションを使用するには、スタイルシート文書を別に作成し、HTMLにリンクする必要があります。
方法1
JavaScriptを使う
-
HTML文書を作成します。いつものように、<html>タグ、<head>タグ、<body>タグを使用します。
-
HTML文書の先頭にブリンク・スクリプトを挿入します。HTML文書の<head>タグと</head>タグの間にコードを記述します：
- 関数blinktext() {
var f = document.getElementById('announcement')；
setInterval(関数() {)
f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden')；
}, 1000);
}
- 関数blinktext() {
-
スクリプトを読み込むコマンドを挿入します。上のコードでは関数を定義し、"blinktext "という名前を付けました。この関数をHTMLで使うには、<body>タグを<body onload="blinktext();">に変更してください。
-
点滅するテキストをアナウンスとして定義します。このスクリプトは、idが "announcement "の要素にのみ作用します。点滅テキストを任意の要素の中に置き、そのidを与えます。例えば、<p >点滅するテキストはこちら</p>や<div >点滅するテキストはこちら</div>と入力します。
- この名前は好きなように変更できる。ただ、スクリプトと要素IDで同じ単語を使うようにしてください。
-
スクリプトを調整する。スクリプト内の数字「1000」は、点滅間の遅延を設定します。この値はミリ秒単位なので、1000にするとテキストは1秒間に1回点滅します。 点滅を速くするにはこの値を小さくし、遅くするにはこの値を大きくします。
- 実際の遅延はおそらくこの値と完全に一致することはないでしょう。若干短くなる傾向がありますが、ブラウザが他のリクエストで混雑している場合は長くなることもあります。
方法2
CSSアニメーションを使う
-
CSSスタイルシートを作成します。既存の.htmlドキュメントと同じフォルダに置くことで、HTMLコードに簡単に接続できるようになります。
- Firefoxはアニメーション用のインラインCSSをサポートしていません！
-
CSSスタイルシートをHTMLドキュメントにリンクします。HTMLドキュメントを開き、<head> </head>要素の間に<link rel="stylesheet" type="text/css" href="NAME.css">と入力してください。
- CSS文書の場合、relとtypeは変わりません。これは、ブラウザにリンク先の文書（テキストベースのスタイルシート）の形式と目的を知らせます。
- hrefにはファイル名と拡張子.cssを指定します。.htmlドキュメントと同じフォルダにある限り、リンクに必要な情報はこの2つだけです。
-
点滅させたいテキストを選択します。HTMLドキュメントの本文で、テキストを<span >Blinking text here</span>で囲みます。
- クラスの名前は何でもいいし、classの代わりにidを使ってもいい。もちろん、"Blinking text here "を好きなテキストに変えてもいい。
-
CSSアニメーションを適用する。.cssファイルに戻り、"アナウンス "クラスを.announce{ animation-name: blinkingText; animation-duration：1.2s; animation-iteration-count: infinite; }.
- animation-nameはあなたが選んだものでよく、そのアクションはCSSファイル内で別々に定義されます。
- animation-durationは、アニメーションが完了するまでの時間を定義します - これが指定されていない場合、アニメーションは発生しません。上記の例では、シーケンスは1.2秒かかりますが、点滅を速くしたり遅くしたりするために異なる時間をテストすることができます。
- animation-iteration-countには数値を指定することができます。4と入力すると、ページロード時にテキストが4回だけ点滅し、その後停止します。また、"infinite "と指定すると、永遠に点滅し続けます。
- classの代わりにidを使用する場合は、.announcementを#announcementに置き換えます。
-
アニメーションの動作を定義する。今のところ、コンピュータが知っている唯一のことは、1.2秒ごとに無限に何かが起こるということです。点滅するテキスト・アニメーションを作成するには、CSSドキュメントでblinkingTextを定義する必要があります。color: black;}から{color: transparent;}へ@keyframes blinkingText{ }を入力してください。
- 黒から半透明になることで、設定したアニメーションの間隔で点滅するように見える。
- パーセンテージを使って段階を追加することもできる。color: black;}から{color: transparent;}の代わりに、0% {color: black;}と入力できます。50% {color: red;} 100% {color: translucent;}と入力すると、テキストが黒から赤、半透明へと点滅します。
- 色名を使う代わりに、色の前に#を付けると、ウェブサイトの背景に合わせることができます。
コメント
最新を表示する
NG表示方式
NGID一覧