タイピングエフェクト風メニューバー[ｊQueryとCSS3]

taka_2015
|
2015年5月25日
| コメントはまだありません
| JavaScript

CSS3とjQueryの便利プラグインを利用して、タイピングエフェクト風メニューバーを作成しました。

WEBページにタイピングによって入力されたように表示されます。

導入しているソースは、本来の使用方法で使用すると文字入力のみです。
今回CSS3にてフォントサイズとリンク設定加えることによって、メニューとして使用できるようにしました。

プラグイン「t.js」の配布サイトにてダウンロードする事ができます。
使用したのは、t.jsファイルのt.min.jsです。

↓以下が実際のソースサンプルです。

▼JavaScript

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/t.min.js"></script> 
<script type="text/javascript">
$(function(){
  $('.typewriter').t({
　　speed : 60,		//タイプスピード設定
　　caret : true	//カーソルを消す設定
  }); 	
}); 
</script>

▼CSS

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
.typemenu{
	font-family: 'Open Sans', sans-serif;
	font-size:5em;
	text-align:left;
}

.typewriter {
    background: #FFF;
    padding: 20px 40px;
}

.typewriter a {
    float: left;
    margin-right: 60px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    font-weight: bold;
}

a:link,a:visited {color:#000000; text-decoration:none;}

.top:hover { 
    text-shadow: #FFCC00 0px 0px 20px;
    color: #D90317;
}

.menu01:hover { 
    text-shadow: #FFCC00 0px 0px 20px;
    color: #D9230B;
}

.menu02:hover { 
    text-shadow: #FFCC00 0px 0px 20px;
    color: #8800E3;
}

.menu03:hover { 
    text-shadow: #FFCC00 0px 0px 20px;
    color: #04E319;
}

.menu04:hover { 
    text-shadow: #FFCC00 0px 0px 20px;
    color: #D9C701;
}

.menu05:hover { 
    text-shadow: #FFCC00 0px 0px 20px;
    color: #EA4515;
}
</style>

▼HTML

<body>
<div id="wrapper">
	<div id="header">
		<h2>タイピングエフェクトデモ</h2>
		<p>動作を再度みるときは更新ボタンおよびF5にて確認してください。</p>
	</div>
	<div id="nav01">
		<div class="typewriter" >
			<span class="typemenu"><a href="#" class="menu01">メニュー01</a><br/>
			<a href="#" class="menu02">メニュー02</a><br/>
			<a href="#" class="menu03">メニュー03</a><br/>
			<a href="#" class="menu04">メニュー04</a><br/>
			<a href="#" class="menu05">メニュー05</a></span>
		</div>
	</div>
</div>
</body>

今回、参考にさせていただいたのは、
『タイプライター風アニメーションが1行で作れるt-js – ASCII』さんです。
ありがとうございます。

デモページは、こちら

JavaScript