jQueryを使って簡単なアニメーションを作ろう

jQueryを使って簡単なアニメーションを作ろう

こんにちは。バランスボールの上の人、稲垣です。

先日ナカムラさんの「学生アルバイトが見た!マグネッツの3つの驚き!」がアップされた後に、数名の方から「バランスボールってどうなんですか?」と質問をいただきましたが、今のところこれといった変化は感じていません。

巷ではダイエット効果なども謳われているみたいですね。
乗り始めて半年ほどですが順調に太っているので、バランスボールのみで痩せようというのは虫が良すぎるということなんでしょう。

さて、今回はjQueryを使って簡単なアニメーションを作ってみます。
一昔前にFLASHで作っていたような、サイトのメインビジュアルをちまちま動かすものです。

「米やまぐ蔵」の文字が一文字ずつ出現し、最後におにぎりの画像へ変わるアニメーションを作ってみたいと思います!

img140917_1

目次

デモ

htmlとcss

アニメーション

終わり

デモ

まずはデモページになります。
少し気持ち悪い動きですが、完成はこのようになります。

htmlとcss

それでは早速作っていきましょう。htmlとcssは以下のようになります。

html

文字やハンコ、おにぎりの画像をどんどん置いていきます。

おにぎりの画像は一番上に重ねるので最後に記述しましょう。

また、今回はeasingのプラグインを使用しているので忘れずにhead部分で読み込んでおいてください。

CSS

各文字の位置やハンコのサイズをcssで指定します。

この時指定する位置はアニメーションの始点になります。

作成中は #maguzo の overflow:hidden; と #hanko の opacity:0; は削除していた方が動きが視認できて作りやすいかと思います。

img140917_2

アニメーション

各要素に動きをつける

それでは肝心の動きについて記述していきます。

jQueryのanimate関数を使って各要素の終点を指定しましょう。

ハンコは中心を基点に縮小するようにしたいのでleftの値も設定します。
あと動きがしっくりこなかったのでイージングの種類も変更してみました。

ここまでで下記のような動きになります。

全部一緒に動いてしまうのでわかりにくいですが、要素一つ一つの動きに問題ないかチェックしましょう。

実行のタイミングを指定する

先ほどのコードにdelay()を加え、実行のタイミングを調整しました。

数値は実際に動きを見ながら適宜調整します。

これで一文字ずつ順に表示される動きができました。

場面の切り替え

一連のアニメーションが終わった後におにぎりの画像に切り替えましょう。

画像は一番上に重なったまま、CSSで非表示に設定しているだけなので、フェードインの処理をハンコのアニメーションのコールバック関数に設定します。

ハンコのアニメから一拍おいて切り替えたかったので、ここでもdelay()を使用しました。

これで最初の動きと同じものになりました!

終わり

最後に今回のjQueryをまとめて載せておきます。

作ってみた感想としては、単純な動きならそんなに手間をかけることなく簡単に導入できるなと思いました。

GIFアニメなども組み合わせると、アイデア次第で色々なことができそうですね。

同じカテゴリー(WEB制作・デザイン)の記事