【アニメーション】テキストを１文字ずつ表示させるプラグイン【jQuery】

日々、使えるプラグインを紹介してます、アカリと申します。

プログラミング勉強始めて３ヶ月くらい経ちました。

現在は、地元のWeb制作会社で勤務しています。

今回は私が自身のポートフォリオを作った際に、テキストをアニメーションっぽく１文字１文字表示させる方法はないかといろいろ調べた結果、

めちゃくちゃ使えるプラグインを発見したので、使い方と実装したらこんな感じになりますよーっていうのをご紹介したいと思います。

animation.cssとwowを使った実装は以前紹介しましたが、

この方法だと、文字全部が、ばーん！！！って表示になっちゃうので。ちょっと違うんですよね〜。（説明力のなさ。。笑）

今回のテキストアニメーションは文字が現れ方、速さなど、オプションで細かく指定できるのも魅力です。

レスポンシブでも綺麗に表示されます。

それでは、さっそく使い方を説明していきます。

スポンサードサーチ

jquery.textAnimationの実装方法

まずはGitHubでプラグインをダウンロードします。

ダウンロードしましたら、以下のコードを<head>内などで記述します。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.textAnimation.js"></script>

jQueryはCDNで読み込んでいます。

jquery.textAnimation.jsのファイルをjsフォルダに入れてください。

次にHTMLです。

HTML

<div class="col-sm-12 text-right">
   <h1 class="welcome">Welcome To My Portfolio Site</h1>
</div>

これは私のポートフォリオのサイトからの抜粋になりますが・・・

要はテキストであればなんでも大丈夫です。

私は、classをwelcomeとしています。

続いてCSSです。

スポンサードサーチ

CSS

.welcome {
    padding-top: 15%;
    font-size: 50px;
    font-size: 5.0rem;
    font-family: 'Questrial', sans-serif;
    border-bottom: 2px solid #fff;
    color: #fff;
    width: 360px;
    float: right;
    text-shadow: 0 0 10px #fff;
}

.welcome span:nth-of-type(7) {
    margin-right: 10px;
}

.welcome span:nth-of-type(10) {
    margin-right: 10px;
}

.welcome span:nth-of-type(23) {
    margin-right: 10px;
}

文字の大きさやフォントなどはお好みで。

span:nth-of-type()は単語と単語の間を開けるために使っています。

type()の中には左からアルファベットを何文字目なのかを入れています。

結構便利です。

続いてJavaScriptです。

JavaScript

$(document).ready(function() {
　speed: 1000,
    delay: 200,
    left: 0,
    top: 0,
    scale: 4,
    rotateY: 200,
    rotateX: 0,
    translateZ: 100
  });
});

私が使ったオプションはこれだけですが、

まだたくさんあるので、下にまとめました。

スポンサードサーチ

オプション

オプション名	初期値	説明
speed	`1000`	CSSのスピード（ms）
delay	`200`	次の文字までの時間（ms）
left	0	leftの移動量（px）
top	0	topの移動量（px）
scale	1	transformのscale変化量
rotateY	0	transformのrotateY変化量
rotateX	0	transformのrotateX変化量
translateZ	0	transformのrotateZ変化量
letterSpacing	`$content.css(' letterSpacing')`	letter-spacing変化量
easing	`'ease-out'`	transition-timing-functionで指定できるeasing,
backgroundColor	`'transparent'`	変化させたい背景色
isRandomScale	`false`	scaleをランダムの値にするか。（delayで指定した値までのランダム）
isRandomPosition	`false`	left,topをランダムの値にするか。（left,topで指定した値までのランダムマイナスの値も含む 200の場合 -200 ~ 200となる）
isRandomRotateY	`false`	rotateYをランダムの値にするか。（rotateYで指定した値までのランダム）
isRandomRotateX	`false`	rotateXをランダムの値にするか。（rotateXで指定した値までのランダム）
isRandomTranslateZ	`false`	rotateZをランダムの値にするか。（rotateZで指定した値までのランダム）
isRandomSpeed	`false`	speedをランダムの値にするか。（speedで指定した値までのランダム）
isRandomDelay	`false`	delayをランダムの値にするか。