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>