クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

jQuery CSS

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

投稿日:

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。
Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメーション(動き)を付けることができます。

公式サイトでAnimate.cssを使うとどんなアニメーションを付けることが出来るかが確認できます。
かなり色々なアニメーションを付ける事ができますね。
早速使ってみましょう!

Animate.cssの基本

では一番簡単なものを作っていきます。

HTML側

2行追加するだけで動作します。

[ 実行結果 ]
画面が表示された時に「bounce」という文字がバウンドして表示されます。

[ 2行目 ]
Animate.cssを読み込んでいます。
本番で使う場合はダウンロードして使ってくださいね。

[ 3行目 ]
普通のdivタグですが「class」に注目です。
Animate.cssを使うためには「animated」クラスと「アニメーションの種類」クラスが必要です。
上記の例だと「bounce」というアニメーションの種類のクラスを指定しています。
この「bounce」を別のものに変更すると違うアニメーションを作ることができます。
簡単ですね!

アニメーションの種類はたくさんありますので、公式サイトアニメーションクラスの種類を参考にしてください。

ただ、このままだと画面が表示された時に自動でアニメーションされてしまうので、あまり使い勝手が良くありません。
次に「ボタンがクリックされた時にアニメーション」「マウスオーバーされた時にアニメーション」も作ってみましょう!
サンプルも作りました。

ボタンがクリックされた時にアニメーション(Animate.css)

実現するためにはHTMLとスクリプトが必要となります。
簡単に説明すると「ボタンが押された時」に「アニメーションさせたい要素にスクリプトでクラスを追加する」という処理を作ります。

HTML側

[ 1行目 ]
jQueryを読み込んでおきます。

[ 2行目 ]
idを付けます。
注意点として「animated」クラスや「アニメーションの種類」クラスは付けないでおきます。

[ 3行目 ]
ボタンにもidを付けておきます。

スクリプト側

[ 1〜9行目 ]
「animateCss」という関数を定義しています。
内容は少し難しいので、理解できなくても問題ありません。

簡単に説明すると「対象の要素」に「animated」というクラスと「引数で渡されたクラスを」追加します。
そしてクラスの追加により発生したアニメーションが終了したタイミングで「追加したクラスを削除」します。
※クラスの削除をしておかないと、もう一度クリックした時にアニメーションしなくなります。

[ 12〜14行目 ]
ボタンがクリックされると、上記の「animateCss」関数を呼び出して「animated」と「bounce」クラスを追加します。

上記でボタンをクリックした時に指定のアニメーションを実行させることができます。

マウスオーバーされた時にアニメーション(Animate.css)

「ボタンがクリックされた時にアニメーション」とほとんど同じです。

HTML側

スクリプト側

[ 12〜14行目 ]
ここだけが少しだけ違います。クリックでは無く「マウスオーバー」した時に実行されます。

比較的に簡単に実装できるので、機会があれば使ってみてください。
サンプルも作っています。

-jQuery, CSS

執筆者:

関連記事

CSS テキストエリアのサイズ変更機能を無効にするには?サンプル付き

たいていのブラウザで、テキストエリアのサイズはユーザーが自由に変更できるようになっています。 ユーザーにとっては便利な機能ですが、テキストエリアのサイズを自由に変更されすぎるとレイアウトが崩れる原因に …

CSS 丸、正円の中に数字・文字を書く!(サンプル付き)

良くあるデザインで丸の中に数字や文字が入っているものがありますよね。 画像にしてしまうのも良いですが、汎用性も考えて出来ればCSSでやってしまいたいですね。 中の文字や大きさも自由に変更できるので、後 …

CSS 画像の上に文字を重ねて表示させる(サンプル付き)

今回は画像の上に文字やタイトルを重ねて表示してみましょう! 少しオシャレで良い感じですよね。   こんな仕組みのものを作ります 画像をきっちりと囲む領域を作り「position:relati …

CSS テキストボックスのフォーカス時の青枠を無効にする

もしかするとChromeだけかもしれませんが、テキストボックスや画像にフォーカスされた時に青い枠が出てしまいます。 ↓こんなのです。 違和感がありますので、解除する方法を調べました。 CSSの設定のみ …

jQuery アコーディオンメニューを自作サンプル(slideToggle)

クリックすれば開閉される「アコーディオンメニュー」は良く使うと思います。 プラグインも多く出ており簡単に実装することができますが、プラグインだとデザインを変更する時に苦労したりします。 プラグインから …


comment

メールアドレスが公開されることはありません。