Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// https://gist.github.com/rosszurowski/67f04465c424a9bc0dae
function lerpColor(a, b, amount) {
var ah = parseInt(a.replace(/#/g, ""), 16),
ar = ah >> 16,
ag = (ah >> 8) & 0xff,
ab = ah & 0xff,
bh = parseInt(b.replace(/#/g, ""), 16),
br = bh >> 16,
bg = (bh >> 8) & 0xff,
bb = bh & 0xff,
rr = ar + amount * (br - ar),
rg = ag + amount * (bg - ag),
rb = ab + amount * (bb - ab);
return (
"#" + (((1 << 24) + (rr << 16) + (rg << 8) + rb) | 0).toString(16).slice(1)
);
}
// https://gist.github.com/gre/1650294
const easing = {
linear: function(t) {
return t;
},
easeInQuad: function(t) {
return t * t;
},
easeOutQuad: function(t) {
return t * (2 - t);
},
easeInOutQuad: function(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
},
easeInCubic: function(t) {
return t * t * t;
},
easeOutCubic: function(t) {
return --t * t * t + 1;
},
easeInOutCubic: function(t) {
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
},
easeInQuart: function(t) {
return t * t * t * t;
},
easeOutQuart: function(t) {
return 1 - --t * t * t * t;
},
easeInOutQuart: function(t) {
return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;
},
easeInQuint: function(t) {
return t * t * t * t * t;
},
easeOutQuint: function(t) {
return 1 + --t * t * t * t * t;
},
easeInOutQuint: function(t) {
return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
}
};
function getSelector(length = 1) {
return Array.from({ length }, () => "*").join(" ");
}
function getLevels(level = 1) {
const selector = getSelector(level);
if (!document.querySelectorAll(selector).length) {
return level;
}
return getLevels(level + 1);
}
// https://github.com/mrmrs/colors/blob/master/src/_variables.css
const colors = ["#ffffff", "#ff4136"];
const levels = getLevels();
Array.from({ length: levels }, (_, index) => {
const selector = getSelector(index + 1);
const amount = easing.easeInOutQuint((1 / levels) * (index + 1));
const color = lerpColor(colors[0], colors[1], amount);
document.querySelectorAll(selector).forEach(element => {
const styles = {
background: color
};
Object.assign(element.style, styles);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.