0t1 steckt noch in den Kinderschuhen.

Font Animation

Du möchtest gerne deine Webseite gestalten, findest jedoch jegliche Fonts zu eintönig? Wir zeigen dir in diesem Tutorial, wie du deinen Text mit einem Animationseffekt zu einem Eyecatcher machen kannst.

Erstelle eine Textanimation, die alles andere in den Schatten stellt.

HTML-Grundgerüst:

Zu Beginn erstellst du eine HTML Datei mit dem Namen index.html. In dieser Datei baust du dein Grundgerüst durch die Pflichtelemente  <!DOCTYPE>, <html>, <head>, <title> und <body> auf.

Gleichzeitig sollte eine CSS-Datei mit dem Namen style.css erstellt werden. Durch das Element <link> verknüpfst du die beiden Dateien, sodass du nun auch nebenbei deine HTML-Elemente gestalten kannst.

<!DOCTYPE html>
<html lang="de">
<link href="css/style.css" rel="stylesheet">



<head>
    <title>  </title>
</head>



<body>
    
</body>

</html>

Im <head>- Bereich werden die beiden Meta-Elemente

<meta charset=”utf-8”> und

<meta name=”viewport” content=”width-devicde-width, initial-scale=1.0”> hinzugefügt.

Diese erleichtern die Verwaltung des Dokuments und dienen zur Optimierung.

Durch das Element <title> kannst du deinem Dokument einen Seitentitel geben.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width-device-width, initial-scale=1.0">

    <title> Tutorial zu Font Animation </title>
  
</head>

Textaufbau in HTML

Im <body>-Bereich erstellst du nun durch zwei heading-Elemente <h2> (nach Bedarf änderbar zu <h1> etc.) deine Überschrift. Das eine wird als Umrandung des Textes dienen, während das zweite Element das “Innere” sein wird, welches du später animieren wirst.

Das heading-Element erfolgt in dem div-Element, das eine Art Container ist.

<body>
    <div> 

    <h2 class="Rand">Gizem</h2>
    <h2 class="Gizem">Gizem</h2> 

    <h2 class="Randzwei">&amp;</h2>
    <h2 class="zeichen">&amp;</h2> 

    <h2 class="Randdrei">Sezin</h2>
    <h2 class="Sezin">Sezin</h2> 

    </div>
</body>

Einmal gespeichert, werfen wir einen Blick in den Browser rein.

Dort wird dir nun ein schlichter Text angezeigt.

Schriftart ändern

Um dies zu ändern, suchst du eine neue Schriftart im Internet aus. Google Fonts bietet dir eine Vielfalt an Schriftarten an. Nachdem du deine gewünschte Schriftart ausgewählt hast, steht dir der Link zur Verfügung. Sollte jedoch der Quelltext veröffentlicht werden, wird die Font gedownloaded und in einem extra Ordner angelegt, um die Copyrightrechte einzuhalten.

Diesen Link kopierst du und bindest es durch das <link>-Element im Header ein. Darauf folgt das <style>-Element, welches Stylesheet-Angaben enthält. Dort kommem die Informationen zur Schriftart rein.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width-device-width, initial-scale=1.0">

    <title> Tutorial zu Font Animation </title>
  
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
    rel="stylesheet">

    <style>

     div{font-family: 'Press Start 2P', cursive;} 

    </style> 
</head>

HTML Endergebnis

<!DOCTYPE html>
<html lang="de">
<link href="css/style.css" rel="stylesheet">



<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width-device-width, initial-scale=1.0">

    <title> Tutorial zu Font Animation </title>
  
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"        
    rel="stylesheet">

    <style>
    div{font-family: 'Press Start 2P', cursive;} 
    </style> 
</head>



<body>
    <div> 

    <h2 class="Rand">Gizem</h2>
    <h2 class="Gizem">Gizem</h2> 

    <h2 class="Randzwei">&amp;</h2>
    <h2 class="zeichen">&amp;</h2> 

    <h2 class="Randdrei">Sezin</h2>
    <h2 class="Sezin">Sezin</h2> 

    </div>
</body>

</html>

Nun ist dein HTML-Gerüst vollständig.

Der eigentliche Spaß fängt jetzt in deinem Stylesheet an. Du wechselst auf deine CSS-Datei.

