Animation erstellen - Bild zuerst mittig, anschließend "fließt" Text heraus?
Hallo Community, ich denke ihr habt am Titel schon ungefähr gelesen worum es geht. Ich möchte gerne eine Animation erstellen. Am besten eine per CSS, damit ich sie in allen Webseiten verwenden kann. In der Animation soll zuerst mein Logo (also ein Bild) zusehen sein. Anschließend rückt das Bild ein Stück nach Rechts und nach Links hin "fließt" ein Text neben dem Bild ein. Es soll dann letztendlich "Producted by [Bild]" dastehen.
Wie mache ich das? Die Animation soll nur beim mit der Maus drüber schweben angezeigt werden! Also wie :hover bei CSS.
Viele Grüße!
2 Antworten
Da gibt es 1000 Herangehensweisen.
Eine habe ich dir mal auf die Schnelle gebaut:
HTML:
<div class="logo-text-container">
<img class="logo" src="https://via.placeholder.com/400x150.png?text=Logo"/>
<span class="text">Produced by</span>
</div>
CSS:
.logo-text-container{
display: block;
position: relative;
height: 150px;
width: 300px;
}
.text{
position: absolute;
top: 50%;
left: 50%;
transition: all .3s;
}
.logo{
position: absolute;
top: 0;
left: 50%;
z-index: 1;
transition: all .3s;
}
.logo-text-container:hover .logo{
left: 66.6%;
}
.logo-text-container:hover .text{
position: absolute;
top: 50%;
left: 33.3%;
}
Hier kannst du es testen:
Kein Problem. Ich habe einen Haufen Arbeit vor mir und das war ne schöne Fingerübung/Ablenkung. Also...danke dir :)
Nochmal eine Kleinigkeit geändert:
https://jsfiddle.net/ag85yzsc/
Gucke ich mir gleich an. Nun ist es so das mein Logo weiß ist. Man sieht also die Schrift durch das Logo hindurch. Kann man das noch ändern?
Ich schicke dir mal mein Logo. Nimm das bitte und füge es ein. Die Schrift sollte blau , fett und in der Schritart Arial sein. Die Schrift soll mittig aus dem Logo heraus kommen. Dann wirst du auch sehen was ich mit meinem letzten Kommentar meinte.
Hier mein Logo: https://em-cloud-solutions.de/alt/logos/logo_small.png
kannste ja mal probieren. Wäre super nett :)
Google nach css transformation:translate
Danke! Ich werde noch einige Sachen wie Farben, Größe und so ändern, dennoch ist es das was ich gesucht habe! Danke dir!!!