Banner/Titel *Fade away* - Effekt versetzt

ERLEDIGT!
Siehe weiter unten....

(Seid gegrüßt!

Mir wurde ein wirklich tolles Design gecodet... aber leider funktioniert der "fade away" Effekt nicht, also wenn man runterscrollt dass der Banner/Header langsam und elegant im Hintergrund verblasst. Folgender Code wurde benutzt: https://codepen.io/nickcil/pen/sfutl
Auf dieser Testseite funktioniert es, aber hier im Baukasten dann nicht mehr.
Weiß jemand eine Lösung?
Das wäre noch so das i Tüpfelchen auf meiner Homepage...

Liebe Grüße, und danke für eure Hilfe!

https://www.gewalgon.de/)
______________
Don't limit yourself

Hi Lira,
füge einfach das folgende in deinen <script>-Block ein, den du bereits bei "Text unter dem Design" hast:

Wenn du die 150 jeweils z.B. durch 200 ersetzt, dann blendet der Header langsamer aus.
______________
- Signatur vom Mod Team angepasst -
Bitte keine Werbung für fremde Projekte

=> Das ist sehr schade. Ich habe mich hier im Forum über viele Jahre engagiert und einfach meine Signatur zu verändern zeugt von mangelnder Wertschätzung für meine Beiträge, die einzig den Nutzern des Homepage-Baukastens zugute kamen. Spätestens mit der Reduzierug auf max. 10 Unterseiten* sind die guten Zeiten des Baukastens ohnehin vorbei und die einst große Gremeinschaft im Forum hat sich längst aufgelöst. Nun bin ich hier offenbar auch nicht länger erwünscht. Bleibt mir nur lebewohl zu sagen, es waren schöne 14 Jahre und der Baukasten hat mir immer viel Spass gemacht - machts gut und eventuell trifft man sich ja doch nochmal an anderer Stelle im Internet. (07.06.2020)
* mittlerweile sogar nur noch 5

Vielen Dank für deine Antwort!
Also entweder habe ich da etwas falsch eingefügt (Wobei ich mehrere Varianten probiert habe) oder dieser Code funktioniert leider nicht... oder muss der irgendwie mit dem Code den ich gepostet habe der ausprobiert wurde noch kombinieren?
______________
Don't limit yourself

Evtl. kommt sich das mit deiner stickyNavbar in die Quere, versuche mal deinen stickyNavbar-Code durch das folgende zu ersetzen:

Damit wäre das dann kombiniert - ich habe einfach nur die drei neuen Zeilen in der function stickyNavbar() ergänzt, die wird ja ohnehin schon beim Scrollen ausgeführt.
______________
- Signatur vom Mod Team angepasst -
Bitte keine Werbung für fremde Projekte

=> Das ist sehr schade. Ich habe mich hier im Forum über viele Jahre engagiert und einfach meine Signatur zu verändern zeugt von mangelnder Wertschätzung für meine Beiträge, die einzig den Nutzern des Homepage-Baukastens zugute kamen. Spätestens mit der Reduzierug auf max. 10 Unterseiten* sind die guten Zeiten des Baukastens ohnehin vorbei und die einst große Gremeinschaft im Forum hat sich längst aufgelöst. Nun bin ich hier offenbar auch nicht länger erwünscht. Bleibt mir nur lebewohl zu sagen, es waren schöne 14 Jahre und der Baukasten hat mir immer viel Spass gemacht - machts gut und eventuell trifft man sich ja doch nochmal an anderer Stelle im Internet. (07.06.2020)
* mittlerweile sogar nur noch 5

Ohhhh es funktioniert jetzt, tausend Dank!!!!!
<3
______________
Don't limit yourself

Jetzt habe ich noch eine Frage... ist es vielleicht möglich den Banner und den rest quasi "versetzt" über zwei verschiedene Ebenen bewegen zu lassen? So ähnlich wie bei einem YouTube Kanal wenn man runterscrollt ( https://www.youtube.com/channel/UCB869gqD5Yv8xI4OfOyMtEA?view_as=subscriber )
Da verdeckt ja der Rest des Inhalts irgendwann den Banner einfach komplett, bei mir scrollt er einfach nur komplett weg.
______________
Don't limit yourself

Ich glaube ich weiß, was du meinst. Den Effekt können wir zumindest für das Bild recht einfach hinbekommen, wenn du noch das folgende ergänzt:

Einfach nach "function stickyNavbar()" hinzufügen, wo schon die anderen 3 neuen Zeilen dazugekommen sind.
______________
- Signatur vom Mod Team angepasst -
Bitte keine Werbung für fremde Projekte

=> Das ist sehr schade. Ich habe mich hier im Forum über viele Jahre engagiert und einfach meine Signatur zu verändern zeugt von mangelnder Wertschätzung für meine Beiträge, die einzig den Nutzern des Homepage-Baukastens zugute kamen. Spätestens mit der Reduzierug auf max. 10 Unterseiten* sind die guten Zeiten des Baukastens ohnehin vorbei und die einst große Gremeinschaft im Forum hat sich längst aufgelöst. Nun bin ich hier offenbar auch nicht länger erwünscht. Bleibt mir nur lebewohl zu sagen, es waren schöne 14 Jahre und der Baukasten hat mir immer viel Spass gemacht - machts gut und eventuell trifft man sich ja doch nochmal an anderer Stelle im Internet. (07.06.2020)
* mittlerweile sogar nur noch 5

WIE COOOL, ich bin so begeistert, tausend Dank dir!! Jetzt muss ich nur noch das Bild neu ausrichten, ich denke das sollte ich hinbekommen^^ Das ist der letzte Feinschliff der gefehlt hat! Danke!!^^
______________
Don't limit yourself

Okay, bevor ich da noch weiter rumfummel, das weiß ich nämlich nicht wie ich beheben kann: Wenn ich die Seite öffne hat mein banner eine bestimmte Position die dann schlagartig anfängt ihre Position zu ändern, quasi wie zu "springen" sobald ich mit dem Scrollen beginne. Wie kann ich das am Besten lösen?
______________
Don't limit yourself

Du hast bisher für #header_container definiert background-position: 0 20%;. Die 20% sind grob -160px aus dem neuen Codeschnipsel. Wenn du also die 20% änderst, damit es nicht mehr springt oder weil du es eh noch anpassen möchtest, dann am besten jetzt als Pixelangabe und auch die -160 im Code identisch anpassen.
______________
- Signatur vom Mod Team angepasst -
Bitte keine Werbung für fremde Projekte

=> Das ist sehr schade. Ich habe mich hier im Forum über viele Jahre engagiert und einfach meine Signatur zu verändern zeugt von mangelnder Wertschätzung für meine Beiträge, die einzig den Nutzern des Homepage-Baukastens zugute kamen. Spätestens mit der Reduzierug auf max. 10 Unterseiten* sind die guten Zeiten des Baukastens ohnehin vorbei und die einst große Gremeinschaft im Forum hat sich längst aufgelöst. Nun bin ich hier offenbar auch nicht länger erwünscht. Bleibt mir nur lebewohl zu sagen, es waren schöne 14 Jahre und der Baukasten hat mir immer viel Spass gemacht - machts gut und eventuell trifft man sich ja doch nochmal an anderer Stelle im Internet. (07.06.2020)
* mittlerweile sogar nur noch 5

Also ich hab da jetzt ne Weile rumgespielt und rumprobiert, habe sogar den Banner dafür mal testweise zugeschnitten aber das scheint sich generell irgendwie zu beißen/zu stören. Im vollbild fällt das zwar nicht so stark auf, aber spätestens wenn ich das fenster verkleiner oder auf eben kleineren Geräten schaue hüpft das extrem, wenn ich die zugeschnittene Bannerversion benutze dann fängt er halt an den Banner doppelt einzublenden, also quasi abgeschnitten oder wie ich das nennen soll. Ich lass es mal so vorerst drin, dann kannst du ja mal nachgucken wenn du Muse hast
______________
Don't limit yourself

Das springen kommt von der Differenz zwischen dem Wert von background-position, der im CSS des Designs definiert ist und dem neuen Wert der dann beim Scrollen durch JavaScript gesettzt wird. Schau mal wo in deinem CSS Code wo background-position: 0 20%; zu finden ist und ändere die 20% auf den Wert den du im JavaScript Code angibst.

Die beiden im folgenden fett markierten Zahlen müssen übereinstimmen:
background-position: 0 -160px; im CSS Code und
$("#header_container").css("background-position-y", $(window).scrollTop() / 2 -160); im JavaScript Code.
______________
- Signatur vom Mod Team angepasst -
Bitte keine Werbung für fremde Projekte

=> Das ist sehr schade. Ich habe mich hier im Forum über viele Jahre engagiert und einfach meine Signatur zu verändern zeugt von mangelnder Wertschätzung für meine Beiträge, die einzig den Nutzern des Homepage-Baukastens zugute kamen. Spätestens mit der Reduzierug auf max. 10 Unterseiten* sind die guten Zeiten des Baukastens ohnehin vorbei und die einst große Gremeinschaft im Forum hat sich längst aufgelöst. Nun bin ich hier offenbar auch nicht länger erwünscht. Bleibt mir nur lebewohl zu sagen, es waren schöne 14 Jahre und der Baukasten hat mir immer viel Spass gemacht - machts gut und eventuell trifft man sich ja doch nochmal an anderer Stelle im Internet. (07.06.2020)
* mittlerweile sogar nur noch 5

Vielen Dank!
______________
Don't limit yourself

Eine % Angabe bei dem anderen Code ist nicht möglich? Die wäre für die Grafik halt doch eher geeignet als die Positionierung mit px.
______________
Don't limit yourself

Probier es mal so:

Dann ist im JavaScript auf die %-Angabe, wenn du nun jeweils die gleichen Prozentwerte nimmst sollte das auch passen.
______________
- Signatur vom Mod Team angepasst -
Bitte keine Werbung für fremde Projekte

=> Das ist sehr schade. Ich habe mich hier im Forum über viele Jahre engagiert und einfach meine Signatur zu verändern zeugt von mangelnder Wertschätzung für meine Beiträge, die einzig den Nutzern des Homepage-Baukastens zugute kamen. Spätestens mit der Reduzierug auf max. 10 Unterseiten* sind die guten Zeiten des Baukastens ohnehin vorbei und die einst große Gremeinschaft im Forum hat sich längst aufgelöst. Nun bin ich hier offenbar auch nicht länger erwünscht. Bleibt mir nur lebewohl zu sagen, es waren schöne 14 Jahre und der Baukasten hat mir immer viel Spass gemacht - machts gut und eventuell trifft man sich ja doch nochmal an anderer Stelle im Internet. (07.06.2020)
* mittlerweile sogar nur noch 5