背景色のフェードイン・フェードアウト 「Color Cycle」
当ページのリンクには広告が含まれています。
スポンサーリンク
背景色のフェードイン・フェードアウトを実行するプラグイン「Color Cycle」を紹介します。
jQueryプラグイン「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> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </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>
スポンサーリンク