今日の人気記事

  1. select要素の複数選択フォームを実装「Multiple Select」
  2. クリック操作で時計回りにスライドする画像ギャラリー「Aperture」
  3. テーブルにページャーを「PaginateMyTable」
  4. 画像の拡大・縮小と移動(パン)「pan and zoom 」
  5. デジタル時計のカウントダウンタイマー「TimeTo」

背景色のフェードイン・フェードアウト 「Color Cycle」

スポンサーリンク

背景色のフェードイン・フェードアウトを実行するプラグイン「Color Cycle」を紹介します。

jQueryプラグイン「Color Cycle」

このプラグインを使えば、指定した要素の背景カラーをアニメ効果でフェードイン・フェードアウトすることができます。

  • 背景色のカラー
  • フェードイン・アウトの時間
  • カラーが変わる周期
スポンサーリンク

それではデモページをご覧ください。

「Color Cycle」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Color Cycleのデモでーす。">
<title>Color Cycle - jQueryプラグイン</title>
<style>
p {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 100%;
}
#demo {
  margin-top: 20px;
  width: 300px;
  height: 250px;
}
</style>
</head>
<body>
<h1>Color Cycle のデモでーす。</h1>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<div id="demo"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="jquery.colorcycle.min.js"></script>
<script>
$(function(){
  $('p').colorCycle();
  $('#demo').colorCycle({
    colors: ['blue', 'red', 'green'],
    animationStartRange: 5000,
    animationEndRange: 10000,
    loopStartRange: 1000,
    loopEndRange: 2000
});
});
</script>
</body>
</html>
スポンサーリンク

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