CSS / JavaScript Animation?

[Carmen]

Hallo,

könnt ihr mir vielleicht sagen, wie die Animation auf der Seite http://sportlaune.de/ im Bereich ** Sport macht Laune, finde es selber heraus! ** umgesetzt wurde?

Fahrt mal bitte mit der Maus über einen der Bereiche, mir gefällt diese Animation sehr und würde diese gerne auf meiner Seite einbauen. Leider sehe ich nicht, wie es umgesetzt wurde.

Danke für eure Hilfe.

[marctrix]

Hej Carmen,

könnt ihr mir vielleicht sagen, wie die Animation auf der Seite http://sportlaune.de/ im Bereich ** Sport macht Laune, finde es selber heraus! ** umgesetzt wurde?

Egal wie das auf dieser Seite gemacht wurde: Animationen immer mit CSS!

Die ist auch noch recht simpel. Nimm einen Kasten mit mehr Text als Platz und gib ihm ein overflow:hidden, um zu verhindern, dass der überfließende Inhalt angezeigt wird. Beim Überfahren der Maus schiebst du den Inhalt einfach nach oben durch einen entsprechenden Abstand oder mittels Positionierung.

Marc

[mark]

Egal wie das auf dieser Seite gemacht wurde: Animationen immer mit CSS!

Immer ist Immer falsch!

Versuch mal die Css Animation der Höhe eines Containers mit unbekannter Höhe ohne Javascript geht das nicht.

[Gunnar Bittersmann]

@@mark

Egal wie das auf dieser Seite gemacht wurde: Animationen immer mit CSS!

Immer ist Immer falsch!

Versuch mal die Css Animation der Höhe eines Containers mit unbekannter Höhe ohne Javascript geht das nicht.

Geht.

Geht nicht geht nicht.

LLAP 🖖

[mark]

Danke, Gunnar für dein Beispiel. Diese Umschiffung des Problems kannte ich noch nicht.

Aber: Dein Beispiel hat einen Haken: Es wird nicht die Höhe animiert, sondern die Position eines Containers um seine eigene Höhe verschoben. (transform: translate).

Die Aussage, dass man die Höhe eines Containers nicht mit CSS animieren kann, wenn diese Unbekannt ist stimmt also weiterhin.

[Gunnar Bittersmann]

@@mark

Dein Beispiel hat einen Haken: Es wird nicht die Höhe animiert, sondern die Position eines Containers um seine eigene Höhe verschoben. (transform: translate).

Kein Haken. Es geht um den visuellen Effekt.

Die Anforderung kann nur sein: „Setze diesen Effekt um. Verwende eine passende CSS-Transition.“

Die Anforderung „Setze diesen Effekt um. Verwende transition: height …“ wäre unsinnig.

Die Aussage, dass man die Höhe eines Containers nicht mit CSS animieren kann, wenn diese Unbekannt ist stimmt also weiterhin.

Wenn man die unbekannte Höhe nach oben abschätzen kann, kann man max-height animieren. Beim Rausfahren tritt dann aber eine Verzögerung auf.

EDIT: Kann man. Sollte man aber nicht.

LLAP 🖖

[marctrix]

Hej mark,

Immer ist Immer falsch!

Die Ausnahmen bestätigen die Regeln ;-)

Marc

[Gunnar Bittersmann]

@@Carmen

Seite http://sportlaune.de/ im Bereich ** Sport macht Laune, finde es selber heraus! **

Würde ich gerne herausfinden, dummerweise ist das Hamburger-Icon ohne Funktion. Beim Menü sollte man sich an dieser Seite kein Beispiel nehmen.

LLAP 🖖

[Der Martin]

Hallo,

Seite http://sportlaune.de/ im Bereich ** Sport macht Laune, finde es selber heraus! **

das scheint eine CSS-Animation oder Transition zu sein, damit hat der Opera nämlich so seine Probleme: Beim Hovern rutscht der Inhalt der Boxen mal ein paar Pixel rauf, mal ein paar Pixel runter - gerade so, als wollte Opera sagen: Ich weiß, dass da was passieren soll, aber ich weiß nicht, was.

Würde ich gerne herausfinden, dummerweise ist das Hamburger-Icon ohne Funktion.

Hmm? Wo siehst du da ein Hamburger-Icon?

