This repository contains a demo of a StringColorChange for StringTune. The module allows elements to dynamically transition between colors as the user scrolls.
- Smooth color interpolation from
string-start-colortostring-end-colorbased on scroll progress. - Supports HEX and RGBA color formats.
- Easily extendable and reusable within the StringTune ecosystem.
<div style="height: 100vh; display: flex; align-items: center; justify-content: center;"
string="color-change" string-start-color="#ff0000" string-end-color="rgba(0,255,0,0.5)">
</div>string="color-change"→ Activates the custom module.string-start-color→ Defines the starting color.string-end-color→ Defines the target color.
The custom module extends StringTune.StringProgress to interpolate colors dynamically.
class StringColorChange extends StringTune.StringProgress {
constructor(visitor) {
super(visitor);
this.htmlKey = 'color-change';
}
initObject(globalId, object, el, attributes) {
super.initObject(globalId, object, el, attributes);
const startColor = this.attribute.process(el, `string-start-color`, 10);
const endColor = this.attribute.process(el, `string-end-color`, 10);
object.setProperty('start-color', this.parseColor(startColor));
object.setProperty('end-color', this.parseColor(endColor));
}
onScroll(data) {
super.onScroll(data);
this.objects.forEach((object) => {
const progress = object.getProperty('progress');
if (progress !== undefined) {
const interpolatedColor = this.interpolateColor(
object.getProperty('start-color'),
object.getProperty('end-color'),
progress
);
object.el.style.backgroundColor = interpolatedColor;
}
});
}
parseColor(color) {
return color.startsWith('#') ? this.hexToRgba(color) : this.rgbToArray(color);
}
hexToRgba(hex) { /* Converts HEX to RGBA array */ }
rgbToArray(rgb) { /* Converts RGB(A) string to array */ }
interpolateColor(start, end, progress) { /* Calculates interpolated RGBA */ }
}
// Register module
const stringTune = StringTune.StringTune.getInstance();
stringTune.use(StringColorChange);
stringTune.start(0);