Grafische(?) Verlinkung

[Gido]

Hallo, wenn man auf dieser Seite: https://www.tipp-kick.de/ ganz nach unten scrollt, trifft man bei "Sie finden uns hier" zu den Social-Media-Links. Wenn man mit dem Mauszeiger drüber fährt, bewegt sich das Hexagon-Ding um 45 Grad (wenn ich das richtig sehe), die Zeichen (Facebook-Logo, Instagram-Logo, YouTube-Logo) drehen sich ja nicht mit. Langer Anlauf, kurze Frage: Wie mache ich das bzw. nach welchen Begriffen muss ich googeln? Ich href-rotate mir seit Ewigkeiten einen zurecht und finde nix. Ich weiß, dass das Schnick-Schnack ist, aber ich bekomme an Weihnachten nicht nur Socken und Unterbuxxen und finde ein bisschen Spielerei ganz toll. Vielen Dank! Gido

[Raketenwissenschaftler]

Variante 1:

Das Sechseck befindet sich innerhalb des Link-Tags und wird, sobald für den Link die Psedeudoklasse :hover zutrifft, gedreht. Das eigentliche Symbol ist einfach eine darüber befindliche Grafik.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Variante 2:

Sechseck und eigentliche Symbol sind als SVG ausgeführt. Auf dessen einzelne Subelemente kann dann, wie oben, auch CSS angewendet werden.

[Gunnar Bittersmann]

@@Raketenwissenschaftler

Variante 2:

Sechseck und eigentliche Symbol sind als SVG ausgeführt.

Ja, so sollte man das machen. Auf der fraglichen Seite wurden Iconfonts verwendet – eine mittelgute Idee. Lies: eine schlechte. Nicht machen!

Font Awesome bietet alle Icons auch als SVG an.

Auf dessen einzelne Subelemente kann dann, wie oben, auch CSS angewendet werden.

Ja, aber ich würde hier schon das ganze Sechseck drehen und nicht jede Ecke einzeln.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Raketenwissenschaftler]

Ja, aber ich würde hier schon das ganze Sechseck drehen

Ja klar. Ich meinte mit Sublemente:

1. Das Sechseck.
2. Das Facebook||Twitter||Sonstwas-Ding.

[Gunnar Bittersmann]

@@Gido

wenn man auf dieser Seite: https://www.tipp-kick.de/ ganz nach unten scrollt, trifft man bei "Sie finden uns hier" zu den Social-Media-Links. Wenn man mit dem Mauszeiger drüber fährt, bewegt sich das Hexagon-Ding um 45 Grad (wenn ich das richtig sehe)

Das siehst du falsch. Das Sechseck dreht so weit, dass jede Ecke auf den Platz der rechts von ihr liegenden gedreht wird. Und 360° geteilt durch 6 ist wieviel?

Egal. Die Rechnerei kann man auch dem Computer überlassen. Dafür gibt’s die Einheit turn (eine Umdrehung). Der Drehwinkel ist calc(1turn/6).

Langer Anlauf, kurze Frage: Wie mache ich das bzw. nach welchen Begriffen muss ich googeln?

Gar nicht. Einfach ins Entwicklertool deines Browsers schauen („Element untersuchen“ in Firefox, „Element-Informationen“ in Safari, „Untersuchen“ in Edge und Chrome). Haste doch installiert, oder?

Ich href-rotate mir seit Ewigkeiten einen zurecht und finde nix.

Da findeste, dass im a-Element zwei spans sind: eins fürs Sechseck, eins fürs Icon.

Das erste wird bei a:hover gedreht – und das animiert (transition).

Ich weiß, dass das Schnick-Schnack ist

Ja, Schnickschnack haben die Entwickler der Website hingekriegt, aber an den Grundlagen mangelt es. Die a-Elemente haben keine Beschriftung – unbedienbarer Mist; es nehmen ja nicht alle Nutzer die Seite visuell wahr.