Beim Menü sollte man sich an dieser Seite kein Beispiel nehmen.

Stimmt. ein Menü sehe ich da überhaupt nicht. Aber da muss irgendwo eins sein, wahrscheinlich mit weißer Schrift auf weißem Hintergrund: Wenn ich mit der Maus knapp unterhalb der grauen Leiste am oberen Bildrand hin- und herfahre, klappt nämlich ab und zu ein Dropdown-Manü nach unten aus. Das soll vermutlich ein Suchspiel sein.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Würde ich gerne herausfinden, dummerweise ist das Hamburger-Icon ohne Funktion.

Hmm? Wo siehst du da ein Hamburger-Icon?

Bei schmalerem Viewport ist da ein Hamburger-Icon. Das ist aber nicht in der Tab-Order; per Tastatur kommt man da nicht hin. Seite unbrauchbar.

LLAP 🖖

[Der Martin]

Hi,

Hmm? Wo siehst du da ein Hamburger-Icon?

Bei schmalerem Viewport ist da ein Hamburger-Icon.

ah ja ... Wenn ich das Browserfenster langsam schmaler mache, erscheint irgendwann plötzlich am linken Rand das "sportlaune"-Logo, und rechts oben drei Striche, mit etwas Phantasie ein Identitäts-Zeichen. Aber ein Hamburger?? Bei mir jedenfalls nicht.

Das ist aber nicht in der Tab-Order; per Tastatur kommt man da nicht hin. Seite unbrauchbar.

Hartes Urteil, aber mag sein.

So long,
 Martin

[Matthias Apsel]

Hallo Der Martin,

ah ja ... drei Striche, … Aber ein Hamburger??

Wikipedia

Bis demnächst
Matthias

[Der Martin]

n'Abend,

ah ja ... drei Striche, … Aber ein Hamburger??

Wikipedia

äh, danke. Ich wäre nie auf die Idee gekommen, dieses Symbol mit einem Hamburger zu assoziieren. Ein Hamburger ist für mich gekennzeichnet durch eine konvexe obere Hälfte, eine konvexe untere Hälfte und irgendwas dazwischen. Aber das? Die Leute müssen echt eine blühende Fantadu^[1] haben.

So long,
 Martin

---

1. Wenn man damit nicht ganz so vertraut ist, nennt man's auch Phantasie. ↩︎

[Matthias Apsel]

Hallo Der Martin,

Ein Hamburger ist für mich gekennzeichnet durch eine konvexe obere Hälfte, eine konvexe untere Hälfte und irgendwas dazwischen.

Wenn das untere Brötchenteil auch kovex^[1] ist, kann man den Burger ja nirgends hinlegen ;-)

Bis demnächst
Matthias

---

1. Hat das Mädchen Sex, wird ihr Bauch konvex; ist das Mädchen brav, bleibt ihr Bauch konkav. ↩︎

[Tabellenkalk]

Hallo,

Wenn das untere Brötchenteil auch kovex[^1] ist, kann man den Burger ja nirgends hinlegen ;-)

Wieso hinlegen? Zweimal falten und man braucht nichtmal mehr abzubeißen, weil es dann komplett reinpasst :O

Gruß
Kalk

[Der Martin]

Hi,

Ein Hamburger ist für mich gekennzeichnet durch eine konvexe obere Hälfte, eine konvexe untere Hälfte und irgendwas dazwischen.

Wenn das untere Brötchenteil auch kovex[^1] ist, kann man den Burger ja nirgends hinlegen ;-)

wieso sollte man ihn irgendwo hinlegen? Man nimmt ihn in die Hand und beißt rein!

Hat das Mädchen Sex, wird ihr Bauch konvex; ist das Mädchen brav, bleibt ihr Bauch konkav.

*rofl*
Solche Merksprüche sind klasse. Konvex und konkav konnte ich auch lange nicht auseinanderhalten, bis ich die Vokabel "cave", also Höhle, im Englischen kennengelernt habe.

Ähnliches gilt für Tropfsteine. Unser Erdkundelehrer hat uns als Eselsbrücke angeboten: Stalagmiten haben ein m in der Mitte, die wachsen vom Boden aus. Na, okay. Kurze Zeit später war ich wieder mal unentschlossen, und mein Banknachbar meinte nur bierernst: Titten hängen.

