Einfliegen eines Textes

CSS und andere hilfreiche Anweisungen
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Einfliegen eines Textes

Ungelesener Beitrag von Tommy Herrmann »

Hier mal eine kleine CSS-Animation, die ich zum Einfliegen der "Breadcrumb Navigation" auf dieser Seite eingesetzt habe:

https://www.mobirise-tutorials.com/Tuto ... crumb.html

Hier die CSS:

Code: Alles auswählen

.myslide { 
 animation-duration: 3s; 
 animation-name: slidein; 
} 
@keyframes slidein {
 from { 
  margin-left: 100%; 
  width: 300%; 
 } 
 to { 
  margin-left: 0%; 
  width: 100%; 
 } 
}
Da in der CSS oben eine Breite von 300% zum Einfliegen von rechts angegeben ist, kann es bei bestimmten Elementen, wie z.B. dem Hamburger Button am mobilen Gerät zu einem Overflow (Überlauf) kommen, daher habe ich das auch noch unterbunden, indem ich diese Style-Anweisung in den Seiteneinstellungen in den Bereich "Inside <head> code" geschrieben habe:

Code: Alles auswählen

<style> 
 html { 
  overflow-x: hidden;
 }
</style>
Die class="myslide" setzt ihr dann an den Textbereich oder auch an irgendeinen <div> Bereich, der einfliegen soll.
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste