JavaScript JavaScript und Css Animation gestalten ?!

[Jakko1004]

Hallo liebe Community,

ich brauche bei meiner Homepage, die ich gerade erstelle noch mal Hilfe...

UND zwar möchte ich gerne folgendes gestalten.

Drei Buttons sind auf einer Seite gestaltet.
Wenn man auf eine Button draufklickt, soll sich erst eine Art kleines Textfeld nach unten ausfahren.
Dann soll da z.B. drinne stehen:
Titel: Aktuelles
kleiner Text: Wenn ihr Ankündigungen und News lesen wollt, klickt hier.
Dann soll da noch ein kleiner Button mit "Weiter" drinne sein.

Jz kommen wir zum dem meiner ansicht nach schweren teil, weil ich keine Ahnung von Javascript habe.

Wenn man auf den Weiter Button klickt, sollen sich die Drei Buttons verkleinern und nach oben links in die Ecke schieben. Dann soll sich eine großes Textfeld mit News öffnen. Die drei Buttons sollen aber noch oben rechts zu sehen sein. und wenn man auf einen anderen Button klickt soll sich das große textfeld schließen und von dem andren öffnen.

Meine Frage ist ob mir jmd dabei helfen könnte, dass umzusetzen bzw. mir sagen kann was ich davon in js und was in css programmieren muss.
Links von Websites, die ähnliches erklären, sind auch hilfreich.

mfg
jakko1004

 

[Hudey]

Hallo,

Gerne kann ich dir weiterhelfen. Verstehe aber noch nicht ganz den Aufbau deines Wunschdesigns.

Verstehe ich das richtig:

Zu Beginn stehen 3 (große) Buttons auf der Seite. Wo sind die platziert, wenn du Sie danach in eine Ecke schieben willst?

Jeder Button löst zuerst eine kleine Box aus, die einen Button enthält welcher dann eine große Box auslöst.
Sollen die großen Boxen auf Seitengröße sein? Soll immer nur eine große Box vorhanden sein?

 

[Jakko1004]

Hallo,

danke erst einmal.

Ja , zu beginn sind drei große Buttons vorhanden. die auf der Seite mittig zentriert sind. Dann sollen sich beim klicken die Buttons minimal nach oben verschieben, sodass nach unten ein kleines Textfeld ausfahren kann mit einem Button. wenn man diesen klickt soll , ganz richtig wie du das verstehst. eine große Box aufgehen, die etwa 90% der Seite ausmacht. die restlichen 10% sind quasi oben frei, wo sich dann die Buttons hinverschieben sollen.
Und ja es soll immer nur eine box vorhanden sein. Wenn man auf den nächsten Button klickt soll sich die erste große box schließen und die zweite quasi ausfahren.

Das hast du schon alles ziemlich richtig verstanden .

danke

mfg
jakko1004

 

[Hudey]

Also ich würde dir nicht empfehlen zu viel mit Animationen zu arbeiten, das nervt den Benutzer irgendwann. Trotz allem hab ich mal ein JSFiddle gemacht, dass dir ein paar Techniken zeigt, mit welchen du dein Problem lösen könntest:

https://jsfiddle.net/grwhm98z/4/

Die Animationen habe ich in CSS mit der "transition" Eigenschaft realisiert.
Für die Navigations- und Inhaltselemente habe ich mit CSS 2 Designs (eingeklappt, ausgeklappt) realisiert und dann arbeite ich mit ein paar Javascript Anweisungen um zwischen den 2 Gestalten hin und herzuschalten.

Wenn du gar keine Erfahrung in Javascript und CSS hast wird dich der Quellcode erstmal überwältigen. Ich kann dir auch nicht alle Eigenschaften hier erklären, das ist der falsche Ort denke ich.

Schau dir den Quellcode mal an und Google die Elemente die du nicht verstehst, wenn du grundsätzliche Fragen hast kannst du die dann ja auch nochmal hier stellen.

 

[Jakko1004]

Riesiges Dankeschön schonmal