Schönen Abend noch,
 Martin

[Carmen]

Hallo,

Bei schmalerem Viewport ist da ein Hamburger-Icon. Das ist aber nicht in der Tab-Order; per Tastatur kommt man da nicht hin. Seite unbrauchbar.

ich denken mal mit solchen Aussagen solltest du vorsichtiger sein. Die Seite ist sehr wohl brauchbar nur weil dir etwas nicht in den Kram passt, wie so oft, meinst du, dass du eine Seite so runter machen kannst. Zeig doch meine Seiten von dir, die du umgesetzt hast oder bist du nur ein Sprücheklopfer der ganz besonderen Art? Ganz ehrlich, solche Menschen hasse ich abgrundtief. Du redest alles, aber auch alles schlecht.

[Gunnar Bittersmann]

@@Carmen

Bei schmalerem Viewport ist da ein Hamburger-Icon. Das ist aber nicht in der Tab-Order; per Tastatur kommt man da nicht hin. Seite unbrauchbar.

ich denken mal mit solchen Aussagen solltest du vorsichtiger sein.

Nein.

Die Seite ist sehr wohl brauchbar

Unter gewissen Einschränkungen. Für mich heißt brauchbar aber: uneingeschränkt brauchbar.

“If [it’s] not keyboard accessible, it is unfinished / broken.” —Heydon Pickering

Du redest alles, aber auch alles schlecht.

Nicht alles. In dem Fall das Navigationsmenü dieser Seite. Und ich habe es nicht schlechtgeredet; es war vorher schon schlecht.

LLAP 🖖

[marctrix]

Hej Carmen,

Bei schmalerem Viewport ist da ein Hamburger-Icon. Das ist aber nicht in der Tab-Order; per Tastatur kommt man da nicht hin. Seite unbrauchbar.

ich denken mal mit solchen Aussagen solltest du vorsichtiger sein. Die Seite ist sehr wohl brauchbar nur weil dir etwas nicht in den Kram passt, wie so oft, meinst du, dass du eine Seite so runter machen kannst.

Es geht nicht dadrum, ob es @Gunnar Bittersmann in den Kram passt oder nciht.

Bedienelemente müssen bedient werden können. Geht das nicht, ist es schlecht. Schlechtes schlecht zu nenen ist kein schlechtreden. Es ist das benennen von Fakten.

Es ist sicher manchmal schwierig, Gunnars provokante Art zu ertragen. Nur er wird dabei nicht beleidigend, redet nicht von Hass und beschimpft andere nciht als Sprücheklopfer.

Es wäre darum nett, wenn du dich sachlich (gerne ebenso provokant) mit Gunnars Aussage auseinandersetzt und diese gegebenenfalls widerlegst.

Mich nerven solche Pöbeleien nämlich - deswegen melde ich mcih hier zu Wort, nicht weil Gunnar meiner Hilfe bedarf...

Also bitte in Zukunft sachlich und beim Thema bleiben. Danke.

Marc

[Carmen]

Hallo,

Würde ich gerne herausfinden, dummerweise ist das Hamburger-Icon ohne Funktion. Beim Menü sollte man sich an dieser Seite kein Beispiel nehmen.

ich verstehe dein Problem nicht. Wenn ich mit dem Handy auf die Seite gehe kann ich das Nav Icon ohne Probleme klicken. Auch wenn ich die Seite im Browser kleiner ziehe funktioniert alles super. Aber dieses war gar nicht die Frage, es ging mir nur um die Animation.

[mark]

könnt ihr mir vielleicht sagen, wie die Animation auf der Seite http://sportlaune.de/ im Bereich ** Sport macht Laune, finde es selber heraus! ** umgesetzt wurde?

mit Css Transitions.

Ich weiß nicht, wie gut du mit Entwicklerwerkzeugen deines Browsers umgehen kannst, aber, wenn du die Entwicklerwerkzeuge deines Browsers öffnest und auf "div.info-box info-box_type_boxed-2" ein Hover setzt siehst du, wie sich die entsprechenden Eigenschaften der span.info-box__desc Elemente ändern.

Kernstück der Punkte Animation ist folgende Zeile:

transition: all .1s ease .5s; 

