Frage Textbox öffnet sich bei Klick mit Animation

[Brodi]

Hallo liebes HTML Forum

Ich brauche Hilfe bei der Realisierung eines Effectes.
Wie der Titel bereits etwas erwähnt: Ich möchte gerne, dass wen man auf einen Text klickt, daneben - als eine Animation - eine Linie gezeichnet wird, welche dann ein Fenster aufspannt und darin dann ein Text erscheint.
Ich habe zur Veranschaulichung den Ablauf gezeichnet in welcher Form ich mir das Vorgestellt habe.
Habt ihr eine Vorstellung wie man das machen könnte?

Ich kenne mich dem Basics von HTML und CSS aus, aber so etwas zu machen übersteigt mein aktuelles Können.

Hoffe auf Hilfestellungen, Tipps und/oder Tutorials welche mir helfen würden, sowas zu bauen.

Liebe Grüsse
Brodi

 

[basti1012]

Da hast du dir ja was schönes vorgenommen. Ich denke schon das es geht ,aber ob das dann auch responsiv wird,das bezweifel ich noch.
Aber ich versuche es mal

 

[Tronjer]

Warum soll das nicht responsiv werden? So etwas lässt sich bsw. per Canvas oder SVG in Verbindung mit CSS Ani / Keyframes umsetzen. Da es nur um einfache Linien im 90^-Winkel geht, reichen sogar DIVs anstelle des SVG.

 

[basti1012]

Ja ,ich frage mich sowieso wie man das am besten macht. Mit svg habe ich es zwar hinbekommen aber der Code ist so umständlich geworden das ich es nicht mal posten möchte. Versuche es gerade mit keyframes und svg ,das klappt auch nur so halbwegs. Wie meinst du das den mit divs?
Svg und Canvas ist voll nicht mein fall,da muß ich mich erst rein arbeiten.Aber hier gibt es ja noch welche die es können,vieleicht haben die mal Zeit das zu machen.Mein versuch ist nicht sehenswert.

 

[Tronjer]

Wie meinst du das den mit divs?

Ein Blockelement mit Border, das sich per Animation vergrößert.

 

[basti1012]

Mein Vorschlag:

Ja ,viel besser als mein erster Versuch.
Zum lachen = > http://sebastian1012.bplaced.net/homepagebasti1012/forumscripte_juni2018/svg_line.php
Ich wahr auch schon dabei es mit divs zu versuchen,nur mein weg sah viel Komplizierter aus.
Aber man sieht ja es geht auch einfacher.

 

[Brodi]

Wooow! Cool, da habt ihr beide euch ja ins Zeug gelegt. Hätte nicht so schnell mit einer Lösung gerechnet. Danke Vielmals.
Ich werde mir die Sache jetzt genau anschauen, den Code verstehen und versuche es in die Website soweiter zu implementieren.

Danke! Danke!

PS: Bezüglich responsiv: Das geht natürlich nicht mehr mit dem Effect, wenn man im Mobile-Sicht ist, dann steht der Text einfach unter dem Titel ("Klickbarer Text"). ;-)

 

[basti1012]

PS: Bezüglich responsiv: Das geht natürlich nicht mehr mit dem Effect, wenn man im Mobile-Sicht ist, dann steht der Text einfach unter dem Titel ("Klickbarer Text"). ;-)

Für eine Mobile sicht könnte man das nach unten Animieren.Müßte man nur in @mediaqueries dann angeben.Also theoretisch auch machbar.