Alle Techniken, die Text bewegen, blinken lassen oder aktualisieren und die einen statischen Textblock erstellen können.
Die Technik bezieht sich auf:
Einige Webseiten zeigen scrollenden Text an, weil nur begrenzt Platz zur Verfügung steht. Das Scrollen des Textes in einem kleinen Fenster stellt den Inhalt für Benutzer bereit, die schnell genug lesen können, führt aber bei Benutzern, die langsamer lesen oder assistierende Techniken benutzen, zu Problemen. Diese Technik stellt einen Mechanismus bereit, um die Bewegung zu stoppen und den gesamten Textblock statisch bereitzustellen. Der Text kann in einem separaten Fenster oder in einem (größeren) Abschnitt der Seite bereitgestellt werden. Benutzer können den Text dann in ihrer eigenen Geschwindigkeit lesen.
Diese Technik passt nicht, wenn der sich bewegende Text nicht auf einmal auf dem Bildschirm (z.B. eine lange Chat-Unterhaltung) angezeigt werden kann.
Anmerkung: Diese Technik kann in Kombination mit einer Style-Switching-Technik benutzt werden, um eine Seite darzustellen, die eine konforme Alternativversion für nicht-konformen Inhalt ist. Für weitere Informationen beachten Sie C29: Benutzung eines Style-Switchers, um eine konforme Alternativversion zur Verfügung zu stellen (CSS) und Konforme Alternativversionen verstehen.
Ein großer Textblock wird durch einen kleinen marquee-Bereich auf der Seite gescrollt. Eine Schaltfläche ermöglicht es dem Benutzer, das Scrollen anzuhalten und den gesamten Textblock anzeigen zu lassen.
Anmerkung: Dieses Code-Beispiel setzt voraus, dass sowohl CSS als auch JavaScript angeschaltet sind und zur Verfügung stehen.
Die CSS-Komponente :
Code-Beispiel:
#scrollContainer {
visibility: visible;
overflow: hidden;
top: 50px; left: 10px;
background-color: darkblue;
}
.scrolling {
position: absolute;
width: 200px;
height: 50px;
}
.notscrolling {
width: 500px;
margin:10px;
}
#scrollingText {
top: 0px;
color: white;
}
.scrolling #scrollingText {
position: absolute;
}
</a> Der Script- und HTML-Inhalt:
Code-Beispiel:
<script type="text/javascript">
var tid;
function init() {
var st = document.getElementById('scrollingText');
st.style.top = '0px';
initScrolling();
}
function initScrolling () {
tid = setInterval('scrollText()', 300);
}
function scrollText () {
var st = document.getElementById('scrollingText');
if (parseInt(st.style.top) > (st.offsetHeight*(-1) + 8)) {
st.style.top = (parseInt(st.style.top) - 5) + 'px';
} else {
var sc = document.getElementById('scrollContainer');
st.style.top = parseInt(sc.offsetHeight) + 8 + 'px';
}
}
function toggle() {
var scr = document.getElementById('scrollContainer');
if (scr.className == 'scrolling') {
scr.className = 'notscrolling';
clearInterval(tid);
document.getElementById('scrollButton').value="Shrink";
} else {
scr.className = 'scrolling';
initScrolling();
document.getElementById('scrollButton').value="Expand";
}
}
<input type="button" id="scrollButton" value="Expand" onclick="toggle()" />
<div id="scrollContainer" class="scrolling">
<div id="scrollingText" class="on">
.... Text to be scrolled ...
</div>
</div>
...Hier ist ein funktionierendes Beispiel dieses Codes: Expanding Scrolling Text in Place (Ausklappen des scrollenden Textes an Ort und Stelle).
Für diese Technik gibt es keine Tests.