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.

Javascript

 class ScrolleffectBg {
                            constructor(selector, color, factor, offset) {
                            this.selector = selector;
                            this.color = color;
                            this.factor = factor;
                            this.offset = offset;
                            }
                            setEffect() {
                            const selector = this.selector;
                            const color = this.color;
                            const factor = this.factor;
                            const offset = this.offset;
                            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;
                            var colorReplace = color.replace(repPattern, sc);
                            el.style.background = colorReplace;
                            }
                            }
                            window.addEventListener("scroll", function () {
                            setColor();
                            });
                            setColor();
                            }
                            }
                            window.ScrolleffectBg = ScrolleffectBg;

Select Code

Darunter die Klasse aufrufen:

const selector  ="#mein-cotainer"; // Selektor des Containers, Klasse oder ID
                            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 setEffectBackground = new ScrolleffectBg(selector,color,factor, offset);
                            setEffectBackground.setEffect();
                          
                            /* Man kann hier mehrere Container mit dem Effekt belegen */
                             /* zum Beispiel:
                            const selector2  ="#mein-cotainer2";
                            const color2 = "hsl(102, 24%, 91%)";
                            const factor2 = 1;
                            const offset2 = 0;

                            const setEffectBackground2 = new ScrolleffectBg(selector2,color2,factor2, offset2);
                            setEffectBackground2.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
                            const grayscale = "20%"; //Grauwert
                            const factorPic = 1; // Je höher der Faktor, desdo kleiner die Schritte
                            const offsetPic = 0;// Default-Verschiebung
                            const setPicEffect = new ScrolleffectPic(selectorPic,grayscale, factorPic, offsetPic);
                            setPicEffect.setEffect();
                        
                            /* Man kann hier mehrere Container mit dem Effekt belegen */
                             /* zum Beispiel:
                              const grayscale2 = "50%";
                            const factorPic2 = 2;
                            const offsetPic2 = 0;
                            const setPicEffect2 = new ScrolleffectPic(selectorPic2,grayscale2, factorPic2, offsetPic2);
                            setPicEffect2.setEffect();*/

Select Code