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

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

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

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.

Beispiel Codeschnipsel

Liebe Gr��e,
Icetea'

02/28/2021 23:38 Enzario#8

Quote:
Originally Posted by Icetea'
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.
Beispiel Codeschnipsel
Code:
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}
HTML Code:
<header>
  <a href="#">Home</a>
  <a href="#">Register</a>
  <a href="#">Download</a>
  <a href="#">Contact</a>
</header>
Liebe Gr��e,
Icetea'

Mega, vielen Dank daf�r!!

Ich meld mich :)