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

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


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

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

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


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


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
  });
});



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

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



スポンサードサーチ

スポンサードサーチ

スポンサードサーチ

オプション


オプション名初期値説明
speed1000CSSのスピード(ms)
delay200次の文字までの時間(ms)
left0leftの移動量(px)
top0topの移動量(px)
scale1transformのscale変化量

rotateY0 transformのrotateY変化量
rotateX0transformのrotateX変化量
translateZ0transformのrotateZ変化量
letterSpacing$content.css(' letterSpacing')letter-spacing変化量
easing'ease-out'transition-timing-functionで指定できるeasing,
backgroundColor'transparent'変化させたい背景色
isRandomScalefalsescaleをランダムの値にするか。(delayで指定した値までのランダム)
isRandomPositionfalseleft,topをランダムの値にするか。(left,topで指定した値までのランダム マイナスの値も含む 200の場合 -200 ~ 200となる)
isRandomRotateYfalserotateYをランダムの値にするか。(rotateYで指定した値までのランダム)
isRandomRotateXfalserotateXをランダムの値にするか。(rotateXで指定した値までのランダム)
isRandomTranslateZfalserotateZをランダムの値にするか。(rotateZで指定した値までのランダム)
isRandomSpeedfalse speedをランダムの値にするか。(speedで指定した値までのランダム)
isRandomDelayfalsedelayをランダムの値にするか。




オプションいろいろ試せるサイトがこちらです。


ここで使ってみてしっくりきたらそのままコピペできます。



ぜひ使ってみてください。


これからもWebページ作る上でのお役立ち情報たくさん紹介していきたいと思いますので、よろしくお願いします。





以上です。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です