TTT:ContorraによるjQueryテキストアニメーションプラグイン

作業タイトルはTTT、またはシャッフルテキスト変換です。

デジタル代理店コントラの特別注文により設計。

このプラグインを使用すると、オブジェクト自体または他のオブジェクトの「クリック」または「ホバー」のイベントを通じてテキストを別のテキストに変更し、各文字を変換することができます。 現在のテキストの各文字は、そのタイプの文字配列(大文字、小文字、数字、句読点など)の最短パスに沿って移動し、最終結果に達すると停止します。 その結果、回転するシンボルのカオスから特定のテキストが徐々に現れる様子を観察します。



デモ



インストール手順:

-jQueryを接続する

- プラグインファイル(2 kb)をダウンロードするか、上記の例のコピーしてjQueryの後に接続します(ダウンロード時にロシア語の文字がブラウザーによってトランスコードされないようにします)

-テキストを含むオブジェクト、日付属性data-ttt-newを変換先のテキストとともにhtmlに追加します。 例:<div data-ttt-new = "Future Text">ベーステキスト</ div>

-処理されたオブジェクトでTTTプラグインを呼び出します。

$(document).ready(function() { $('div').ttt(); });
      
      





標準に従って、このオブジェクトの上にマウスを移動すると、そのテキストが新しいものに変わり、ホバーを失うと、60fpsの速度で元のオブジェクトに戻ります。また、いくつかの設定があります。

-イベントをトリガーするオブジェクトを設定します: 'btn': 'selector'-クリックしてイベントのタイプを設定します: 'event': 'click'-キャラクター変更速度: 'fps':1秒あたりのフレーム数

例:

 $('div').ttt({ 'btn':'div', 'event':'click', 'fps':15 });
      
      





このバージョンでは、カスタムコールバック関数は実装されていません。

---

オリジナル記事



All Articles