Webdesign - Text verändert langsam seine Farbe wie bei einer Laufschrift

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Textfarbe langsam von links nach rechts ändern

04Okt2015

Text verändert langsam seine Farbe wie bei einer Laufschrift


Eine Supportanfrage lautete: Wie kann man die Textfarbe beim Überfahren mit der Maus langsam von links nach rechts ändern?
Dazu sollte die Linie unter dem Text ebenfalls die Farbe ändern, allerdings von rechts nach links.
Mein erster Ansatz war: "Das funktioniert nur mit JavaScript (objektorientierte Programmiersprache)". Aber dann habe ich doch noch eine Lösung gefunden, die rein mit CSS (Cascading Style Sheet) umgesetzt ist.

Zuerst einmal werde ich die Vorgehensweise für die Linie erklären. Diese ist ähnlich aufgebaut wie der Hintergrund bei einem "externen Seitenaufruf".
Der 2 Pixel breiten Linie wird zuerst einmal die Farbe "schwarz" zugeordnet und dem Cursor das Symbol einer Hand zugewiesen. Diese erscheint dann beim Überfahren mit der Maus. Die Schrift in dem "span-Element" setze ich noch auf "schwarz" und "fett".
Damit die Linie beim Zurückfahren nur unter dem Text angezeigt wird, benötige ich noch die Angabe "display: inline-block".
Da ich das Pseudo-Element ":before" für die Textfarbe benötige, werde ich die Linie mit dem Pseudo-Element ":after" realisieren. Das Element wird mit der Angabe "position: absolute" und den weiteren Angaben nach unten rechts gesetzt. Die Linie, mit einer Stärke von 2 Pixel, erhält hierbei die Farbe "rot". Da aber die Länge der Linie zuerst 0% beträgt, wird die rote Farbe erst beim Überfahren mit der Maus innerhalb von einer halben Sekunde von rechts nach links eingeblendet.
Zum Testen fahren Sie bitte mit der Maus über Test der Linie.

<span class="line">
    Test der Linie
</span>
.line {
    display: inline-block;
    position: relative;
    font-weight: bold;
    color: #000;
    border-bottom: 2px solid #000;
    cursor: pointer;
}

.line:after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 0;
    border-bottom: 2px solid #f00;
    transition: .5s;
}

.line:hover:after {
    width: 100%;
}

Nun werde ich bei der Textfarbe ähnlich vorgehen wie bei der Linie und dafür das Pseudo-Element ":before" benutzen.
Das Pseudo-Element ".tex:before" erhält die Farbe "rot", die dann beim Überfahren mit der Maus erscheint. Damit der Text, der aus mehreren Wörtern bestehen kann, in einer Zeile angezeigt wird, füge ich noch die Anweisung "white-space: nowrap" ein. Ansonsten würde der Text aus der Anweisung "content: ''" nach jedem Wort einen Zeilenumbruch erstellen. Dann wird eine Transition mit einer Dauer von einer halben Sekunde eingestellt. Wenn ich mit dem Mauszeiger nun über den Text bin, wird die Zeit der Transistion gestartet. Während dieser Zeit wird die Größe des roten Textes auf 100% gestellt. Das heißt nach einer halben Sekunde hat sich die Farbe von "schwarz" nach "rot" geändert.
Der Clou bei dem Ganzen ist die Anweisung "overflow: hidden", denn damit wird nur der Text angezeigt der innerhalb "width: " liegt.
Der Nachteil bei dieser Methode ist, dass der Text im CSS (Cascading Style Sheet) in der Anweisung für "content: ''" identisch dem Text in der HTML (HyperText Markup Language)-Datei sein muss, und somit für jeden Text individuell ist.
Bewegen Sie bitte zum Testen die Maus über diesen Text.

<span class="line tex">
    über diesen Text
</span>
.tex:before {
    content: 'über diesen Text';
    position: absolute;
    white-space: nowrap;
    color: #f00;
    width: 0;
    overflow: hidden;
    transition: .5s linear;
}

.tex:hover:before {
    width: 100%;
}

Eine weitere Möglichkeit besteht durch die Anweisung "content: attr(data-text)" und der entsprechenden Angabe im HTML (HyperText Markup Language). Nur leider ist diese Anweisung nicht valide, hat aber den Vorteil, dass man die Design-Angaben im CSS (Cascading Style Sheet) nur einmal vornehmen muss, und der Text auch nur im HTML (HyperText Markup Language) vorkommt. Alle anderen Anweisungen bleiben exakt gleich.

<span class="line tex2" data-text="über diesen weiteren Text">
    über diesen weiteren Text
</span>
.tex2:before {
    content: attr(data-text) ' ';
    position: absolute;
    white-space: nowrap;
    color: #f00;
    width: 0;
    overflow: hidden;
    transition: .5s linear;
}

.tex2:hover:before {
    width: 100%;
}

