Farb-Scroll-Effekt mit Javascript

Hier stelle ich ein sehr kleines Script vor, mit den man Einen Farb-Scroll-Effekt auf einen Container oder Bild legt.
Scrolle nach unten, um den Effekt zu sehen.

Hier ein RGB/Hexcode zu HSL konverter

Javascript

 class ScrolleffectColor {
                                constructor(selector, color, factor, offset,prop) {
                                this.selector = selector;
                                this.color = color;
                                this.factor = factor;
                                this.offset = offset;
                                this.prop = prop;
                                }
                                setEffect() {
                                const selector = this.selector;
                                const color = this.color;
                                const factor = this.factor;
                                const offset = this.offset;
                                const prop =  this.prop;
                                const repPattern = /\d+/;
                                const defHue = color.match(repPattern);
                                const defHueInt = parseInt(defHue[0]);
                                function setColor() {
                                for (let el of document.querySelectorAll(selector)) {
                                let sc = window.scrollY / factor + defHueInt + offset;
                                let colorReplace = color.replace(repPattern, sc);
                                let css = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
                                el.style[css] = colorReplace;
                                }
                                }
                                window.addEventListener("scroll", function () {
                                setColor();
                                });
                                setColor();
                                }
                                }
                                window.ScrolleffectColor = ScrolleffectColor;

Select Code

Darunter die Klasse aufrufen:

const selector  ="#mein-cotainer"; // Selektor des Containers, Klasse oder ID, mehrere Selektoren möglich
                                    const color = "hsl(192, 24%, 91%)";  // Farbe, hsl oder hsla
                                    const factor = 1; // Je höher der Faktor, desdo kleiner die Schritte
                                    const offset = 0; // Default-Verschiebung
                                    const prop = "background-color"; // Eigenschaft "color" oder "background-color"

                                    new ScrolleffectColor(selector,color,factor, offset,prop).setEffect();

                                /* Man kann hier mehrere Container mit dem Effekt belegen */
                                 /* zum Beispiel:
                                const selector2  ="#mein-container2";
                                const color2 = "hsl(102, 24%, 91%)";
                                const factor2 = 1;
                                const offset2 = 0;
                                const prop2 = "background-color"; 

                                new ScrolleffectColor(selector2,color2,factor2, offset2,prop2).setEffect();

                                oder in einer Zeile:
                                new ScrolleffectColor("#mein-container2", "hsl(102, 24%, 91%)",1, 0,"background-color").setEffect();*/

Select Code

Bilder-Filter

Javascript

class ScrolleffectPic {
                                constructor(selector, grayscale, factor, offset) {
                                this.selector = selector;
                                this.grayscale = grayscale;
                                this.factor = factor;
                                this.offset = offset;
                                }
                                setEffect() {
                                const selector = this.selector;
                                const grayscale = this.grayscale;
                                const factor = this.factor;
                                const offset = this.offset;
                                function setColor() {
                                for (let el of document.querySelectorAll(selector)) {
                                let sc = window.scrollY / factor + offset;
                                el.style.filter = `hue-rotate(${sc}deg) grayscale(${grayscale})`;
                                }
                                }
                                window.addEventListener("scroll", function () {
                                setColor();
                                });
                                setColor();
                                }
                                }
                                window.ScrolleffectPic = ScrolleffectPic;

Select Code

Darunter die Klasse aufrufen:

const selectorPic ="img"; // Bild- oder Container-Selector, mehrere Selektoren möglich
                                    const grayscale = "20%"; //Grauwert
                                    const factorPic = 1; // Je höher der Faktor, desdo kleiner die Schritte
                                    const offsetPic = 0;// Default-Verschiebung
                                    new ScrolleffectPic(selectorPic,grayscale, factorPic, offsetPic).setEffect();

                                /* Man kann hier mehrere Container mit dem Effekt belegen */
                                 /* zum Beispiel:
                                const selector2  ="img";
                                const grayscale2 = "50%";
                                const factorPic2 = 2;
                                const offsetPic2 = 0;

                                new ScrolleffectPic(selectorPic2,grayscale2, factorPic2, offsetPic2).setEffect();

                                oder in einer Zeile:
                                new ScrolleffectPic("img", "50%",2, 0).setEffect();*/

Select Code