Here, the colorify() method is being called, using the setInterval() function, in order to color the div all the different colours that are availabe - going through "all the colours of the rainbow", if you will.
// assuming "#div-colorified" is the id of the div
var divColorified = new Color(0, "#div-colorified");
// You can use whatever time interval you want
setInterval(function () {
divColorified.colorify();
}, 100);
colorifyText() isn't very different from colorify() - all you need to do is add "Text"! The rest is done exactly the same as the previous one.
// assuming "#div-colorified-text" is the id of the div
// we want this example to start at blue, so we set the angle parameter to 180.
var divColorified = new Color(180, "#div-colorified-text");
// You can use whatever time interval you want
setInterval(function () {
divColorified.colorifyText();
}, 100);
Here, the colorifyCustom() method is being called. Using this method, you can better specify exactly what you want your element's colours to be.
// assuming "#div-colorified-custom" is the id of the div
var divColorified = new Color(0, "#div-colorified-custom");
// You can use whatever time interval you want
setInterval(function () {
// range we want to fluctuate in
divColorified.colorifyCustom(0, 180);
}, 100);
This method deals with the saturation of objects. It will fluctuate through the specified saturation values, making it go from a darker, bleaker colour to a brighter and more lively one. Brightify and opacify are used exactly the same, so, for the sake of saving space (and your time!) examples of them are not included.
// assuming "#div-saturified" is the id of the div
// notice that you must provide the "saturation" optional parameter.
var divSaturified = new Color(0, "#div-saturified", 0);
// You can use whatever time interval you want
setInterval(function () {
divSaturified.saturify(0, 100);
}, 100);
Here's a cool thing - you can use the methods together to create even more awesome effects! Use any combination of methods, and let your creativity run wild.
// assuming "#div-colorify-combine" is the id of the div
// note that, since we are using opacify, we must specify all the values
// up to opacity (the last one)
var divCombined = new Color(0, "#div-colorify-combine", 100, 50, 1.0);
// You can use whatever time interval you want
setInterval(function () {
divCombined.colorify();
divCombined.opacify(0, 1.0);
}, 100);
This is an example of something that you can use LiveColor.js for. The background picture is a black- and-white one, while the div that is on top of it is coloured using LiveColor, and slightly transparent. It adds the effect that the image is "alive", if you will.
<style>
#div-background {
background-image: url(caracas.jpg);
}
</style>
<body>
<div id="div-background">
<div id="div-colorify">
</div>
</div>
</body>
<script>
var divColorify = new Color(0, "#div-colorify", 100, 50, 0.3);
// You can use whatever time interval you want
setInterval(function () {
divColorify.colorify();
}, 100);
</script>