Jeder Link muss einen Linktext haben. Der kann auch visuell versteckt werden.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Linuchs]

Wenn du Spaß an Schnickschnack hast, hier ist eine Kompaßrose, die sich im Gehäuse dreht.

Das Bild des Kampassrahmens liegt unter der Kompassrose. Die Rose ist ein quadratisches Bild, außerhalb des Kreises transparent und hat die Klasse drehlogo:

.drehlogo {
  -webkit-transition: -webkit-transform 3s ease;
  -moz-transition: -moz-transform 3s ease;
  -ms-transition: -ms-transform 3s ease;
  -o-transition: -o-transform 3s ease;
  transition: transform 3s ease;
}
.drehlogo:hover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

<div style="position:relative;width:7em;height:7em;float:left;margin-right:.5em;">
  <img src="img_themen/kompassrahmen.png" alt="kompassrahmen" style="width:100%;height:100%" />
  <div style="position:absolute;left:10%;width:80%;top:10%;height:80%;">
    <img class="drehlogo" src="img_themen/kompassrose_dreh.png" alt="kompassrose" style="width:100%;height:100%;" />
  </div>
  <div style="position:absolute;left:50%;width:.1pt;top:10%;height:40%;border-left:.1pt solid #0f0;"></div>
</div>

Linuchs

[Gunnar Bittersmann]

@@Linuchs

.drehlogo {
  -webkit-transition: -webkit-transform 3s ease;
  -moz-transition: -moz-transform 3s ease;
  -ms-transition: -ms-transform 3s ease;
  -o-transition: -o-transform 3s ease;
  transition: transform 3s ease;
}
.drehlogo:hover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

Keine der Vendor-Präfix-Eigenschaften macht Sinn. Wenn einige davon je sinnvoll waren, ist das lange her. Da solltest du mal ausmisten.

<div style="position:relative;width:7em;height:7em;float:left;margin-right:.5em;">
  <img src="img_themen/kompassrahmen.png" alt="kompassrahmen" style="width:100%;height:100%" />
  <div style="position:absolute;left:10%;width:80%;top:10%;height:80%;">
    <img class="drehlogo" src="img_themen/kompassrose_dreh.png" alt="kompassrose" style="width:100%;height:100%;" />
  </div>
  <div style="position:absolute;left:50%;width:.1pt;top:10%;height:40%;border-left:.1pt solid #0f0;"></div>
</div>

Die Alternativtexte machen auch keinen Sinn. Von „Kompassrahmen Kompassrose“ hat ein Screenreader-Nutzer nichts. Wenn, dann sollte eins der img den Alternativtext „Kompass“ haben; das andere keinen, d.h. alt="". Hier handelt es sich aber um eine Verzierung, also keine Alternativtexte.

Die divs müssen auch nicht sein. Als Container für die beiden Grafiken bietet sich svg an, dann bekommt man das auch responsiv hin. ☞ Codepen

Die Zeit für den Effekt ist bei dir zu lange. Val Head rät: Wenn man denkt, es sei gut, die Zeit nochmal durch 2 teilen. In deinem Fall sogar durch 3.

Anmerkungen:

• aria-hidden="true" versteckt die Verzierung vor Screenreadern
• clip-path: circle() sorgt dafür, dass der Hover-Effekt nur bei der kreisförmigen Kompass-Fläche eintritt, nicht beim umgebenden Quadrat
• @media not (prefers-reduced-motion) sorgt dafür, dass der Effekt nicht bei Nutzern eintritt, die mit Bewegungen auf Webseiten nicht klarkommen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Die Zeit für den Effekt ist bei dir zu lange. Val Head rät: Wenn man denkt, es sei gut, die Zeit nochmal durch 2 teilen. In deinem Fall sogar durch 3.

Warum? Ich denke, diese Animation lebt von der Gemütlichkeit. Niemand muss sie sich bis zum Ende anschauen und ganz viele werden gar nicht mitbekommen, dass es sie überhaupt gibt.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Warum? Ich denke, diese Animation lebt von der Gemütlichkeit. Niemand muss sie sich bis zum Ende anschauen und ganz viele werden gar nicht mitbekommen, dass es sie überhaupt gibt.

