Javascript-Einblendung mit CSS-Transition verbinden

Jonathan C. · 12. April 2020

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:

JavaScript

<script>
    window.onscroll = function() {scrollFunction()};

    var element = document.getElementById("pageHeaderFacade");

    if(window.matchMedia('(min-width: 769px)').matches){

        document.getElementById("upperlogo").style.display = "flex";
    }

    function scrollFunction() {
    if(window.matchMedia('(min-width: 769px)').matches){
        if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
                document.getElementById("upperlogo").style.display = "flex"
            } else {
                document.getElementById("upperlogo").style.display = "none"
            }
        }
    }
</script>

Alles anzeigen

Sempervivum · 12. April 2020

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;

Jonathan C. · 12. April 2020

Danke erst einmal für deine schnelle Antwort.

Zitat von Sempervivum

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?

Sempervivum · 12. April 2020

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 */
}

Jonathan C. · 12. April 2020

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:

CSS

// Klasse des eigentlichen Bildes .upperlogo ist der div //
    .logocool {
        margin-top: 6px;
        height: 55px;
        width: 57px;
        -webkit-transition: -webkit-transform 0.7s;
        transition: transform 0.7s;
    }
    #upperlogo.hidden {
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
    }

Alles anzeigen

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.

Sempervivum · 12. April 2020

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:

Code

    // Klasse des eigentlichen Bildes .upperlogo ist der div //
    .logocool {
        margin-top: 6px;
        height: 55px;
        width: 57px;
        -webkit-transition: -webkit-transform 0.7s;
        transition: transform 0.7s;
        /* Bild zunaechst unsichtbar machen */
        transform: scale(0, 0);
    }
    #upperlogo.visi {
        -webkit-transform: scale(0, 0);
        /* jetzt das Bild sichtbar machen */
        transform: scale(1, 1);
    }

Alles anzeigen

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

Jonathan C. · 12. April 2020

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.

Sempervivum · 12. April 2020

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

Jonathan C. · 12. April 2020

Zitat von Sempervivum

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?

Sempervivum · 12. April 2020

Jetzt getestet und so funktioniert es:

HTML

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        header {
            position: fixed;
            background: lightsalmon;
            width: 100%;
        }

        main {
            height: 400vh;
            background-color: lightblue;
        }

        /* Klasse des eigentlichen Bildes .upperlogo ist der div */
        .logocool {
            margin-top: 6px;
            height: 55px;
            width: 57px;
            transition: transform 0.7s;
            /* Bild zunaechst unsichtbar machen */
            transform: scale(0, 0);
        }

        #upperlogo.visi {
            /* jetzt das Bild sichtbar machen */
            transform: scale(1, 1);
        }
    </style>

</head>

<body>
    <header>
        <div class="logocool" id="upperlogo">
            <img src="images/buttondownload.png" alt="">
        </div>
    </header>
    <main></main>
    <script>
        window.onscroll = scrollFunction;
        function scrollFunction() {
            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");
                }
            }
        }
    </script>


</body>

</html>

Alles anzeigen

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

Sempervivum · 12. April 2020

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.

Jonathan C. · 12. April 2020

Zitat von Sempervivum

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.

Sempervivum · 12. April 2020

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

Jonathan C. · 12. April 2020

Zitat von Sempervivum

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:

CSS

.logocool {
         margin-top: -14px;
         height: 0;
         width: 0;
         /* Bild zunaechst unsichtbar machen */
     }
     #upperlogo.visi {
         /* jetzt das Bild sichtbar machen */
         height: 55px;
         width: 57px;
     }

Alles anzeigen

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.

Sempervivum · 12. April 2020

Ja, ich denke, so sollte es funktionieren. Das andere CSS musst Du natürlich beibehalten.

Jonathan C. · 12. April 2020

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.

Sempervivum · 12. April 2020

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:

Code

/* Klasse des eigentlichen Bildes .upperlogo ist der div */
        .logocool {
            margin-top: 6px;
            height: 55px;
            width: 57px;
            transition: width 0.7s, height 0.7s;
            /* Bild zunaechst unsichtbar machen */
            width: 0;
            height: 0;
        }

        .logocool img {
            width: 100%;
            height: 100%;
        }

        #upperlogo.visi {
            /* jetzt das Bild sichtbar machen */
            width: 50px;
            height: 50px;
        }

Alles anzeigen

Jonathan C. · 12. April 2020

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.

Sempervivum · 12. April 2020

Finde ich nicht pingelig. Möchtest Du, dass es nur vertikal mittig ist? Denn sonst wären wären wir wieder bei dem Effekt, den wir mit scale hatten.

Jonathan C. · 12. April 2020

Ja, ich könnte es ja erst einmal so versuchen und das ganze mal anschauen.

Javascript-Einblendung mit CSS-Transition verbinden

Jetzt mitmachen!

Teilen