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

2015.4.19 jQuery

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

 

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

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

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

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

<script type="text/javascript" src="http://code-jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.compatibility.js"></script>
<script type="text/javascript" src="js/easyng.js"></script>

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

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

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

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

<i class="fad" data-ft="The most of EASY"></i>

かんたん!

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

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。