テキストアニメーションを簡単実装！軽量jQueryプラグイン「Textyle.js」作りました。
posted : 2019.01.06
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。
個人的にテキストアニメーションが好きです。
このサイトでも「Textillate.js」というプラグインを使用してますが、もっとさりげないエフェクトのものが欲しいな〜と思っていました。
Textillateもいいんですけど、ちょっと動きが大げさなんですよね。
というわけで。
エフェクトも実装もシンプル！軽量テキストアニメーションjQueryプラグインを作ってみた
多機能ではないですがちょっとしたJSとCSSの記述で使用できます。
名付けて「Textyle.js」（テキスタイル）。
シンプル機能なので当たり前ですがサイズも1KB以下と軽量です。
詳細は後述しますが、上下左右（斜め含む）からの移動とフェードが可能。エフェクト後に発生させるコールバックの指定も可能です。動きは↓こんな感じ。
特徴
- 指定要素内テキストをプラグインの処理で一文字ずつ切り分けて、それぞれspan要素で囲みます
- 個々のspan要素を順番にアニメーションさせます
- CSS側の記述で移動とフェード効果をある程度自由に組み合わせられます
- 出現時（in）のみ効果が適用されます（out時の挙動が必要な場合はコールバックorメソッドチェーンなどで適宜実装して下さい）
- オプション・コールバック指定可能
多機能プラグインももちろん便利で素晴らしいです。
ただ一方で、こういうエフェクトをサイトで何種類も使うことってあまり無いんじゃないかとも思います（やり過ぎると下品になっちゃうし）。
個人的にはoutもそこまで必要なし。
機能はシンプルで良いから、出来るだけ諸々スリムにしたいと言う思いから（半ば自分の為に）作ってみました。
ダウンロード
githubで公開しています。
リンク先画面右上「clone or download」→「download ZIP」からレッツダウンロード。
使い方
READMEにも書いてありますが（拙い）英語なのでこちらでは日本語で解説します。
JS
読み込み
jQueryとダウンロードしたファイルの中にあるtextyle.min.js（若しくはtextyle.js）を、下記のような感じでbody閉じタグの直前に挿入すればOK。
... <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="textyle.min.js"></script> </body>
呼び出し
一番シンプルな呼び出しはオプション指定なしの下記記述です。targetには好きな要素を指定。
あとはクリック時なりページ読み込み時なり、好きなタイミングで発火させちゃって下さい。
オプションについては後述します。
$('target').textyle();
CSS
対象要素に指定するプロパティ
opacity: 0;
対象要素内のspan要素に指定するプロパティ
span要素はプラグイン側の処理で自動的に生成されます。
ここの指定でエフェクト内容がある程度自由に決められます。
position: relative; top: xxx; //正の値で下から、負の値で上から出現 left: xxx; //正の値で右から、負の値で左から出現 opacity: 0; //指定するとフェードイン効果
記述例）
target {
opacity: 0;
}
target span {
position: relative;
top: 10px; //topとleft同時指定で斜めの動き
left: 10px;
opacity: 0;
}
オプション
オプションもいくつか用意しました。
何も指定しないと以下のデフォルト値で処理されます。
$('target').textyle({
duration : 400, //エフェクト時間(ミリ秒)
delay : 100, //文字間のエフェクト間隔(ミリ秒)
easing : 'swing', //エフェクトのイージングパターン
callback : null //エフェクト完了後の処理（コールバック）
});
jQueryのイージングは基本的に linear と swing ですが、Easing Pluginを使用することでバリエーションを増やすことができます。
その場合は下記スクリプトをjQueryの次（jQuery → Easing Plugin → Textyle.jsの順）に読み込んでやります。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
記述例）
$('target').textyle({
duration : 700,
delay : 200,
easing : 'easeInExpo', //Easing Pluginでイージングを拡張
callback : function(){
$(this).css({
color : 'coral',
transition : '1s',
});
}});
デモ
デモでは１段目がオプション無し、２段目はコールバック含めオプションを指定してます。
良かったらコードも参考にしてみて下さい。
※右下「rerun」ボタンでリロード
ちょっとしたサイトのアクセントに！
オススメはあまりCSSで大きい値を設定しないこと。程よいさじ加減で使うと良い感じになるかと思います。
見出しでアクセントとして使ったり、メインビジュアルと重ねて使うと手軽にお洒落な海外のサイト感が出るかと。
ちなみにフリップアニメーションバージョンも近日リリース予定です。
→フリップ版もリリースしました。
諸々どなたかのお役にたてばコレ幸い。
それでは！
