abpin / background-check

Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.

#BackgroundCheck

Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.

• Project Page
• Slider
• Fixed Nav

##How it works

If an element overlaps any of the images, either .background--dark or .background--light is added to it. BackgroundCheck does not change an element's style — you must do so using CSS.

For example, if <p> has the following default style:

p {
  color: white;
}

you can then add the following:

p.background--light {
  color: black;
}

Classes are only added if the element overlaps an image. An element is considered to overlap an image if at least 50% (configurable) of it's area is covering that image.

##How to use

Initialize

// Check all elements with a .target class against all images on a page
BackgroundCheck.init({
  targets: '.target'
});

// Specific images
BackgroundCheck.init({
  targets: '.target',
  images: '.thumbnails'
});

Reprocess

// All targets
BackgroundCheck.refresh();

// Specific target
BackgroundCheck.refresh(target);

Setters and getters

// Get current targets
BackgroundCheck.get('targets');

// Change targets
BackgroundCheck.set('targets', '.header');

Stop

BackgroundCheck.destroy();

##Attributes

Used with .init(), .set() or .get()

• targets: Elements to be processed. Type: String, Element or Nodelist. Required.
• images: Images to be used. Type: String, Element or NodeList. Default: All images on page.
• changeParent: Determines if classes are added to a target or to its parent. Default: false.
• threshold: Midpoint between dark and light. Default: 50 (%).
• minOverlap: Minimum overlap required between an element and any of the images for that element to be processed. Default: 50 (%).
• classes: Classes added to targets. Default: { dark: 'background--dark', light: 'background--light' }
• windowEvents: Reprocess on window resize and scroll. Default: true.
• maxDuration: Maximum processing time allowed. Killed if it takes longer. Default: 500 (ms).
• mask: Used internally when checking if an element overlaps any of the images. Default: { r: 0, g: 255, b: 0 }
• debug: Enable or disable logs. Default: false.

##Browser Support

Tested on IE 9-11, iOS 6/7 and the latest versions of Chrome, Firefox and Safari.