今日の人気記事

  1. 画像ポップアップ・スライドショー「Lightbox 2」
  2. シンプルな日付選択フォームを実装「Date Selector」
  3. マウス操作でくるくる回せる円形の画像ギャラリー「Tiny Circleslider」
  4. シンプルなレスポンシブ・トップメニュー「PrMenu」
  5. 入力した文字数/最大文字数をカウント「BootStrap Maxlength」

指定した要素の高さや横幅にアニメ効果を「CSS Animate Auto」

スポンサーリンク

指定した要素の高さや横幅にアニメ効果を実装するプラグイン「CSS Animate Auto」を紹介します。

jQueryプラグイン「CSS Animate Auto」

このプラグインを使えば、指定した要素の高さ(height)、横幅(width)をびよーん大きくしたり、じわじわと小さくしたりといったアニメ効果を実装することができます。

オプションでは、アニメ効果やその速度を設定することができます。

スポンサーリンク

それではデモページのアニメーションをご覧ください。

「CSS Animate Auto」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="CSS Animate Auto のデモでーす。">
<title>CSS Animate Auto - jQueryプラグイン</title>
<style>
[id*="demo"] {
  width: 300px;  
  height: 250px;
}
#demo1 {
  border: solid 1px red;
}
#demo2 {
  border: solid 1px blue;
}
</style>
</head>
<body>
<h1>CSS Animate Auto のデモ。</h1>
<div id="demo1">ああああああああああああああ</div>
<div id="demo2">いいいいいいいいいいいいいい</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.cssAnimateAuto.js"></script>
<script>
$('#demo1').cssAnimateAuto('height 8s linear');
$('#demo2').cssAnimateAuto({
  transition: 'width 4s ease-out',
  action: 'open'
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)