[JS]スクロールやスライド時に変化する背景に合わせてナビゲーションのテキストなどを最適なカラーにするスクリプト -BackgroundCheck

ユーザーのアクションで背景が変化するコンテンツ、例えば、複数のパネルを垂直に配置し、パネルごとに背景のカラーを変えているとか、スライダーの画像や写真に明るいカラーや暗いカラーが混在しているなど、そういった時にナビゲーションを暗いカラー、もしくは明るいカラー、どちらにしようか迷うことがありませんか?

変化する背景のカラーに合わせて、指定したテキストやエレメントを最適なカラーに変更するスクリプトを紹介します。

サイトのキャプチャ

BackgroundCheck
BackgroundCheck -GitHub

BackgroundCheckのデモ

デモは、スクリプトの基本性能、スクロール、スライドの3種類です。

Chrome, Safari, Firefoxなどモダンブラウザをはじめ、iPhone/iPadなどのiOS6/7でも動作します。IEは9-11で動作確認済みとのことです。
まずは、スクリプトの基本性能を試すことができるデモから。

デモのキャプチャ

Demo 1: Drag and Release elements over images

画像の上の矩形で囲まれたサークルやテキストを画像にドラッグすることで、その画像にあわせてサークルやテキストのカラーが変更します。

デモのキャプチャ

明るい背景時は、テキストのカラーはブラック。

デモのキャプチャ

暗い背景時は、テキストのカラーはホワイト。

そして、一番すごいのは同じ画像内でも最適化することです!

デモのキャプチャ

同じ画像でも明るい背景時は、テキストのカラーはブラック。

2つ目のデモはスライダーです。

デモのキャプチャ

Demo 2: Slider

明るい写真、暗い写真が混在しており、ナビゲーションのカラーが変更します。

デモのキャプチャ

暗い背景時は、左右のアローも下のビュレットもホワイト。

デモのキャプチャ

明るい背景時はブラック。

3つ目の最後のデモは、スクロールです。

デモのキャプチャ

Demo 3: Fixed Nav

ページ上部に固定配置されたナビゲーションは、スクロールして変化するコンテンツに合わせてカラーが変更します。

デモのキャプチャ

明るい背景時は、テキストのカラーはブラック。
スクロールして、画像に重ねてみます。

デモのキャプチャ

暗い背景時は、テキストのカラーはホワイト。

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;
}

変更できるのはカラーだけでなく、さまざまなスタイルを定義できます。

top of page

©2017 coliss