Ist es möglich einen Text wie in einem Film-Abspann automatisch herunterlaufen zu lassen?

Question

Hallo

Ist es möglich einen Text wie in einem Film-Abspann automatisch herunterfahren zu lassen oder muss ich ein Video dafür verwenden?

Wir haben mehrere Namen mit kurzen Beschreibungen, welche wir langsam durchlaufen lassen wollen, nachdem die Teilnehmer eine Fallvignette gelesen haben.
Oben soll dann so etwas stehen wie:
"Genau wie der Person, deren Beschreibung sie eben gelesen haben erging es auch folgenden Personen"

Hans
Ist sehr aktiv im Sportverein.

Fritz
Macht gerne Spässe.

Anna
Ihr liebstes Hobby ist kochen.

etc.

Wie gesagt sollen die Namen automatisch wie in einem Abspann langsam herunterlaufen.
Zusätzlich wäre es super, wenn die Namen jeweils in einer zufälligen Reihenfolge aufgelistet werden könnten (auch wenn ich mir vorstellen kann, das das eher nicht geht).

Die einzige Möglichkeit dafür, die mir bis jetzt einfällt ist ein Video zu erstellen und das einzubetten, aber es wäre eleganter, wenn es ohne Video ginge.

Vielen Dank!

Answer 1

aber es wäre eleganter, wenn es ohne Video ginge.

Eleganter ja, aber auch ein wenig anspruchsvoller. Sie werden dafür nämlich JavaScript benötigen. Hier ein Beispiel wie das aussehen könnte:

<div style="position: relative; width: 100%; height: 400px; overflow: hidden; border: 2px solid blue;">
  <div id="scrollContent" style="position: absolute;">
    Hier kommt der eigentliche Inhalt.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
  </div>
</div>

<script type="text/javascript">
var pos = 0;
window.setInterval(function() {
  pos++;
  document.getElementById("scrollContent").style.top = -pos + "px";
}, 100);
</script>

Zum angucken: https://jsfiddle.net/poam7czx/

Comments

Vielen herzlichen Dank für die Antwort! Das hilft mir wirklich sehr weiter!
Ich werde es auf jeden Fall mal mit dem JavaScript versuchen, im Notfall kann ich immer noch auf die Videolösung zurückgreifen (auch wenn ich die JavaScript Lösung bevorzuge).
Nochmals vielen vielen Dank!