Javascript-Einblendung mit CSS-Transition verbinden

  • Hallo,


    ich habe eine Menüleiste, in der beim Scrollen ab einem gewissen Punkt ein Logo (Bild) eingeblendet wird.

    Dies funktioniert so weit alles.


    Nun möchte ich aber, dass beim Einblenden ein CSS-Effekt auftritt, und zwar, dass das Bild dann mit einem "Größerwerden" eingeblendet wird, also dass es nicht einfach sofort da ist.

    Wenn die Javascript-Animation wieder deaktiviert ist, soll das Logo mit einem "Kleinerwerden" ausgeblendet werden.


    Ich habe dies bereits mit "transition" in der CSS-Klasse getestet, allerdings hat dies nicht funktioniert.


    Was muss ich da tun? Bitte um Hilfe.


    Liebe Grüße und Danke im Voraus

    Jonathan C.



    Mein Code:

  • Am besten geht so etwas, wenn man es durch Hinzufügen und Löschen einer Klasse macht, dann kannst Du beliebige CSS-Regeln steuern, ohne im JS etwa ändern zu müssen.

    https://wiki.selfhtml.org/wiki…ipt/DOM/Element/classList


    Und mit transition bist Du schon auf dem richtigen Wege. Entweder width und height ändern oder mit transform: scale die Größe auf 0 ändern.


    BTW: Dies window.onscroll = function() {scrollFunction()}; lässt sich kürzer formulieren: window.onscroll = scrollFunction;

  • Danke erst einmal für deine schnelle Antwort. :)


    Am besten geht so etwas, wenn man es durch Hinzufügen und Löschen einer Klasse macht, dann kannst Du beliebige CSS-Regeln steuern, ohne im JS etwa ändern zu müssen.

    https://wiki.selfhtml.org/wiki…ipt/DOM/Element/classList

    Habe ich richtig verstanden, dass ich dann immer anstatt document.getElementById("upperlogo").style.display = "flex" die add bzw. remove-Funktion ausführen soll?

    Und habe ich richtig verstanden, dass ich dann zwei Klassen benötigt, also eine für add und eine für remove?

    Ich verstehe nämlich leider nicht, wie ich das jetzt genau verwirklichen kann. Bin da leider ein Anfänger.

    Könntest du mir das vielleicht noch einmal genauer erklären, insofern das den zeitlichen Rahmen nicht sprengen würde?

  • Nein, Du brauchst nur eine Klasse. Wenn heruntergescrollt wird, setzt Du diese Klasse mit add und wenn wieder hoch gescrollt wird, löschst Du sie wieder mir remove:

    Code
    if(window.matchMedia('(min-width: 769px)').matches){
            if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
                    document.getElementById("upperlogo").classList.add("hidden");
                } else {
                    document.getElementById("upperlogo").classList.remove("hidden");
                }
            }
        }

    Und dann im CSS:

    Code
    #upperlogo.hidden {
        /* hier die Regeln um das Logo auf Null zu verkleinern */
    }
  • Danke für deine Antwort.


    Ich habe hier einmal einen Screenshot:

    html-seminar.de/woltlab/attachment/2318/


    Nachdem ich deinen Code eingefügt habe, ist unter der Menüleiste plötzlich ein weißer Abstand.

    Zudem erfolgt nun gar keine Animation mehr. Vorher wurde das Bild in dem freien Platz neben "Home" eingeblendet.

    Wahrscheinlich habe ich das lediglich falsch verstanden.


    Hier noch einmal mein Code:


    JavaScript
    if(window.matchMedia('(min-width: 769px)').matches){
            if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
                    document.getElementById("upperlogo").classList.add("hidden");
                } else {
                    document.getElementById("upperlogo").classList.remove("hidden");
                }
            }
        }
    PHP
    <div class="logocool" id = "upperlogo" style="display: none;">
            <img src="https://teamforum.eu/ws/images/styleLogo-e38c8ee46e8cf41b83497ce240d4503b1dc86a7e.png"  alt="" >
    </div>


    Danke im Voraus.

  • Eher habe ich da etwas falsch verstanden, weil ich das HTML nicht gesehen habe. Du willst ja das Logo sichtbar machen, wenn man herunter scrollt. D. h. den Klassennamen auf "visi" ändern:

    Code
        if(window.matchMedia('(min-width: 769px)').matches){
            if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
                    document.getElementById("upperlogo").classList.add("visi");
                } else {
                    document.getElementById("upperlogo").classList.remove("visi");
                }
            }
        }

    Du machst ja das Logo mit dem Inlinestyle style="display: none;" unsichtbar. Das zunächst Mal löschen, denn wir wollen ja jetzt die Größe des Logos animieren. Dann im CSS das Logos zunächst auf 0 herunter verkleinern und wenn die Klasse "visi" vorhanden ist, wieder sichtbar machen:

    AFAIK ist dieses -webkit-transform heute nicht mehr notwendig.

  • Danke, dass du dir Zeit für mein Anliegen nimmst.


    Ich habe das jetzt genau so gemacht, wie du es gesagt hast, allerdings funktioniert die Animation beim Scrollen nun gar nicht mehr.

  • Das ist nicht verwunderlich, denn ich hatte bisher nichts von dem getestet. Werde ich jetzt aber tun ...

    Vielen vielen Dank!


    Eine Sache noch:

    Ich sollte ja das style="display: none;" entfernen. Dies hatte ich drinstehen, damit der Div nur angezeigt wird, wenn das Scroll-Event gestartet ist, da dort sonst ein unschöner freier Platz ist. Jetzt wird der Div aber immer angezeigt. Kann ich den auch einfach über CSS ausblenden?

  • Jetzt getestet und so funktioniert es:

    Woran es jetzt lag, weiß ich nicht, ich hatte zunächst das inline display: none; noch drin und der Eventhandler war mir abhanden gekommen.

  • Zitat

    Eine Sache noch:

    Ich sollte ja das style="display: none;" entfernen. Dies hatte ich drinstehen, damit der Div nur angezeigt wird, wenn das Scroll-Event gestartet ist, da dort sonst ein unschöner freier Platz ist. Jetzt wird der Div aber immer angezeigt. Kann ich den auch einfach über CSS ausblenden?

    Da sind wir jetzt mit dem scale u. U. auf falschen Weg, denn dabei ist es so, dass das Element auf wenn es auf 0 herunter skaliert ist, den Platz einnimmt. Lass uns das erstmal zum Laufen bringen und dann sehen wir weiter.

  • Da sind wir jetzt mit dem scale u. U. auf falschen Weg, denn dabei ist es so, dass das Element auf wenn es auf 0 herunter skaliert ist, den Platz einnimmt. Lass uns das erstmal zum Laufen bringen und dann sehen wir weiter.

    Okay, danke schon mal. Mit deinem Code funktioniert das jetzt zunächst.

  • Und stört es jetzt, dass das Div auch im unsichtbaren Zustand den Platz einnimmt? Wenn ja, einfach width und height ändern anstatt transform:scale

    Ja das stört schon, weil die Menüleiste sonst sinnlos verschoben ist, wenn da gar kein Bild ist.



    Hab das jetzt so gemacht:

    Hab ich das so jetzt richtig verstanden? Ich glaube nicht, weil das Logo ist jetzt einfach von Haus aus riesig und nur das Menü verschiebt sich beim Scrollen nach rechts.

  • Okay, weil wie gesagt. Jetzt passiert folgendes:


    Das Logo ist jetzt bereits vor dem Scroll-Event da und beim Scrollen verschiebt sich lediglich das Menü, aber nicht mehr das Logo.

  • Da fehlen uns jetzt noch zwei Dinge:

    Das Logo muss sich in der Größe an das Div anpassen und wir müssen width und height animieren:

  • Tausend Dank! Jetzt funktioniert das wunderbar! :)

    Abschließend habe ich noch eine Kleinigkeit.

    Das Logo ploppt jetzt immer so aus der linken oberen Ecke heraus auf. Kann man das irgendwie einstellen, dass das mittig aufploppt?
    Das ist jetzt vielleicht ein wenig pingelig. Wenn's nicht geht oder zu umständlich ist, dann auch kein Problem.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!