最初にボタンをクリックするとタイプライターで文字を打ち込んでいるように表示させる方法をお伝えします。コピペで出来ると思いますので是非試してみて下さい。サンプルはこのボタンをクリックしてみて下さい。
ボタン有りバージョン
上のサンプルを使う場合は、このままHTML、CSS、JavaScript にそれぞれコードを貼り付けると使えます。ボタンや文字を好みの色や大きさに変えることも可能です。
HTML（記事作成画面）
<button onclick="typeWriter()" class="w3-button w3-light-grey">ここをクリック</button><br>
<p1 id="demo"></p1>※ここをクリックという文字は好きな文字に変えれます。
CSS（スタイルシートもしくは個別記事用のカスタムCSS）
/* クリック時に表示される文字の部分*/
p1 {
font-size: 20px;/*文字のサイズ */
font-weight:bold;/* 太字 */
color: blue;/* 文字の色 */
line-height: 100px;/* 表示される文字の上下スペース */
}
/* ボタン */
button{
width:130px;
height:30px;
color: white;
font-weight:bold;
background-color:#a9a9a9;
border:none;
border-radius: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
/* ボタンマウスオーバー時 */
button:hover{
background: #00bfff;
box-shadow: 0 8px 16px -6px rgba(0,0,0,0.2);
transform: translateY(-2px);
transition: all .3s ease;
}
/* ボタンクリック時 */
button:active {
background: #0000ff;/* 背景色 */
}JavaScript（テーマファイルか個別記事のカスタムJavaScript）
/* タイプライター風文字表示 */
var i = 0;
var txt = 'こんな風にここにテキストが表示されます。これを使えばアイデア次第で読んでいて面白いブログが書けるかも！'; /* 表示させたい文字 */
var speed = 50; /* 表示スピード */
function typeWriter() {
if (i < txt.length) {
document.getElementById("demo").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}ボタンなしバージョン
次はボタンの無いバージョンで繰り返しタイプライター風に文字が表示される方法です。これはHTMLとCSSだけで出来ます。サンプルはこんな感じです。
次はこんな感じのものを試して見ます。
HTML
<p class="pt">次はこんな感じのものを試して見ます。</p>CSS
/* ボタンなしVer */
.pt{
border-right: solid 5px rgba(0,255,0,.75);
white-space: nowrap;
overflow: hidden;
font-size: 18px;
color: black;
font-weight: bold;
}
/* Animation */
.pt{
animation: animated-text 4s steps(29,end) 1s 1 normal both,
animated-cursor 600ms steps(29,end) infinite;
animation-iteration-count: infinite;/* アニメーションの回数。数字を指定した場合はその回数だけ繰り返します。 */
}
/* text animation */
@keyframes animated-text{
from{width: 0;}
to{width: 340px;}/* ここは右端の地点を指定しています。文字の長さに合わせて変更可 */
}
/* cursor animations */
@keyframes animated-cursor{
from{border-right-color: blue;}
to{border-right-color: transparent;}
}
まとめ
ブログのちょっとしたアクセントに使うと面白いと思いますので試して見てください。
