Page Opening Animation/Transition

02/28/2021 22:20 Enzario#1
Moin epvp'ers,

und zwar stellt sich mir folgende Frage:
Ich hab wollte das sobald man auf meine Page geht eine loading Animation aus meinem Monogram erstellt und aus einzelnen Elementen des Monograms sollen dann Elemente für das Grundlayout darstellen.

Ich hab dafür mal eine Concept Gif erstellt, ist so etwas möglich? Und wenn ja, wie?

Es ist für ein Portfolio und innerhalb des Rahmens soll dann der Content der Page dargestellt werden. Die zwei Striche werden links zu einem Menü aus drei Strichen. das "gc" wird oben links zum Logo mit einem getippten Text mit Delay um die aktuelle Page anzuzeigen.

Hoffe ihr könnt mir helfen :)
[Only registered and activated users can see links. Click Here To Register...]
02/28/2021 22:34 False#2
Ja ist mit CSS Animationen möglich.
02/28/2021 22:43 Enzario#3
Quote:
Originally Posted by False View Post
Ja ist mit CSS Animationen möglich.
Ein Tipp wonach ich googeln muss?
HTML & CSS Basic's hab ich drauf, den rest würd ich mir dann versuchen anzueignen.
02/28/2021 22:48 False#4
Wenn du nach CSS Animation/transition suchst solltest du eigentlich schon alles finden.
02/28/2021 22:50 Icetea#5
Quote:
Originally Posted by Enzario View Post
Ein Tipp wonach ich googeln muss?
HTML & CSS Basic's hab ich drauf, den rest würd ich mir dann versuchen anzueignen.
Such einfach mal nach CSS3 Keyframes. Dazu solltest du eigentlich genügend Anleitungen zum Erstellen von Animationen ganz ohne JavaScript finden.

edit: Sehe gerade, dass False dir die Antwort bereits vorher gegeben hatte.

Liebe Grüße,
Icetea'
02/28/2021 22:52 Enzario#6
Perfekt, danke Leute :)
Dann setz ich mich mal ran, ich komm bei fragen nochmal drauf zurück

Eine frage bleibt jedoch noch, wenn ich das über CSS3 Animations/Keyframes löse, dann nutzt er doch ein Bild, kann der Border und die zusätzlichen Elemente dann responsive sein?
02/28/2021 23:07 Icetea#7
Quote:
Originally Posted by Enzario View Post
Eine frage bleibt jedoch noch, wenn ich das über CSS3 Animations/Keyframes löse, dann nutzt er doch ein Bild, kann der Border und die zusätzlichen Elemente dann responsive sein?
Nein, du arbeitest nicht automatisch mit einem Bild wenn du das über CSS3 Keyframes löst. Habe hier mal einen Beispiel Codeschnipsel für dich, welchen du einfach bei JSFiddle mal ausprobieren kannst um das Ganze nach und nach zu verstehen.


Liebe Grüße,
Icetea'
02/28/2021 23:38 Enzario#8
Quote:
Originally Posted by Icetea' View Post
Nein, du arbeitest nicht automatisch mit einem Bild wenn du das über CSS3 Keyframes löst. Habe hier mal einen Beispiel Codeschnipsel für dich, welchen du einfach bei JSFiddle mal ausprobieren kannst um das Ganze nach und nach zu verstehen.


Liebe Grüße,
Icetea'
Mega, vielen Dank dafür!!

Ich meld mich :)