Tag Vier

CSS Animationen

Eine CSS-Animation ist ein visueller Effekt, der durch Veränderungen von CSS-Eigenschaften über einen bestimmten Zeitraum hinweg erzeugt wird.

Eine simple Animation

Die @keyframes-Regel definiert den Start- und Endpunkt der Animation. In diesem Beispiel wird die Hintergrundfarbe eines Elementes geändert, wenn die Animation abgespielt wird.

            @keyframes simpleAnimation {
  from {
	background-color: Salmon;
  }
  to {
	background-color: LightBlue;
  }
}

/* Die Animation einem Element hinzufügen. */
div {
  animation-name: simpleAnimation;
  animation-duration: 4s;
}
        

Eine komplexere Animation

CSS Animationen können verschiedene Werte beinhalten und schnell komplex werden. Eine Box, welche ihre Grösse und Farbe mehrfach ändert, könnte zum Beispiel so animiert werden.

            @keyframes complexAnimation {
    0% {
        transform: scale(1);
        border-radius: 0;
        background-color: red;
    }
    25% {
        transform: scale(0.5);
        border-radius: 100%;
        background-color: yellow;
    }
    50% {
        transform: scale(1);
        border-radius: 0;
        background-color: blue;
    }
    75% {
        transform: scale(2);
        border-radius: 100%;
        background-color: green;
    }
    100% {
        transform: scale(1);
        border-radius: 0;
        background-color: black;
    }
}

div {
  	animation-name: complexAnimation;
  	animation-duration: 4s;
  	/* Lässt die Animation unendlich lange laufen */
  	animation-iteration-count: infinite; 
	/* Lässt die Animation abwechslungsweise von vorne und hinten laufen */
	animation-direction: alternate; 
}
        

Unser Sneaker Store entsteht

Schau dir mal das Figma File der finalen Challenge aus unserem ersten Modul Coding Basics an.

Wie du siehst, hat sich da einiges gemacht. Dies werden wir in den letzten drei Tagen gemeinsam nachbauen.

Eine Website bauen, einen Server imitieren

Um eine Website mit mehreren Seiten – welche ineinander referenziert sind – zu erstellen müssen wir uns einer Serverseitigen Programmiersprache Namens PHP bedienen. PHP ist eine weit verbreitete und für den allgemeinen Gebrauch bestimmte Open Source-Skriptsprache, welche speziell für die Webprogrammierung geeignet ist und in HTML eingebettet werden kann.

Um PHP Dokumente zu bearbeiten, müssten wir einen Server erstellen. Damit dies nicht all zu unkompliziert ist, bedienen wir uns MAMP, was in Sekundenschnelle auf deinem Gerät eine lokale Serverumgebung installiert.

PHP Code formatieren

Genauso wie HTML und CSS Dokumente mit Prettier lassen sich auch PHP Files automatisch formatieren.

• Installiere die VS Code Extension PHP Intelephense.

• Ergänze deine settings.json mit nachfolgendem Code.

                "[php]": {
        "editor.defaultFormatter": "bmewburn.vscode-intelephense-client",
        "editor.formatOnSave": true,
    },