Webサイトの”色”を自動で抽出、分析するサイト [Web Site Color Picker]作ってみました♪

お役に立ちますでしょうかシリーズも第6弾となりました!

Webサイトの”色”を自動で抽出、分析するサイト
Web Site Color Pickerというサイトができました♪

新サイトを作りました!
その名をWeb Site Color Pickerといいます♪

早いものでお役に立ちますでしょうかシリーズも第6弾となりました☆

このサイトは、素敵なWebサイトから配色を学ぶために便利に使えるシンプルなツールです。
お気に入りのデザインのWebサイトのURLを入れてSEARCHボタンをクリックすると、そのサイトで使われている色を抽出、分析して自動的に色コードと共に表示します。

使い方はこんな感じです。

分析してみたいサイトのURLを入れてSearchボタンを押すと…

こんな感じで、サイトの色を分析して使われている色を自動で表示します!

ただ、なにせ自動解析。

私的にはこのサイトのベスト10はこの色じゃなーい!!ってことも多々あるかと思います。
ご安心ください!抽出機能を設けました!

これを使えば、ある程度解析した分析結果から好きな色だけをスポイトで取得して
保存しておくことができるんです!

保存したデータはあとから閲覧することもできます。

とにかくわかりやすく、使いやすくするために
とてもシンプルな機能になっています。

デザイナーさんだけでなく、管理画面の着色で悩んでいるプログラマーさんなども
ぜひ試してきれいな色で管理画面をグレードアップさせてみてはいかがですか?^^

色コードを表示していますので、すぐに使えますよ♪

素敵なWebサイトから配色の妙技を学んで
デザインに役立ててくださいね♪

P.S

このサイトを作成するにあたり、ハートレイルズさまのスクリーンキャプチャサービス、
HeartRails Capture API
を使わせていただきました。
このサービスなくしてはこのサイトはできませんでした。

この場を借りて御礼申し上げます。
本当にありがとうございました!

jquery.rotate.js を使って、画像がクルクル回るWelcome作ってみました♪

このサイトで、画像を回転させられるjQueryプラグイン、
jQuery.rotate.jsを使ってみました!

今日はそのご紹介です♪

こんにちは☆最近すっかり涼しくなりましたね…!
みなさん、体調など崩していませんか??

さて、今日は画像を回転させられるjQueryのプラグイン、
jQuery rotateというプラグインを使ってみましたので、そちらをご紹介したいと思います♪

このブログのメイン画像、
これまでは水中から撮った水の写真を使用していたのですが、
長かった夏も終わって涼しくなってきたので衣替えしてみました♪

追記:今はデザインを変更していて、同じ方法で切手風のデザインをクルクルしています。

Fireworksマニアではお花をクルクルしています♪ →Fireworksマニア

お花で出来たWelcome文字です♪

この部分、ただの画像がぺたっと貼ってあるだけではなく、
画像を回転させられるjQueryのプラグイン、jQuery.rotate.jsを使用してそれぞれのお花がマウスオーバーで回転する、という仕掛けになっています。

ぜひ、ページ上部のWelcome!と書いてあるお花をさわってみてください♪
くるくると動きませんか??^^

簡単で楽しく、使いやすいプラグインだったのですが、
今回のレイアウトではIE対応で少しつまずいたところがあったので作業工程とともにメモしておきます。

使用したjQueryプラグインはこちら↓

jQuery.rotate.js
http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html

jqueryとこちらのプラグインを読み込み、ページのサンプルにあるようにコードを書いてあげると動きます。

今回は3番目のサンプル、マウスカーソルを当てると右に回転し、離すと左に回転する

という処理と同じことをしています。

このブログでは、すべてのお花にrotateFlowerというclassをあててあるので
rotateFlowerに対して以下のように処理をかけています。

$(document).ready(function() {
  $('.rotateFlower').rotate({maxAngle:30,minAngle:-30,
    bind:
    [
      {"mouseover":function(){$(this).rotateAnimation(30);}},
      {"mouseout":function(){$(this).rotateAnimation(0);}}
    ]
  });
});

お花の画像はひとつひとつ、画像の中心とお花の中心をあわせて書き出しました。
(上手く中央をあわせないと傾いて回転してしまうので)

↑こんな感じ

これでfirefoxでは完璧だったのです。
IEが…………………。

↑こんなことに。

イヤーーーーーーー!!!!

それぞれのお花の部分は
親要素(ヘッダーイメージ用ボックス)にposition:relative;
子要素(お花ひとつひとつ)にposition:absolute; top:XXpx; left:XXpx;という形で絶対位置で並べているのですが…

プラグインを有効にするとIEだとどーーーーーしても上手く並ばない……………。
プラグインを外すと上手く並ぶんです。

このプラグイン、img要素を
IEではrvmlを使って、それ以外はcanvasを使って
それぞれ書き換えてくれてて、それでアニメーションを実現しているみたいなので、
書き換えられたときに何か起こっている…

事件は現場で…

…。

ということで、調べてみたところ
img要素をvmlに変換する処理をする際、プラグイン側で
親要素にあたるボックスにposition:absolute;をかけるという処理が入ってました。

この並べ方をするには親要素はposition:relative;にしておかなければいけないので
CSSでposition:relative;していたのですが、
プラグイン側で要素のCSS設定が上書きされてしまっていたため、
子アイテムの絶対配置ができていなかったのが原因でした。

※ボックスの絶対位置、相対位置について??な方はは詳しくはこのページが詳しいですよー☆
http://www.css-lecture.com/log/css/037.html

なのでプラグインの該当の箇所を修正して完了。

今はIEでもきちんと動いていると思います♪

画像の要素をたくさん重なりあうように並べたいときは、この部分、要注意です。

上にも書きましたが、このプラグイン、

img要素を
・IEではrvmlを使って
・それ以外はcanvasを使って

それぞれ書き換えてくれてて、それでアニメーションを実現しているみたい。

HTML5のcanvas要素はIEなどでは使えないけれど、
こうやって切り分けることによって
同じ様に見せることができるのですね…!!

こういうのを思いつく人は本当にすごいなぁ><

サンプルにはない雰囲気のものが作れたので満足です♪

また、CREAMUさんのjQueryでアニメーションさせた静的なサイトという記事で紹介されていた

http://www.g2geogeske.com/

こちらのサイトのロゴ部分もjQuery.rotate.jsを使って
ポヨンと回転させているそうです。

かわいい♪♪

ほかにもアイディア次第でいろいろ使えそうなプラグインですね☆