Und damit kommen wir zur dritten Möglichkeit, die dazu auch noch valide ist!
Es ist der gleiche Ansatz wie bei der Umsetzung meiner "Tool-Tipps", und für die Textanzeige in der Farbe "rot" setze ich ein zweites "span-Element" ein.
Die Anzeige des normalen Textes wird mit der Klasse "line" realisiert, bei der die Schrift auf "schwarz" und "fett" eingestellt ist. Alle anderen Angaben für die Linie bleiben gleich, habe sie aber der Vollständigkeitshalber hier noch einmal aufgeführt.
Damit der rote Text wieder nur in einer Zeile erscheint, kommt die Anweisung "white-space: nowrap" zum Einsatz.
Der Text in roter Farbe (Klasse: tex3) wird durch die Angabe "width: 0" und "overflow: hidden" auf unsichtbar gesetzt, da die Größe des "span-Element" zuerst 0 Pixel beträgt und der Text, der darüber hinausgeht, durch die Angabe "overflow: hidden" nicht angezeigt wird. Erst wenn der Mauszeiger sich über dem Wort befindet, wird die Größe mit "width: 100%" innerhalb einer halben Sekunde auf 100% und damit sichtbar geschaltet.
Bewegen Sie bitte wieder zum Testen die Maus über was für ein schöner Text was für ein schöner Text.

<span class="line">
    was für ein schöner Text
    <span class="tex3">
        was für ein schöner Text
    </span>
</span>
.line {
    display: inline-block;
    position: relative;
    font-weight: bold;
    color: #000;
    border-bottom: 2px solid #000;
    cursor: pointer;
}

.line:after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 0;
    border-bottom: 2px solid #f00;
    transition: .5s;
}

.line:hover:after {
    width: 100%;
}

.tex3 {
    position: absolute;
    white-space: nowrap;
    color: #f00;
    left: 0;
    width: 0;
    overflow: hidden;
    transition: .5s linear;
}

.line:hover .tex3 {
    width: 100%;
}

Auch für einen Verweis zu einer anderen Seite ist diese Variante einsetzbar. Besuchen Sie doch mal das Tutorial über eine Diashow mit dem Ken Burns Effekt Diashow mit dem Ken Burns Effekt.

Und vielen Dank an HaJo für die Anfrage. Ich habe zwar für die Umsetzung etwas Zeit benötigt, aber es war eine nette Herausforderung um auf die richtige Lösung zu kommen.

Hi Klaus,
genial, so wollte ich es haben ;-)
Primstens!!
LG
HaJo


06Okt2015

Ein Text erscheint wie von Geisterhand


Für diesen besonderen Effekt müssen Sie mit dem Mauszeiger den Bogen Papier berühren.

Aber Achtung!
Sobald Sie mit dem Mauszeiger vom Bogen Papier abrutschen, ist der Text wieder verschwunden.

Eine Laufschrift! Und mit dieser dritten Variante ist es jetzt sogar möglich, dass der Text der animiert werden soll, vorher gar nicht zu sehen ist, sondern erst nach einiger Zeit, wie von Geisterhand, als Laufschrift auf dem Bogen Papier erscheint. Hierfür benötigt man allerdings für jede Zeile ein eigenes "span-Element". Und die Animation wird für jedes Element zeitversetzt gestartet!

Für das Papier und die genauen Abgrenzungen zum Rand wird ein "div-Container" verwendet, und die Texte erhalten für jede Zeile ein separates "span-Element". Auch hierbei wird wieder die Angabe "overflow: hidden" verwendet, um den Text abzuschneiden, beziehungsweise auszublenden.

<div class="brief">
    <span class="tex41">
        Eine Laufschrift!
    </span>
    <span class="tex42">
        Und mit dieser dritten...
    </span>
    .
    .
    .
    <span class="tex48">
        zeitversetzt gestartet!
    </span>
</div>
.brief {
    background: url('/bilder/Brief.png') no-repeat;
    position: relative;
    width: 42em;
    height: 31em;
    cursor: pointer;
}

.tex41,
.tex42,
.tex43,
.tex44,
.tex45,
.tex46,
.tex47,
.tex48 {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    font: bold 1.1em 'Comic Sans MS';
    color: #00f;
    width: 0;
    overflow: hidden;
}

Für die einzelnen Zeilen wird mit "padding: oben, rechts, unten, links" der Abstand von oben und links festgesetzt. Die Zeitdauer beträgt für alle Zeilen 10 Sekunden, wobei aber zum Beispiel die zweite Zeile bereits nach 3 Sekunden startet. Das hängt dann jeweils von der vorherigen Zeilenlänge ab.

.brief:hover .tex41 {
    padding: 80px 0 0 250px;
    animation: text2 10s linear both;
}

.brief:hover .tex42 {
    padding: 130px 0 0 80px;
    animation: text2 10s 3s linear both;
}

    .
    .
    .

.brief:hover .tex48 {
    padding: 330px 0 0 80px;
    animation: text2 10s 51s linear both;
}

@keyframes text2 {
    to {width: 100%;}
}

Damit ist eine animierte Laufschrift möglich um seine Werbung effektvoll zu präsentieren!

Zum Seitenanfang springen Λ