テキストを1文字ずつフリップ！テキストエフェクトを簡単実装できる軽量jQueryプラグイン「TextyleFLIP.js」作りました。
posted : 2019.01.14
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。
先日作ったjQueryプラグイン「Textyle.js」。
ちょっとしたテキストエフェクトを少しのjQueryとCSSで簡単に実装できるプラグインですが、少しアレンジして、フリップアニメーション版の「TextyleFLIP.js」もリリースしてみました。
テキスト１文字ずつにフリップアニメーションを簡単実装！軽量jQueryプラグイン「TextyleFLIP.js」
こちらも「Textyle.js」と同じく、多機能ではないですがちょっとしたJSとCSSの記述で使用できます。
Textyle.jsの姉妹プラグインなので、「TextyleFLIP.js」（テキスタイルフリップ ）と名付けました。
ちなみにファイルサイズもTextyle.jsと同様、1KB以下と軽量。
ちょっとGIFアニメが重いんですが。。動きは↓こんな感じ。
特徴
- 指定要素内テキストをプラグインの処理で一文字ずつ切り分けて、それぞれspan要素で囲みます
- 個々のspan要素を順番にアニメーションさせます
- CSS側の記述で移動とフェード効果をある程度自由に組み合わせられます
- 出現時（in）のみ効果が適用されます（out時の挙動が必要な場合はコールバックorメソッドチェーンなどで適宜実装して下さい）
- オプション・コールバック指定可能
やってることはほぼTextyle.jsと同じですね。
ダウンロード
githubで公開しています。
リンク先画面右上「clone or download」→「download ZIP」からレッツポチ。
使い方
JS
読み込み
jQueryとダウンロードしたファイルの中にあるtextyleF.min.js（若しくはtextyleF.js）を、下記のような感じでbody閉じタグの直前に挿入すればOK。
... <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="textyleF.min.js"></script> </body>
呼び出し
一番シンプルな呼び出しはオプション指定なしの下記記述です。targetには好きな要素を指定。
あとはクリック時なりページ読み込み時なり、好きなタイミングで発火させちゃって下さい。
オプションについては後述します。
$('target').textyleF();
CSS（必要に応じてベンダープレフィクスを要指定）
対象要素に指定するプロパティ
opacity: 0;
perspective: xxx; //フリップ時の立体感。値が小さいほど3D感が増す。
対象要素内のspan要素に指定するプロパティ
span要素はプラグイン側の処理で自動的に生成されます。
ここの指定でエフェクト内容がある程度自由に決められます。
transform : rotateY(xxxdeg); //回転がY軸起点（横回転）かX軸起点か（縦回転）。rotateXとの同時指定可 transform-origin : xxx; //どのポイントを中心にして回転するか。よくわからなければ指定なしでもOK opacity: 0; //指定するとフェードイン効果
記述例1）
target {
opacity: 0;
perspective : 200px;
}
target span {
/* flip effect */
transform : rotateY(-90deg);
/* fade effect */
opacity: 0;
}
記述例2）
target {
opacity: 0;
perspective : 200px;
}
target span {
/* flip effect */
transform : rotateY(-90deg) rotateX(45deg);
transform-origin : -50% 75%;
/* fade effect */
opacity: 0;
}
オプション
オプション構成も基本的にTextyle.jsと同じ。
異なる点は、easingの指定がCSSにおけるイージング指定になることです。
その為「TextyleFLIP.js」ではイージングをcubic-bezier()で指定することも可能。
何も指定しない場合は以下のデフォルト値で処理されます。
$('target').textyleF({
duration : 1000, //エフェクト時間(ミリ秒)
delay : 150, //文字間のエフェクト間隔(ミリ秒)
easing : 'ease', //エフェクトのイージングパターン
callback : null //エフェクト完了後の処理（コールバック）
});
記述例）
$('target').textyleF({
duration : 2000,
delay : 200,
easing : 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
callback : function(){
$(this).css({
color : '#fff',
transition : '1s',
});
$('.desc').css('opacity',1);
}
});
デモ
デモでは１段目がオプション無し、２段目はコールバック含めオプションを指定してます。
良かったらコードも参考にしてみて下さい。
※右下「rerun」ボタンでリロード
Textyle.jsよりもキャッチー。部分的なアクセントに！
というわけで基本的にTextyle.jsと構造的なところは一緒です。わざわざ分ける必要があったのかというツッコミは華麗にスルーします苦笑。
見た感じの印象はTextyle.jsよりもTextyleFLIP.jsの方が幾分動きが派手でキャッチーですね。
複数箇所で使うというよりは限定的に、メインビジュアルなどに重ねてうまく使うといい感じになるかもしれません。
durationやdelayは少し長めの設定がおすすめ。ゆったりフリップさせた方がスマートな印象になるかと思います。
どなたかに使って頂ければこれ幸い。
