angular-adaptive-backgrounds
angular-adaptive-backgrounds copied to clipboard
:sunrise_over_mountains: Surround a picture with its dominant color using a simple directive
Angular Adaptive Backgrounds
Surround a picture with its dominant color using a simple directive
$ npm install --save angular-adaptive-backgrounds
the lowdown
This directive is essentially extracting the dominant color from an image and applying that color to its parent's background. Here's the most simple example:
<!-- Load the script after AngularJS -->
<script src="angular.js"></script>
<script src="angular-adaptive-backgrounds.js"></script>
// Make sure your app depends on this module
var myApp = angular.module('myApp', ['mb-adaptive-backgrounds']);
<!-- This guy will get receive a background color... -->
<div adaptive-background>
<!-- from this image -->
<img src="cool.jpg">
</div>
getting fancy
Since your markup could get far more complicated in a real example, adaptive-background
will dig through its descendents for the first img
it can find.
<div adaptive-background>
<div>
<div>
<img src="cool.jpg">
</div>
</div>
</div>
choose an image
But if you have multiple images descending from your adaptive-background
, it might find the wrong one! Fortunately, you can specify a class name.
<div adaptive-background ab-image-class="the-chosen-one">
<div>
<div>
<!-- It will skip right past this image -->
<img src="not-cool.jpg">
</div>
<div>
<!-- and grab a color from this image -->
<img src="cool.jpg" class="the-chosen-one">
</div>
</div>
</div>
In certain cases, you might want to specify a class name for your entire app, instead of repeatedly setting ab-image-class
.
myApp.config(function (adaptiveBackgroundsOptionsProvider) {
adaptiveBackgroundsOptionsProvider.set({
imageClass: 'the-chosen-one'
});
});
<!-- Even without setting ab-image-class... -->
<div adaptive-background>
<div>
<div>
<img src="not-cool.jpg">
</div>
<div>
<!-- it will still find this image -->
<img src="cool.jpg" class="the-chosen-one">
</div>
</div>
</div>
css background-image
Instead of an img
element, you might have a background-image
on some other element. Have no fear. Simply ensure you've set a parent class, either by ab-image-class
or a global config
.
<div adaptive-background ab-image-class="the-chosen-one">
<div style="background-image: url('cool.jpg');" class="the-chosen-one"></div>
</div>
classes
If you have text overlaying the background color, that text might no longer be readable. You have a couple classes to work with though.
ab-light-background
will be applied to a lighter background and, as you might expect, ab-dark-background
on a darker background. You could do something like this to make sure your text contrasts with the background.
.ab-light-background {
color: #333;
}
.ab-dark-background {
color: #fff;
}
If you're displeased with those class names, feel free to change them.
myApp.config(function (adaptiveBackgroundsOptionsProvider) {
adaptiveBackgroundsOptionsProvider.set({
lightClass: 'wow-so-bright',
darkClass: 'pretty-dark-in-here'
});
});
dev
$ npm install
$ npm start