Antworten zum Thema „Animierter Halbkreis bei Mousscrolling nur über CSS realisierbar?“

[Andimau]

Hallo,

auf folgender Seite erscheint dieser Halbkreis oben im Header. Dieser ist wohl animiert.

Hat jemand einen Tip wie man sowas realisiert?
Ist das rein über CSS zu realisieren?

https://www.tonguetieclinic.com/
Dankeschön!

 

[Panobilder]

Ich seh zwar keine Animation, aber das Design scheint ein recht ansprechendes Zusammenspiel von html, CSS und SVG zu sein. Irgendwas mit wordpress und bootstrap sind auch zu entdecken im code...

 

[Myhar]

Ich sehe auch keine Animation.

 

[dn3d_fanboy]

Der Kreis ist nur ein rundes <div>, dass entsprechend nach oben verschoben wurde.
Wenn du die Animation der Inhalte meinst, die erscheinen, wenn man auf die drei Menüpunkte im "Halbkreis" klickt, dann passiert das mit Javascript. Hier wird eine der drei Sections beim Klick sichtbar gemacht und die anderen werden nicht sichtbar gemacht. Die Animation wird vermutlich durch das entsprechende Javascript (ich tippe mal es wurde mit jQuery und eventuell toggle) realisiert.

Hier findest du die verantwortliche JS-Datei: https://www.tonguetieclinic.com/wp-content/themes/tongriem/assets/js/main-min.js

 

[dn3d_fanboy]

Im Prinzip könntest du für so etwas aber auch jedes JS/jQuery - Tabs-Script dafür zweckentfremden.

 

[Andimau]

Hallo

danke für die Infos! Als Animation meine ich das Erscheinen des Halbkreises von top to bottom wenn man einen Link in der Navigation anklickt.

Vermutlich meinst du das auch dn3d_fanboy ?

 

[Myhar]

Nein, er meint das, wenn man die inhalte im Tab wechselt. Dann gibt es eine fade in-out Animation.
Zeigt aber wieder schön wei wichtig es ist, gleich von Beginn an deutlich zu schreiben, es hat nämlich niemand der hier antwortenden gewusst was du meinst.

Jetzt, da es klar ist: Das wird mit transform: translate3d(0px, -220px, 10px); gelöst (Die Werte stimmen nicht ganz, hab das jetzt nur aus den dev-tools kopiert. Aber es gibt eine transition auf transform auf dem .circle-inner-wrapper element.