Hm, mir war sie zu langsam.

Mal einen Nutzertest machen: mehreren Leuten den Kompass mit transition-times von 0.5s, 0.7s, 1s, 1.4s, 2s, 2.8s, 4s zeigen und fragen, was sie am besten finden.

Dabei daran denken, verschiedenen Versuchpersonen die Reihe in verschiedenen Reihenfolgen zu präsentieren, um Sequenzeffekte zu vermeiden.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gido]

Vorab vielen Dank natürlich an alle!

☞ Codepen

Bei der Variante tut sich bei mir gar nix, ich sehe zwar den Kompass, aber der bewegt sich nicht.

[Gunnar Bittersmann]

@@Gido

Vorab vielen Dank natürlich an alle!

☞ Codepen

Bei der Variante tut sich bei mir gar nix, ich sehe zwar den Kompass, aber der bewegt sich nicht.

Hm, WebKits und Chromia kommen irgendwie mit dem not nicht klar. Ich hab da mal
@media (prefers-reduced-motion: no-preference) draus gemacht, jetzt geht’s. (In Browsern, die diesen media query unterstützen. Andere sind egal. Lieber keine Animation in Uralt-Browsern als Animation bei Nutzern, die das nicht wollen.)

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Keine der Vendor-Präfix-Eigenschaften macht Sinn. Wenn einige davon je sinnvoll waren, ist das lange her. Da solltest du mal ausmisten.

Gerade gesehen, dass dir dasselbe in einem anderen Thread auch gesagt wurde.

Die Zeit für den Effekt ist bei dir zu lange. Val Head rät: Wenn man denkt, es sei gut, die Zeit nochmal durch 2 teilen. In deinem Fall sogar durch 3.

Was bei deinem Effekt auch stört: Am Ende verlangsamt sich die Bewegung und bleibt dann zielgenau stehen. Das wirkt unnatürlich; die Kompassnadel weiß ja nicht vorher, wo genau sie anhalten muss.

Die Nadel muss erstmal übers Ziel hinausschießen, um dann umzukehren. Das erreicht man mit
transition-timing-function: cubic-bezier(…). Beim Finden der passenden Parameter hilft Lea Verous Tool.

Jetzt im Codepen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Der Martin]

Moin,

Was bei deinem Effekt auch stört: Am Ende verlangsamt sich die Bewegung und bleibt dann zielgenau stehen. Das wirkt unnatürlich

du hast noch nie einen flüssigkeits-gedämpften Kompass gesehen? Die Flüssigkeit darin ist normalerweise so viskos, dass genau das von dir beschriebene Verhalten eintritt: Die Nadel "schleicht" sich etwas zäh an die Zielposition heran.
Der primäre Zweck dieser starken Dämpfung ist aber, den Kompass unempfindlich gegenüber Erschütterungen zu machen.

Die Nadel muss erstmal übers Ziel hinausschießen, um dann umzukehren. Das erreicht man mit
transition-timing-function: cubic-bezier(…). Beim Finden der passenden Parameter hilft Lea Verous Tool.

Bei einem quasi ungedämpften Kompass ist das so. Und genaugenommen ist es da auch kein einmaliges Überschwingen, sondern eine allmählich abklingende Schwingung. Die Kompassnadel pendelt mit abnehmender Amplitude um die tatsächliche Peilung.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Und genaugenommen ist es da auch kein einmaliges Überschwingen, sondern eine allmählich abklingende Schwingung. Die Kompassnadel pendelt mit abnehmender Amplitude um die tatsächliche Peilung.

Ja, klar. Das ist aber mit einer Bezier-Kurve nicht hinzubekommen. Da müsste man für transition mehrere genau aufeinander abgestimmte single-transitions angeben. Das war mir dann doch zu aufwendig.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!