[JS]スクロールやスライド時に変化する背景に合わせてナビゲーションのテキストなどを最適なカラーにするスクリプト -BackgroundCheck
Post on:2013年9月25日
sponsors
ユーザーのアクションで背景が変化するコンテンツ、例えば、複数のパネルを垂直に配置し、パネルごとに背景のカラーを変えているとか、スライダーの画像や写真に明るいカラーや暗いカラーが混在しているなど、そういった時にナビゲーションを暗いカラー、もしくは明るいカラー、どちらにしようか迷うことがありませんか？
変化する背景のカラーに合わせて、指定したテキストやエレメントを最適なカラーに変更するスクリプトを紹介します。
BackgroundCheck
BackgroundCheck -GitHub
BackgroundCheckのデモ
デモは、スクリプトの基本性能、スクロール、スライドの3種類です。
Chrome, Safari, Firefoxなどモダンブラウザをはじめ、iPhone/iPadなどのiOS6/7でも動作します。IEは9-11で動作確認済みとのことです。
まずは、スクリプトの基本性能を試すことができるデモから。
Demo 1: Drag and Release elements over images
画像の上の矩形で囲まれたサークルやテキストを画像にドラッグすることで、その画像にあわせてサークルやテキストのカラーが変更します。
明るい背景時は、テキストのカラーはブラック。
暗い背景時は、テキストのカラーはホワイト。
そして、一番すごいのは同じ画像内でも最適化することです！
同じ画像でも明るい背景時は、テキストのカラーはブラック。
2つ目のデモはスライダーです。
明るい写真、暗い写真が混在しており、ナビゲーションのカラーが変更します。
暗い背景時は、左右のアローも下のビュレットもホワイト。
明るい背景時はブラック。
3つ目の最後のデモは、スクロールです。
ページ上部に固定配置されたナビゲーションは、スクロールして変化するコンテンツに合わせてカラーが変更します。
明るい背景時は、テキストのカラーはブラック。
スクロールして、画像に重ねてみます。
暗い背景時は、テキストのカラーはホワイト。
BackgroundCheckの使い方
Step 1:外部ファイル
当スクリプトをhead内に外部ファイルとして記述します。
※jQueryなど、他のスクリプトは必要ありません。
<head> ... <script src="background-check.min.js"></script> </head>
Step 2: JavaScript
エレメントがこの上にきたらカラーを変更させる要素を指定し、スクリプトを実行します。
BackgroundCheck.init({
targets: '.target'
});
特定のイメージを対象する場合は、下記のように記述します。
BackgroundCheck.init({
targets: '.target',
images: '.thumbnails'
});
Step 3: CSS
異なる背景カラーごとのスタイルを定義します。
まずは、テキストのデフォルトのカラーを定義します。
.label {
color: blue;
}
より明るい時、より暗い時のカラーを設定します。
.label.background--light {
color: black;
}
.label.background--dark {
color: white;
}
変更できるのはカラーだけでなく、さまざまなスタイルを定義できます。
sponsors
