「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プラグイン easyng.js
