I am fairly new to javascript/jQuery, however I am making all efforts to understand what I am doing. I was inspired by diesel's site. On this site, data attributes are used for the text blocks on the home page. data-color
. I want to achieve this function on my site. Being able to change the color of each block per entry, as the user scrolls down the page, it triggers differently.
I have come on here for help as I haven't seen any tutorial in relation to the functionality I am trying to achieve. Does anyone know how this can be done? I believe this would be helpful for those that want to execute the same or a similar functionality.
getColorMod: function(color, val) {
var hexToRgb = function(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : false;
}
var array = hexToRgb(color),
r = parseFloat(array[0] + val),
g = parseFloat(array[1] + val),
b = parseFloat(array[2] + val),
rgb = array ? {
r: r >= 250 ? 200 : r,
g: g >= 250 ? 200 : g,
b: b >= 250 ? 200 : b
} : false;
return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
},