CSS Gestaltung und Animation

Textposition, -farbe und -umrandung

Wir beginnen damit im <body>, eine Hintergrundfarbe mit der Eigenschaft “background-color” auszuwählen und unsere Elemente mit “align-content” zu zentrieren. Du kannst deinen Text auch an anderen Stellen positionieren. Danach kannst du nach Bedarf den Abstand zwischen den einzelnen Zeichen bestimmen. Dies erfolgt durch die Eigenschaft “letter-spacing”. Durch “margin-top” haben wir noch einen Außenabstand von oben bestimmt. Am Ende wird "overflow:hidden" genutzt, um das Endergebnis fest sitzen zu lassen und damit die Seite nicht mehr scrollbar ist.

body{ background-color: black;
     align-content: center;
     font-family: "Press Start 2P", cursiv;
     letter-spacing: 10px;
     overflow:hidden; }

div{ margin-top: 30em; }

Nun wirst du die Eigenschaften von deinen h2-Elementen ändern. Durch “text-align” bestimmst du die Position deines Textes. Um die Größe deines Textes zu ändern, verwendest du die Eigenschaft “font-size”. Damit der Text sichtbar auf dem schwarzen Hintergrund wird, wurde er vorerst weiß eingefärbt.

h2{ text-align: center;
    font-size: 6em;
    color: white; }

Nun werden wir unsere Textumrandung und die Farbe festlegen. Durch “color” bestimmst du die Farbe deines Textes, während die Eigenschaft “text-shadow” die Schattenverläufe für dein Text-Element bestimmt. Diese Eigenschaft wurde durch das x-Offset (horizontale Verschiebung), das y-Offset (vertikale Verschiebung) und einer Farbangabe definiert. Die Eigenschaft "transform: translateY()" "verschiebt" die Form deines HTML-Elements in die vertikale Richutung.

.Rand{ color: black;
     text-shadow:
     -1px -1px  red, 
     1px -1px  blue,
     -1px 1px  blue,
     1px 1px  red; 
     transform: translateY(-4em); }

Das wird nun mit allen Textelementen für die Umrandung durchgeführt.

.Rand{ color: black;
     text-shadow:
     -1px -1px  red, 
     1px -1px  blue,
     -1px 1px  blue,
     1px 1px  red; 
     transform: translateY(-4em); }

.Randzwei{ color: black;
     text-shadow:
     -1px -1px  white, 
     1px -1px  white,
     -1px 1px  white,
     1px 1px  white;  
     transform: translateY(-6em); }

.Randdrei{ color: black;
     text-shadow:
     -1px -1px  lime, 
     1px -1px  magenta,
     -1px 1px  magenta,
     1px 1px  lime; 
     transform: translateY(-8em); }

So sieht das ganze jetzt im Browser aus.

Animation

Anschließend bestimmen wir die Farbe und Position der Animation. Wir definieren die Eigenschaft “animation”, in welcher wir den Animationsnamen, die Dauer, die Beschleunigung und die Wiederholungsdauer festlegen.

.Gizem{ color: red;
     animation: Animation 3s ease-in-out infinite;
     transform: translateY(-5.9em); }

.zeichen{ color: white;
     animation: Animation 3s ease-in-out infinite;
     transform: translateY(-7.9em); }

.Sezin{ color: lime;
     animation: Animation 3s ease-in-out infinite;
     transform: translateY(-9.9em); }

Das wird nun mit allen Textelementen durchgeführt, welche animiert werden sollen.

.Rand{ color: black;
     text-shadow:
     -1px -1px  red, 
     1px -1px  blue,
     -1px 1px  blue,
     1px 1px  red; 
     transform: translateY(-4em); }

.Gizem{ color: red;
     animation: Animation 3s ease-in-out infinite;
     transform: translateY(-5.9em); }



.Randzwei{ color: black;
     text-shadow:
     -1px -1px  white, 
     1px -1px  white,
     -1px 1px  white,
     1px 1px white;  
     transform: translateY(-6em); }

.zeichen{ color: white;
     animation: Animation 3s ease-in-out infinite;
     transform: translateY(-7.9em); }


.Randdrei{ color: black;
     text-shadow:
     -1px -1px  lime, 
     1px -1px  magenta,
     -1px 1px  magenta,
     1px 1px  lime; 
     transform: translateY(-8em); }

