0120-899-952 
ホームページ制作YCOM
料金体系
制作について
制作実績
よくある質問
お問い合わせお客さんのホームページにちょっと工夫をしてあげるとすごくお客さんに喜んでもらえます。
それでアクセスが増えるわけではないけれど、クライアントのそういった部分での満足度を上げるのは少しは必要です。
制作を仕事としている人は、ちょっとしたものでも、あまり工数が変わらないのであれば差別化としてぜひやってあげるといいですね。
集客や売り上げといった方向性を見失わないように、その中で今年はちょっと見た目にもこだわってホームページに動きも入れていけたらと思います。
サイトの優劣がデザインだけで決まるわけではない、かっこいいサイトだから良いサイトとは限らないけれど、制作会社としてはデザインで選ばれるというのは大いにあるので疎かにはできません。
その１つの要素としてこういったスクリプト系をサクッと入れられると強みになりますよね。
これまでもその都度入れてきてはいたのですが、やはりそこはしくみ化しないといけないところです。
社内で使うスクリプトをしっかりと決めておいて、しくみ化でこのあたりの強みを上げていこうと思います。
さて、今回紹介するのはホームページのメインビジュアルのテキストなどに使えるアニメーションです。
文字で説明してもなかなか人が伝わらないと思うので、弊社のトップページのタイトルを見てください。
トップページでのデモ
キャッチの文字が１文字ずつ順にがふわふわと出る感じわかりますか？
これを簡単に実装するためのスクリプトを紹介したいと思います。
制作で客さんからの要望があったときに調べて見つけたスクリプトなんですが、
カスタマイズも簡単でかっこいい見出しが簡単に作れるのでオススメです。
毎回説明していますが、基本的なスクリプトを設置するまでの流れは大体どれも一緒なので、
このブログを見てその流れをつかんでいってもらえればと思います。
スクリプトの設置
ファイルのダウンロード
まずはスクリプトをダウンロードしましょう。
次のURLでダウンロードします。
jquery.textAnimation
スクリプトのアップロード
ダウンロードしたスクリプトファイルの中で使用するのは
jquery.textAnimation.js
※jQueryを読み込んでいない場合は「jquery-1.10.1.min.js」も使います
これらをホームページの任意のフォルダにアップしてください。
例えば
/js/jquery.textAnimation.js
のような感じですね。
スクリプトの読み込み
アップロードしたjsファイルをHTMLから読み込みましょう。
<head>内とかで、スクリプトを読み込みます。
<script src="./js/jquery-1.10.1.min.js"></script> <script src="./js/jquery.textAnimation.js"></script>
スクリプトを実装する
ここからは実際に設定等の設置のやり方ですね。
まずは、動作させたい見出し部分を作りましょう。
何でもいいですが、例えばこんな感じで。
<h1 class="catch">これはキャッチメッセージです</h1>
大抵こういったスクリプトは、操作する対象を作って、クラス名などで対象を指定して何らかの処理をするものです。
それを理解しているだけで、設置するのが簡単になりますよ。
次に、実際にこれを動かすためのスクリプトはこのように書いてください。
<script type="text/javascript">
$('.catch').textAnimation();
</script>
ここで、
$(‘.catch’)
という形でクラス名の指定が出てきてました。
これで、.catch というクラスの要素に対して textAnimation() を実行するという命令になるんですね。
$(‘クラス名’)に’.’でつないで、その要素を対象に操作をする。
jQueryの基本的な部分なので覚えておきましょう。
実際動かすためのソースコードはプログラムは非常に簡単ですよね。
デフォルトの動きに関してはもうこれだけですごくシンプルに動かすことができます。
このスクリプトの良いところは、オプションが充実しているというところです。
動作を決めるための様々なオプションがあります。
オプションパラメータ一覧
delay: 次の文字までの時間（ms）
left: leftの移動量（px）
top: topの移動量（px）
scale: transformのscale変化量
rotateY: transformのrotateY変化量
rotateX: transformのrotateX変化量
translateZ: transformのrotateZ変化量
letterSpacing: letter-spacing変化量
easing: transition-timing-functionで指定できるeasing,
backgroundColor: 変化させたい背景色
isRandomScale: scaleをランダムの値にするか。（delayで指定した値までのランダム）
isRandomPosition: left,topをランダムの値にするか。（left,topで指定した値までのランダム マイナスの値も含む 200の場合 -200 ~ 200となる）
isRandomRotateY: rotateYをランダムの値にするか。（rotateYで指定した値までのランダム）
isRandomRotateX: rotateXをランダムの値にするか。（rotateXで指定した値までのランダム）
isRandomTranslateZ: rotateZをランダムの値にするか。（rotateZで指定した値までのランダム）
isRandomSpeed: speedをランダムの値にするか。（speedで指定した値までのランダム）
isRandomDelay: delayをランダムの値にするか。
こちらのデモページを使えば、これらのオプションパラメータを動作を見ながら変更することができます。
jQuery textAnimation Plugin Test
むちゃ便利です！
このデモページで自分の好きな動きを再現して、プレビュー下に出てくるパラメータをコピーして使ってください。
ただ、パラメータの書き方が間違っている（？）ようなので、そのままでは動かない場合もあります。
たとえば、100pxではなくて100と書かないといけないみたいだけど、パラメータにはpxついちゃってるのでそのままでは動かなかった。
jQueryのバージョンとか関係するかよくわからないけれど、必要なところだけ変更するのが安全かもしれないです。
設置は非常に簡単でありながら、パラメータの違いでいろんな動きを表現することができます。
テキストを動かすことに関しては、ぜひこれ１つ覚えておいておくといろいろとできそうですね。
