お知らせ
2023.12.5(Tue)
技術
2018.4.18(Wed)
jQueryライブラリを使用して、テキストにアニメーション効果を簡単に実装する方法
目次
こんにちは、樋口です。
今回は、テキストにFlashの様なアニメーション効果をつけることができるライブラリ、jQuery TextFXについてご紹介します。
今回は下記ライブラリを使用して説明をしていきます。
- jQuery
- 1.10.2
- jQuery TextFX
- 1.0.1
- BootStrap
- 3.2.0
ライブラリの入手
jQuery TextFXは下記サイトよりダウンロードできます。
jQuery TextFXダウンロード(GitHub)
ファイルダウンロード後、ZIPファイルの中身の下記ファイルを任意の場所へ解凍します。
– jquery.transit.js
– jquery.textFx.js
これで準備は完了です。
HTMLファイル
初めに、HTMLファイルを作成します。
– index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>jQuery TextFXサンプル</title>
<link rel="stylesheet" href="./bootstrap.min.css">
<style type="text/css">
<!--
.container {
width: 1160px;
margin: 0 auto;
padding: 50px 40px;
box-sizing: border-box;
}
.tatle-style {
margin: 0 0 50px;
padding-bottom: 15px;
border-bottom: 1px solid #eeeeee;
}
-->
</style>
</head>
<body>
<div id="wrap">
<div class="container">
<div class="col-lg-12">
<div class="form-group" style="text-align: center;">
<h1 class="tatle-style">jQuery TextFXサンプル</h1>
</div>
<div class="form-group">
<span></span>
</div>
<form class="form-signin" id="commentForm">
<div class="col-lg-12" style="margin-top: 10px;">
<div class="form-group">
<div class="col-lg-12" style="text-align: center;">
<span class="test" style="font-size: 26px;">株式会社AMGSolution</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./jquery.transit.js"></script>
<script type="text/javascript" src="./jquery.textFx.js"></script>
<script type="text/javascript" src="./test.js"></script>
</body>
</html>40行目：
jQuery TextFXでアニメーションをつける、文字要素を記載しています。次項のjavaScriptで、「class=”test”」に対して処理を有効にしていきます。
49～50行目：
jQuery TextFXで使用するjavaScriptを読み込みます。
以上で、HTMLは完成です。次に、アニメーションをONにするための、javaScriptについて説明します。
javaScriptファイル
ライブラリ実行用のjavaScriptファイルを作成します。
初めに、下記に主なパラメーター設定を記載します。
| パラメータ | 内容 |
|---|---|
| type | アニメーションの種類を設定(fadeIn、slideIn、rotate) |
| iChar | アニメーションを有効にする文字数を設定 |
| iAnim | アニメーションの実行速度を設定 | direction | スライドインの開始方向を設定 |
実行結果
test.js(フェイドイン)
$(function() {
$('.test').textFx({
type: 'fadeIn',
iChar: 20,
iAnim: '1000'
});
});
test.js(スライドイン)
$(function() {
$('.test').textFx({
type: 'slideIn',
iChar: 20,
iAnim: '1000',
direction: 'top'
});
});
test.js(一文字表示)
$(function() {
$('.test').textFx({
type: 'rotate',
iChar: 750,
iAnim: '300'
});
});
最後に
今回紹介したライブラリを使用すれば、文字列へのアニメーションが簡単に設定できます。使用手順も簡単なため、ぜひお試しください。
今後もjavaScriptの便利ライブラリについて、紹介していけたらと思っています。それではまた。
《関連記事》
ITエンジニアリング事業部 リーダー
I.Higuchi
技術を中心に、言語の入門編や便利なライブラリ紹介など、技術のお役立ち情報をご紹介します。
MOST VIEWED ARTICLES
よく見られている記事
