web業務してると色味の微調整って結構面倒だったりしますよね。
そんな時に使えるように「カラーコーディネートツール」を作ってみました。

自分の好きな色を16進数カラー入力欄に入れるとあら不思議！背景色、テキスト色が自動的に切り替わった！
レンジバーで色味の微調整が終わったら、16進数カラー入力欄もその数値に変更されていますのでコピーすれば簡単に好きな色を使えます。

是非是非ご利用くださいませ～。
※html5を利用しているため、最新のブラウザでご利用ください。

カラーコーディネートツールはこちら

iOSやAndroidに搭載されているモバイルSafariではposition:fixedが利用できません。
position:fixedを再現するためにはjavascriptを使うのが楽ちんです。javascriptのライブラリではYUIや有料版のSencha Touchというものがあるらしいですが、今回はiscroll.jsを利用します。

(さらに…)

今回はjQueryで簡単にアニメーションしてみます。

当サイトのヘッダーメニューで使用しいる背景色フェード

コードは下記の通り

$(function() {
	 $('#任意の要素名').hover(
		function(){
			$(this).stop().animate({backgroundColor: '#FF9900'},100);
		},
		function () {
			$(this).stop().animate({backgroundColor: '#000000'},300);
		}
	);
});

ただ、jQueryのアニメーションはコアファイルのみだと数値をもたないbackgroundColor等をサポートしておりません。
別途jQuery.color.jsをダウンロードして利用してください。

bgSwitcher

このプラグインの特徴は

• クロスフェード
• 背景要素の切り替え
• 設定項目が豊富

といったところでしょうか。

背景スライドショーによく使われる「maximage」よりも断然使いやすいと思います。
一度お試しあれ～。

デモ

(さらに…)