Erklärung: all - alle css Eigenschaften werden animiert .1s - Dauer der Animation = 0.1 Sekunden ease - Geschwindigkeitskurve der Animation .5s - Zeitverzögerung mit der die Animation startet

Du siehst anhand des letzten Parameters der transition Eigenschaft, dass alle Punkte gestaffelt starten:

Transition der Punkte: first: transition: all .1s ease; second: transition: all .1s ease .05s; third: transition: all .1s ease .1s;

Nun gilt es noch zu klären welche Eigenschaften animiert werden, bzw. was sich hinter dem Wert ALL verbirgt. Dazu vergleiche ich die CSS EIgenschaften eines Punktes mit und ohne Hover. Im Nachfolgenden am Beispiel des Ersten Punktes (Browserprefixes hab ich weckgelassen):

Ohne Hover auf div.info-box info-box_type_boxed-2

.info-box_type_boxed-2 .info-box__desc-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #b4b4b4;
    display: inline-block;
    vertical-align: middle;
    margin: 0 3px;
    opacity: 1;
    transition: all .1s ease .3s;
}

Mit Hover auf div.info-box info-box_type_boxed-2

.info-box_type_boxed-2:hover .info-box__desc-dot {
    opacity: 0;
}

.info-box_type_boxed-2:hover .info-box__desc-dot_first {
    transition: all .1s ease;
}

Du siehst: er ändert die opacity- und die transition- Eigenschaft.

• Durch opacity:0 werden die Elemente ausgeblendet.
• Durch die Änderung der Transition erreicht der Autor, dass zwar alle Punkte unterschiedlich (zeitverzögert) ausgeblendet werden, jedoch beim Einblenden alle gleichzeitig zu sehen sind.

Dann zum Text der eingeblendet wird. Das p-Element. Auch hier die selbe vorgehensweise: Man vergleicht die CSS-Eigenschaften vor und nach dem Hovern.

Vor dem Hover:

.info-box_type_boxed-2 .info-box__desc p {
    font-size: 13px;
    line-height: 18px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease,
                opacity .5s ease;
} 

Nach dem Hover:

.info-box_type_boxed-2:hover .info-box__desc p {
    max-height: 70px;
    opacity: 1;
    transition: max-height .7s ease .15s,
                opacity .8s linear .2s;
}

Durch opacity und die max-height wird das Element eingeblendet. Durch den letzten Parameter der transition Eigenschaft (.15s und .2s) passiert das Einblenden des Textes erst nachdem die Punkte ausgeblendet wurden.

Normalerweise würde sich der eingeblendete Text nun nach unten öffnen. Dass sich die Elemente der innerhalb der Box (icon, Überschrift, Text) immer zentrieren erreicht der autor durch ein recht unschönes display: table-cell; vertical-align: middle; auf dem div.info-box__inner - Element.

ZAG FEDDISCH ist die CSS Animation. Ich hoffe du kannst damit was anfangen.

Was du bei deiner Umsetzung besser machen kannst als der Autor:

• benutze nicht transition: all, sondern explizite Angaben, was du animieren möchtest. Das macht es leichter für andere deinen Code zu lesen und hilft u.U. dabei Fehler zu finden.
• Wenn du schon CSS3 verwenden kannst benutze für die vertikale Zentrierung in diesem Fall nicht table-cell, sondern transforms.
• schau dir nicht das Markup (HTML) ab. Das ist wahrscheinlich autogeneriert von irgendeinem Wordpress Page-Builder und hat eigentlich nur seine Berechtigung, dadurch, dass man es billig kaufen kann.

[mark]

Falscher Thread, aber: @admin: meine Zeilenumbrüche sind weg, wenn ich ein minus davor setze. Ist das gewollt.

lg

[Matthias Apsel]

Hallo mark,

@admin: meine Zeilenumbrüche sind weg, wenn ich ein minus davor setze. Ist das gewollt.

Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@mark

Was du bei deiner Umsetzung besser machen kannst als der Autor:

• benutze nicht transition: all, sondern explizite Angaben, was du animieren möchtest.

Und ändere möglichst nur das, was performant läuft.

Das ist wahrscheinlich autogeneriert von irgendeinem Wordpress Page-Builder und hat eigentlich nur seine Berechtigung, dadurch, dass man es billig kaufen kann.

Wenn es unbrauchbar ist, hat es gar keine Berechtigung.

LLAP 🖖