Einfliegen eines Textes
Verfasst: Sa 17. Sep 2022, 08:54
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:
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:
Die class="myslide" setzt ihr dann an den Textbereich oder auch an irgendeinen <div> Bereich, der einfliegen soll.
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%;
}
}
Code: Alles auswählen
<style>
html {
overflow-x: hidden;
}
</style>