[JS]スクロールやスライド時に変化する背景に合わせてナビゲーションのテキストなどを最適なカラーにするスクリプト -BackgroundCheck
ユーザーのアクションで背景が変化するコンテンツ、例えば、複数のパネルを垂直に配置し、パネルごとに背景のカラーを変えているとか、スライダーの画像や写真に明るいカラーや暗いカラーが混在しているなど、そういった時にナビゲーションを暗いカラー、もしくは明るいカラー、どちらにしようか迷うことがありませんか？ 変化する背景のカラーに合わせて、指定したテキストやエレメントを最適なカラーに変更するスクリプトを紹介します。 BackgroundCheck BackgroundCheck -GitHub BackgroundCheckのデモ BackgroundCheckの使い方 BackgroundCheckのデモ デモは、スクリプトの基本性能、スクロール、スライドの3種類です。 Chrome, Safari, Firefoxなどモダンブラウザをはじめ、iPhone/iPadなどのiOS6/7でも動作します
画像内の部分的な明度を判定して、重ねたエレメントにclassを付与するライブラリ・BackgroundCheck
画像の中の明度を部分的に判定し、そこに重ねられたエレメントにそれぞれclassを与える、というライブラリのご紹介。技術的に面白かったので備忘録です。 画像の中で明度が高い部分、低い部分を判別し、そこに重ねられた要素にそれぞれ別のclassを与える、というもの。非依存型なので単体で動作します。 上記のように、画像内の明るい部分に、青い円のエレメントをドラッグすると色が黒に変わり、暗い部分に持っていくと白くなります。僕の説明が下手なのでデモを触ったほうがピンと来るかも。 .label.background--light { color: black; } .label.background--dark { color: white; }上記のclassが付与されるので、合わせてスタイリングして下さい。 詳細な使い方は以下にて。ライセンスはMITです。 BackgroundCheck
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
