Suche im Forum:
Suchen


Autor Nachricht
Beitrag07.03.2019 um 20:53 (UTC)    
Titel: 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


Zuletzt bearbeitet von gewalgon am 15.03.2019, 16:07, insgesamt 2-mal bearbeitet
Beitrag08.03.2019 um 14:04 (UTC)    
Titel:

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

Code:
$(window).scroll(function(){
    $("#header_container").css("opacity", 1 - $(window).scrollTop() / 150);
    $("#header_sub").css("opacity", 1 - $(window).scrollTop() / 150);
    $("#sm_container").css("opacity", 1 - $(window).scrollTop() / 150);
});

Wenn du die 150 jeweils z.B. durch 200 ersetzt, dann blendet der Header langsamer aus.
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)
Beitrag08.03.2019 um 16:43 (UTC)    
Titel:

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
Beitrag08.03.2019 um 18:31 (UTC)    
Titel:

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

Code:
<script>
window.onscroll = function() {stickyNavbar()};

var navbar = document.getElementById("nav_container");

var sticky = navbar.offsetTop - 20;

function stickyNavbar() {
    $("#header_container").css("opacity", 1 - $(window).scrollTop() / 150);
    $("#header_sub").css("opacity", 1 - $(window).scrollTop() / 150);
    $("#sm_container").css("opacity", 1 - $(window).scrollTop() / 150);

  if (window.pageYOffset >= sticky ) {
    navbar.classList.add("sticky");
  }else {
    navbar.classList.remove("sticky");
  }
}
</script>

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. Wink
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)
Beitrag08.03.2019 um 20:32 (UTC)    
Titel:

Ohhhh es funktioniert jetzt, tausend Dank!!!!! Shocked Very Happy Mr. Green
<3
______________
Don't limit yourself
Beitrag14.03.2019 um 16:00 (UTC)    
Titel:

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
Beitrag15.03.2019 um 16:55 (UTC)    
Titel:

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:

Code:
$("#header_container").css("background-position-y", $(window).scrollTop() / 2 -160);

Einfach nach "function stickyNavbar()" hinzufügen, wo schon die anderen 3 neuen Zeilen dazugekommen sind.
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)
Beitrag15.03.2019 um 18:00 (UTC)    
Titel:

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
Beitrag15.03.2019 um 18:05 (UTC)    
Titel:

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
Beitrag15.03.2019 um 18:05 (UTC)    
Titel:

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. Wink
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)


Zuletzt bearbeitet von freefunstuff am 15.03.2019, 19:17, insgesamt einmal bearbeitet
Beitrag18.03.2019 um 09:35 (UTC)    
Titel:

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 Smile
______________
Don't limit yourself
Beitrag18.03.2019 um 09:44 (UTC)    
Titel:

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.
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)


Zuletzt bearbeitet von freefunstuff am 18.03.2019, 11:10, insgesamt einmal bearbeitet
Beitrag18.03.2019 um 11:03 (UTC)    
Titel:

Vielen Dank! Smile
______________
Don't limit yourself
Beitrag19.03.2019 um 06:57 (UTC)    
Titel:

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
Beitrag19.03.2019 um 13:51 (UTC)    
Titel:

Probier es mal so:

Code:
$("#header_container").css("background-position-y", 'calc('+$(window).scrollTop()+'px / 2 + 20%)');

Dann ist im JavaScript auf die %-Angabe, wenn du nun jeweils die gleichen Prozentwerte nimmst sollte das auch passen.
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de