メインビジュアルのテキストをお洒落なアニメーションにしたい【JQuery】

お疲れ様です!サイトを運営する時にお客様からなんか見た目をカッコよくしたいって言われた事ありませんか?

そんな時に私は重要なメインビジュアルにアニメーションを付与したりします。

ちょっとしたカスタマイズでお客様に喜んで頂けるので非常に好きな仕様です

さて、今回はそんなテキストをふわっと浮かび上がらせたり横からビュンって出てきたり色々できるJQueryを使ったやり方を解説したいと思います。

メインビジュアルのタイトルをアニメーション化

こんな動画のようなアニメーションを簡単に実装できるようになります!

これだけではなく、文字が下からとか色を変えたりだとか色々できますが
今回は簡単な実装方法でカスタマイズは環境に併せて調整してみてください

使用するJQuery+プラグインの紹介

JQueryについては割愛させて頂きますが別記事にてご紹介したいと思います。

まずはJQueryにプラグインを追加しましょう

textillate.js

こちらのJQueryのプラグインを使います。
https://github.com/jschr/textillate

コードをダウンロードして保存してください。

textillate.jsをアップロード

続きまして、ダウンロードしたファイルをご自身のサーバーへアップロードします。

アップロードするファイルは以下の通りです。

  • 使うファイルは3つ【assetsフォルダ内】
  • jquery.fittext.js
  • jquery.lettering.js
  • animate.css

この3つのファイルををサーバーにアップロードしてください。

って公式には書いてましたが、もう一つ使います。

jquery.textillate.js

textillate.jsの使い方

ではアップロードしたjsファイルを読み込んでいきましょう!

cssなどと同じで<head></head>の中に追記して読み込ませましょう

<script src="/js/jquery.fittext.js"></script>
<script src="/js/jquery.lettering.js"></script>
<script src="/js/jquery.textillate.js"></script>

<link rel="stylesheet" href="/css/animate.css">

これであなたのホームページ上でtextillate.jsが使えるようになってます。では最後にどのように使っていくか説明します

textillate.jsの動かし方

メインビジュアルにh1タグを利用する機会が多いと思うのでこちらを例に動かしてみましょう。

<h1 class="title">キャッチコピーです</h1>

ここでh1タグにもclassを付与してますが、基本的にJQueryの動かし方はclass指定で動いているのがほとんどです。
このclassにtitleがあった場合、何かを後から付与したりする動きをします。

今回のtextillate.jsが動くスクリプトの書き方はこうなります

    $(function () {
	$('.title').textillate();
})

これはJQueryの書き方で基本的な事ですが
.titleに対して.textAnimationを使うとする書き方です

<br>タグなどは無視されますので
コーディングを変えて下さい

まとめ

JQueryもCSSもjsも読み込んでいたんですが
まんまと公式の記載にはまりました。

必要ファイルが不足してますので私のやり方でやれば実装できますので
ご安心くださいませ!

これで見事!アニメーションのテキストが出来上がりました!
お洒落度がグンと増しますね

以上

最後までご覧いただきまして有難うございました!