Javascript-Einblendung mit CSS-Transition verbinden

Zitat von Sempervivum

Wenn ich mir deinen Screenshot oben ansehe, dann ist das Logo ja sicher in einem Container mit den Menüpunkten. Diesem könntest Du display: flex; zuweisen und dann das Logo zentrieren mit align-self: center; für den Container des Logos mit der Klasse "logocool".

Vielen Dank, ich denke, das ist ausreichend. Dankeschön für die Hilfe.

Die Alternative wäre wieder mit scale, oder?

Zitat von Sempervivum

Ja, dann wäre das Logo von Anfang an etwas nach rechts versetzt und würde sich vom Zentrum aus ausdehnen.

Okay, vielen Dank.

Wie kann ich den Div ausblenden, wenn ich das mit dem Scale mache?

Die JavaScript-Animation an sich funktioniert, der Div an sich ist auch nur nach dem Scrollen eingeblendet, allerdings funktioniert der CSS-Effekt nicht.

    #upperlogo {
     display: none;
    }

    .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 */
      display: flex;
      transform: scale(1, 1);
     }
     .logocool img {
       width: 100%;
       height: 100%;
     }

Entschuldige bitte für die Verwirrung.

Wir haben ja vorhin das mit dem vertikal mittig probiert. Jetzt wollte ich das mit dem scale auch einmal testen.

Dazu habe ich obigen CSS Code erstellt.

Der Scale-Effekt hat so lange funktioniert, bis ich den Div ausblenden wollte, wenn kein Scroll erfolgt.

Nun ist allerdings folgendes:

Zitat von Jonathan C.

Die JavaScript-Animation an sich funktioniert, der Div an sich ist auch nur nach dem Scrollen eingeblendet, allerdings funktioniert der CSS-Effekt nicht.

Zitat von Sempervivum

Testdatei fertig, ich sehe, was das Problem ist, aber nicht die Lösung. Ich überlege ...

Okay, Dankeschön. Lass dir Zeit, es eilt nicht. Können das gerne auch erst morgen weiter versuchen.

An sich funktioniert das auch mit Opacity. Wenn ich aber den Div vorher wieder ausblende, geht auch hier der Effekt nicht mehr.

    #upperlogo {
            display: none;
    }

    .logocool {
            margin-top: 6px;
            height: 55px;
            width: 57px;
            transition: transform 0.7s, opacity 0.7s;
            /* Bild zunaechst unsichtbar machen */
            transform: scale(0, 0);
            opacity: 0;
    }
    #upperlogo.visi {
            /* jetzt das Bild sichtbar machen */
            display: block;
            transform: scale(1, 1);
            opacity: 1;
    }
     .logocool img {
            width: 100%;
            height: 100%;
    }

Zitat von Sempervivum

Ich verstehe nicht, was Du mit dem Ausblenden durch display: none; erreichen willst. Anscheinend gibt es ja da ohne das einen störenden Effekt, den Du beseitigen willst.

Das Logo wird ja erst beim Scrollen ab einem bestimmten Punkt auf der Seite angezeigt. Wenn das Logo eingeblendet wird, verschiebt sich das Navigationsmenü nach rechts und dann taucht das Logo auf.

Mit dem Display none wollte ich erreichen, dass der Div Container, also der freie Platz, der im Menü angezeigt wird, obwohl das Scroll-Event noch nicht gestartet wurde und das Bild daher noch unsichtbar ist, ausgeblendet wird, da dieser stört.

Zitat von Sempervivum

Hast Du die Möglichkeit, das ganze online zu stellen, damit man es sich ansehen kann?

Das würde ich sehr gerne machen, allerdings darf ich das Projekt nicht veröffentlichen. Ich weiß, das ist blöd und könnte uns einiges ersparen.

Zitat von Sempervivum

Genau das verstehe ich nicht: Weil bei Skalierung sich die Größe des div nicht ändert, dürfte sich doch nichts verschieben?

Wäre es eine Möglichkeit, dass Du eine Demo ohne Inhalte mit irgend welchen Blindtexten machst und diese online stellst?

Online stellen ohne Inhalte ist leider schwierig, weil es sich dabei um ein WoltLab-Forum handelt.

Wenn Du möchtest nehme ich Dir das ganze einmal auf.