header-xh-01 header-xh-02 header-xh-03 header-xh-04 header-xh-05 header-xh-06 header-xh-07 header-xh-08 header-xh-09 header-xh-10 header-xh-11 header-xh-12 header-xh-13 header-xh-14
Lembach's nichtkommerzielle Website rund um CMSimple_XH
Templates, Plugins, Tools, Programme
und Tips und Tricks die mir wichtig sind
Sie sind hier: Startseite > Tipps und Tricks zusammengetragen > Laufschrift vor Hintergrundbild

Laufschrift vor Hintergrundbild

(wobei das Bild zu 100% dargestellt wird, sein Seitenverhältnis beibehält und sich der Größe des umgebenden Elementes anpasst)

Diese Aufgabenstellung umfasst zwei Problembereiche:

a) Animierte Laufschrift ohne das veraltete (und nie in der regulären HTML-Definition enthaltene) <marquee>

b) Hintergrundgrafik komplett anzeigen, zu 100% die Breite des umschließenden Elementes einnehmen und die Höhe automatisch berechnend, damit das Bild unverzerrt aber skaliert angezeigt wird

Für die Darstellung der Grafik ist CSS und JS (jQuery) notwendig:

Im Template muss dieser Script-Code eingefügt werden:

<script>
// definiert die Höhe eines Bildes (das im Format 19,2 : 3 vorliegt / Aspect) in Abhängigkeit von der Anzeigebreite
var cw = $('.child-bg').width()*300/1920; // der Bild-Aspect wird durch den Quotienten aus Höhe und Breite des Bildes gebildet
$('.child-bg').css({
'height': cw + 'px'
}); // hierdurch wird die Höhe-Eigenschaft definiert
</script>

und in der stylesheet.css (oder einer anderen CSS-Datei, die eingelesen wird) ist dieser Code notwendig:

div.child-bg {
background-image: url(/userfiles/images/headerimages/headerimage1.jpg);
background-size: 100% 100%;
}

Wichtig ist, dass der Klassen-Name übereinstimmt. Hier ist es 'child-bg'.
Angezeigt wird das dann dadurch:

<div class="child-bg">
<div class="marquee">Text, der durchlaufen soll</div>
</div>

Die Laufschrift benötigt nur CSS:

@keyframes marquee {
0% { text-indent: 100% }
100% { text-indent: -100% }
}
/* durch die Zuordnung 0% ⇒ 100% und 100% ⇒ -100% läuft der Text von rechts nach links durch,
   bei der Zuordnung 0% ⇒ -100% und 100% ⇒ 100% läuft der Text von links nach  durch rechts */


p.marquee, div.marquee {
max-width: 100vw;
width: 100%;
min-height: 150px; /* muss evtl. bei niedrigeren Bildern angepasst werden */
margin: auto;
padding: 50px 0px 50px 0px; /* muss evtl. bei niedrigeren Bildern angepasst werden */
overflow: hidden;
white-space: nowrap;
animation: marquee 20s linear infinite; /* die 20s ist die Zeit, die ein Durchlauf dauert */
}

.marquee:hover {
animation-play-state: paused; /* wird die Maus auf dem Text gestellt, bleibt er stehen */
}

Angezeigt wird die Laufschrift durch:

<div class="marquee">Text, der durchlaufen soll</div>


| Seitenanfang |