超簡単に、文字がフェードインするテキストエフェクトをかけるjQueryプラグインつくりました!

「jQueryとかあんまりわかんない」ってひとでも、超かんたんにテキストがかっこよくフェードインしてくるjQueryプラグインを作ったのでご紹介いたします。

超かんたんでそこそこカッコいいテキストエフェクトが実装できる「easyng.js」

だいたいプラグイン解説ページに書いてあるのですが、あらためてこちらでも説明しておきますね!

まずは、[buttonlink url=”https://satohmsys.info/files/easyng.js/” text=”こちらからファイルをダウンロードして下さい。”]

easyng.jsの実装方法ステップ1:javascriptファイルの読み込み

    

2行目のeasing.compatibility.jsはどっちでもいいです。

jQueryは1.8.3以上を読み込んでください!

easyng.jsの実装方法ステップ2:HTMLの準備

HTMLソースを準備しましょう。たったの1行です。

かんたん!

data-ftと書かれた中のテキストがフェードインしてきます。

easyng.jsの実装方法ステップ3:オブジェクトにプラグインの動作する関数を紐付ける

$('.fad').easyng({      pattern : 'easeInOutBounce',      dir : '' ,       distance : '5em' ,      time : 150 ,      showSettingData : false      });

pattern

イージングエフェクトの種類です。ステップ1でjs/jquery.easing.compatibility.jsを読み込ませている場合のみ指定します。基本的には省略してくれて構いません。

dir

こちらも省略可。

  • top:下から上|
  • bottom:上から下|
  • left:左から右|
  • right:右から左|

distance

エフェクトがかかる距離です。大きな値を指定すればするほど、遠くからフェードインしてきます。

time

エフェクトにかかる時間です。大きな値を指定すればするほど、ゆっくりとフェードインします。

showSettingData

これは省略して結構です。コンソールで設定データが確認できるだけです。

おまけ:cssを指定する

これは必要に応じてなので、どちらでもいいです。

ただ、見出しやメインヴィジュアルのキャッチコピーに使うこと(むしろその他に使いどきがないかも…)を考えているので、フォントを変えたり大きくしたり太字にしたり、色々あるでしょう。

.fad{    font-size : large;    font-weight : bold;  }  

対応ブラウザ

Firefox推奨です。

フェードインぐらいなら全てのブラウザで実現しますが、cssのpositionの挙動の都合で、「左から右」「上から下」のみしか対応していないものが多いです。

position:absoluteで何とかしようと思いましたが、1文字ずつの位置情報を取得して付与しようと思うと面倒でした。。すみません。。


以上、ものすごく単純な構造なのですが、改変・再配布は自由なMITライセンスということにしているので、ぜひともお気軽に使っていただければと思います。

でわ!

超かんたんなテキストエフェクトjQueryプラグイン

超かんたんなテキストエフェクトjQueryプラグイン easyng.js

シェアする

  • このエントリーをはてなブックマークに追加

フォローする