Ein Bild schieben, um Text mit CSS-Animationen anzuzeigen

Ich möchte mir die CSS-Animationseigenschaft genauer ansehen und einen Effekt durchgehen, den ich auf meiner eigenen Portfolio-Website verwendet habe: Text hinter einem sich bewegenden Objekt erscheinen lassen. Hier ist ein isoliertes Beispiel, falls Sie das Endergebnis sehen möchten.

Hier ist, womit wir arbeiten werden

Sehen Sie den Pen
Revealing Text Animation Part 4 – Responsive von Jesper Ekstrom (@jesper-ekstrom)
auf CodePen.

Selbst wenn Sie sich nicht besonders für den Effekt selbst interessieren, ist dies eine ausgezeichnete Übung, um Ihre CSS-Kenntnisse zu erweitern und eigene einzigartige Animationen zu erstellen. In meinem Fall hat mir das tiefe Eintauchen in die Animation geholfen, mehr Vertrauen in meine CSS-Fähigkeiten zu gewinnen und meine Kreativität zu steigern, was mich insgesamt mehr für die Frontend-Entwicklung interessierte.

Bereit? Los geht's!

Schritt 1: Die Hauptelemente markieren

Bevor wir mit den Animationen beginnen, erstellen wir einen übergeordneten Container, der das gesamte Viewport abdeckt. Darin fügen wir den Text und das Bild hinzu, jeweils in einem separaten Div, damit sie später leichter angepasst werden können. Die HTML-Markup wird wie folgt aussehen

<!-- The parent container -->
<div class="container"> 
  <!-- The div containing the image -->
  <div class="image-container">
  <img src="https://jesperekstrom.com/wp-content/uploads/2018/11/Wordpress-folder-purple.png" alt="wordpress-folder-icon">
  </div>
  <!-- The div containing the text that's revealed -->
  <div class="text-container">
    <h1>Animation</h1>
  </div>
</div>

Wir werden diesen bewährten Transformations-Trick verwenden, um die Divs sowohl vertikal als auch horizontal mit position: absolute; innerhalb unseres übergeordneten Containers zu zentrieren. Da das Bild vor dem Text angezeigt werden soll, geben wir ihm einen höheren z-index-Wert.

/* The parent container taking up the full viewport */
.container {
  width: 100%;
  height: 100vh;
  display: block;
  position: relative;
  overflow: hidden;
}

/* The div that contains the image  */
/* Centering trick: https://css-tricks.de/centering-percentage-widthheight-elements/ */
.image-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2; /* Makes sure this is on top */
}

/* The image inside the first div */
.image-container img {
  -webkit-filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));
  filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));
  height: 200px;
}

/* The div that holds the text that will be revealed */
/* Same centering trick */
.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1; /* Places this below the image container */
  margin-left: -100px;
}

Wir lassen Herstellerpräfixe in den Codebeispielen in diesem Beitrag weg, aber sie sollten definitiv in Betracht gezogen werden, wenn dies in einer Produktionsumgebung verwendet wird.

Hier ist, was uns bisher ergibt, was im Grunde unsere beiden Elemente sind, die übereinander gestapelt sind.

Sehen Sie den Pen
Revealing Text Animation Part 1 – Mail Elements von Jesper Ekstrom (@jesper-ekstrom)
auf CodePen.

Schritt 2: Den Text hinter einem Block verstecken

Damit unser Text von links nach rechts angezeigt wird, müssen wir ein weiteres Div innerhalb unseres .text-container hinzufügen

<!-- ... -->

  <!-- The div containing the text that's revealed -->
  <div class="text-container">
    <h1>Animation</h1>
    <div class="fading-effect"></div>
  </div>
  
<!-- ... -->

… und diese CSS-Eigenschaften und -Werte hinzufügen

.fading-effect {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: white;
}

Wie Sie sehen können, versteckt sich der Text jetzt hinter diesem Block, der eine weiße Hintergrundfarbe hat, um mit unserem übergeordneten Container zu verschmelzen.

Wenn wir die Breite des Blocks ändern, beginnt der Text zu erscheinen. Probieren Sie es ruhig im Pen aus

Sehen Sie den Pen
Revealing Text Animation Part 2 – Hiding Block von Jesper Ekstrom (@jesper-ekstrom)
auf CodePen.

Es gibt noch eine weitere Möglichkeit, diesen Effekt zu erzielen, ohne einen zusätzlichen Block mit einem Hintergrund darüber hinzuzufügen. Diese Methode werde ich später im Artikel behandeln. 🙂

Schritt 3: Die Animations-Keyframes definieren

Nun sind wir bereit für den spaßigen Teil! Um unsere Objekte zu animieren, werden wir die Animationseigenschaft und ihre @keyframes-Funktion nutzen. Beginnen wir mit der Erstellung zweier verschiedener @keyframes, einer für das Bild und einer für den Text, die dann wie folgt aussehen werden

/* Slides the image from left (-250px) to right (150px) */
@keyframes image-slide {
  0% { transform: translateX(-250px) scale(0); }
  60% { transform: translateX(-250px) scale(1); }
  90% { transform: translateX(150px) scale(1); }
  100% { transform: translateX(150px) scale(1); }  
}

/* Slides the text by shrinking the width of the object from full (100%) to nada (0%) */
@keyframes text-slide {
  0% { width: 100%; }
  60% { width: 100%; }
  75%{ width: 0; }
  100% { width: 0; }
}

Ich füge alle @keyframes lieber am Anfang meiner CSS-Datei ein, um eine bessere Dateistruktur zu haben, aber das ist nur eine Präferenz.