.Sezin{ color: lime;
     animation: Animation 3s ease-in-out infinite;
     transform: translateY(-9.9em); }

Im Browser wird das nun so angezeigt.

Form und Bewegung der Animation

Jetzt sind wir an dem wichtigsten und schwierigsten Part angelangt: der Animation selbst.

Um den Animationseffekt zu erzeugen, benötigst du die Eigenschaft “clip-path”. Diese Eigenschaft erstellt einen Clipping-Bereich, in dem du nur einen Teil deines Elements angezeigt bekommst. Der restliche Teil wird ausgeblendet.

Du schneidest nun dein Element mit der Funktion “polygon”. Das “polygon”-Element definiert ein Vieleck, welches eine Punktmenge besitzt, die ein Objekt beschreibt. Dadurch kannst du mehrere verschiedene Sätze von x-Achsen- und y-Achsenwerten steuern. So kannst du einfache Formen wie Rechtecke oder komplizierte Formen erstellen.

Der Schnitt Prozess erfolgt in einem Bildbearbeitungsprogramm, wie z.B. in dem CSS Clip-Path Maker Clippy.

Wir haben uns von einer Wellenanimation inspiriert und entschieden uns für einen auffüllenden Block. Das heißt wir benötigen zwei Rechtecke.

clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);

clip-path: polygon(0% 100%, 100% 100%, 100% 99%, 0% 99%);

Nun legen wir die einzelnen Schritte einer Animationssequenz mit der “keyframe”-Regel fest. Um bestimmte Punkte während der Sequenz zu erreichen, müssen wir Wegpunkte setzen. Diese geben wir hier mit Prozentwerten an. Danach werden die polygon-Werte mit “clip-path” eingefügt.

@keyframes Animation {

0%, 100% {
clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%); }

50% {
clip-path: polygon(0% 100%, 100% 100%, 100% 99%, 0% 99%); }
                      }

Fertig! :)

CSS Endergebnis

body{ background-color: black;
    align-content: center;
    font-family: "Press Start 2P", cursiv;
    letter-spacing: 10px;
    overflow:hidden; }


div{ margin-top: 30em; }


h2{ text-align: center;
    font-size: 6em;
    /*color: white;*/ }



.Rand{ color: black;
    text-shadow:
    -1px -1px  red, 
    1px -1px  blue,
    -1px 1px  blue,
    1px 1px  red; 
    transform: translateY(-4em); }

.Gizem{ color: red;
    animation: Animation 3s ease-in-out infinite;
    transform: translateY(-5.9em); }



.Randzwei{ color: black;
    text-shadow:
    -1px -1px  white, 
    1px -1px  white,
    -1px 1px  white,
    1px 1px  white;  
    transform: translateY(-6em); }

.zeichen{ color: white;
    animation: Animation 3s ease-in-out infinite;
    transform: translateY(-7.9em); }


.Randdrei{ color: black;
    text-shadow:
    -1px -1px  lime, 
    1px -1px  magenta,
    -1px 1px  magenta,
    1px 1px  lime; 
    transform: translateY(-8em); }

.Sezin{ color: lime;
    animation: Animation 3s ease-in-out infinite;
    transform: translateY(-9.9em); }



@keyframes Animation {

0%, 100% {
clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%); }

50% {
clip-path: polygon(0% 100%, 100% 100%, 100% 99%, 0% 99%); }
                     }

Endergebnis Animation

Quellen:

-https://developer.mozilla.org/en-US/ 20.11.2022

-https://wiki.selfhtml.org/wiki/SELFHTML 20.11.2022

-https://pokecoder.hashnode.dev/create-a-wavy-text-effect-with-pure-css 20.11.2022

-https://bennettfeely.com/clippy/ 20.11.2022

Zum Download der ZIP Datei


© 0t1

Cookies

0t1 mag keine Kekse (und kein Tracking). Wir verwenden lediglich notwendige Cookies für essentielle Funktionen.

Wir verwenden Schriftarten von Adobe Fonts. Dafür stellt dein Browser eine Verbindung zu den Servern von Adobe in den USA her. Wenn du unsere Seite nutzen möchtest, musst du dich damit einverstanden erklären.

Weitere Informationen in unserer Datenschutzerklärung.