Der Grund, warum die @keyframes nur einen kleinen Teil ihres Prozentwerts (hauptsächlich von 60-100%) verwenden, liegt darin, dass ich beide Objekte über die gleiche Dauer animieren möchte, anstatt eine animation-delay zur Klasse hinzuzufügen, auf die sie angewendet wird. Das ist einfach meine Präferenz. Wenn Sie dasselbe tun, denken Sie daran, immer einen Wert für 0 % und 100 % festzulegen, da die Animation sonst rückwärts laufen oder andere seltsame Interaktionen auftreten können.

Um die @keyframes auf unsere Klassen anzuwenden, rufen wir den Animationsnamen über die CSS-Eigenschaft animation auf. Wenn wir zum Beispiel die image-slide-Animation auf das Bildelement anwenden, würden wir das so machen

.image-container img {
  /* [animation name] [animation duration] [animation transition function] */
  animation: image-slide 4s cubic-bezier(.5,.5,0,1);
}

Der Name der @keyframes funktioniert genauso wie die Erstellung einer Klasse. Mit anderen Worten, der Name ist eigentlich egal, solange er auf dem Element, auf das er angewendet wird, gleich genannt wird.

Wenn der cubic-bezier-Teil Kopfzerbrechen bereitet, dann schauen Sie sich diesen Beitrag von Michelle Barker an. Sie behandelt das Thema ausführlich. Für die Zwecke dieser Demo genügt es zu sagen, dass es eine Möglichkeit ist, eine benutzerdefinierte Animationskurve zu erstellen, wie sich das Objekt von Anfang bis Ende bewegt. Die Website cubic-bezier.com ist ein großartiger Ort, um diese Werte ohne Rätselraten zu generieren.

Wir haben ein wenig darüber gesprochen, dass wir eine Schleifenanimation vermeiden wollen. Wir können das Objekt zwingen, an Ort und Stelle zu bleiben, sobald die Animation 100 % erreicht, mit der Untereigenschaft animation-fill-mode

.image-container img {
  animation: image-slide 4s cubic-bezier(.5,.5,0,1);
  animation-fill-mode: forwards;
}

Bis jetzt alles gut!

Sehen Sie den Pen
Revealing Text Animation Part 3 – @keyframes von Jesper Ekstrom (@jesper-ekstrom)
auf CodePen.

Schritt 4: Code für Responsivität

Da die Animationen auf festen (Pixel-)Größen basieren, verschieben sich die Elemente, wenn sich die Viewport-Breite ändert, was schlecht ist, wenn wir Elemente basierend auf ihrer Position verstecken und anzeigen wollen. Wir könnten mehrere Animationen für verschiedene Media Queries erstellen, um das zu handhaben (was ich anfangs getan habe), aber es macht keinen Spaß, mehrere Animationen gleichzeitig zu verwalten. Stattdessen können wir die gleiche Animation verwenden und ihre Eigenschaften an bestimmten Breakpoints ändern.

Zum Beispiel:

@keyframes image-slide {
  0% { transform: translatex(-250px) scale(0); }
  60% { transform: translatex(-250px) scale(1); }
  90% { transform: translatex(150px) scale(1); }
  100% { transform: translatex(150px) scale(1); }
}

/* Changes animation values for viewports up to 1000px wide */
@media screen and (max-width: 1000px) {
  @keyframes image-slide {
    0% { transform: translatex(-150px) scale(0); }
    60% { transform: translatex(-150px) scale(1); }
    90% { transform: translatex(120px) scale(1); }
    100% { transform: translatex(120px) scale(1); }
  }
}

Hier sind wir, alles responsive!

Sehen Sie den Pen
Revealing Text Animation Part 4 – Responsive von Jesper Ekstrom (@jesper-ekstrom)
auf CodePen.

Alternative Methode: Textanimation ohne farbigen Hintergrund

Ich habe versprochen, dass ich später eine andere Methode für den Fade-Effekt zeigen würde, also lass uns darauf eingehen.

Anstatt ein ganz neues Div zu erstellen — <div class="fading-effect"> — können wir mit ein paar Farbentricksereien den Text ausschneiden und ihn mit dem Hintergrund verschmelzen lassen

.text-container {
  background: black;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Dadurch wird der Text transparent, wodurch die Hintergrundfarbe dahinter durchscheinen kann und ihn effektiv versteckt. Und da dies ein Hintergrund ist, können wir die Hintergrundbreite ändern und sehen, wie der Text von der ihm zugewiesenen Breite geschnitten wird. Dies macht es auch möglich, lineare Farbverläufe zum Text hinzuzufügen oder sogar ein Hintergrundbild darin anzuzeigen.

Der Grund, warum ich diese Route in der Demo nicht gewählt habe, ist, dass sie mit Internet Explorer nicht kompatibel ist (beachten Sie die -webkit-Herstellerpräfixe). Die Methode, die wir in der tatsächlichen Demo behandelt haben, ermöglicht es, den Text gegen ein anderes Bild oder ein beliebiges anderes Objekt auszutauschen.

---

Ziemlich nette kleine Animation, oder? Sie ist relativ subtil und dient als schöne Verbesserung von UI-Elementen. Zum Beispiel könnte man sie verwenden, um erklärende Texte oder sogar Bildunterschriften anzuzeigen. Oder mit etwas JavaScript könnte man die Animation beim Klicken oder an einer Scroll-Position auslösen, um Dinge etwas interaktiver zu gestalten.

Haben Sie Fragen dazu, wie etwas funktioniert? Sehen Sie etwas, das es besser machen könnte? Lassen Sie es mich in den Kommentaren wissen!