Laufschrift erstellen
Ich habe eine Seite erstellt, die Laufschriften enthält.
Vom Prinzip bin ich damit recht zufrieden, aber ich vermute es geht etwas besser.
Meine Laufschriften habe ich nämlich 3 mal.
1. die sichtbare Laufschrift.
2. die Lautschrift, aber im Grunde nur um eine Hintergrundfarbe durchgängig zu bekommen (Also auch vor und nach dem Text. Nach dem Text hätte ich auch durch ändern von width ohne diesen Text hinbekommen, aber leider habe ich es davor nicht geschafft.)
3. die Laufschrift, aber nur damit genügend Platz ist um nicht zu weit hoch und runter zu scrollen und der ganze Text sichtbar ist.
Der hier verwendete Code
<!DOCTYPE html>
<html lang="en_GB">
<head>
<title></title>
<meta charset="UTF-8" />
<style>
body {
font-size: 22pt;
white-space: normal;
height:150%;
overflow:hidden;
animation:hoch_runter 15s ease-in-out infinite;
}
table {
font-size: 22pt;
white-space: normal;
background-color: rgb(255, 255, 255);
border-collapse: collapse;
page-break-inside: avoid;
}
th {
background-color: rgb(50, 50, 50);
color: rgb(255, 255, 255);
}
tr.odd {
background-color: rgb(200, 255, 200);
color: rgb(0, 0, 0);
}
tr.even {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
}
@keyframes hoch_runter{
0%{
margin-top:0;
}
50%{
margin-top:-150%;
}
100%{
margin-top:0;
}
}
#topScroller{
white-space:nowrap;
top:0;
left:0;
font-size: 40pt;
font-family: cursive;
background-color: rgb(69, 255, 97);
color:black;
width:100%;
position:fixed;
z-index:1;
height: 50px;
overflow: hidden;
top:0;
}
#topScroller .innen {
position: absolute;
width: 100%;
height: 100%;
line-height: 50px;
text-align: center;
transform:translateX(100%);
animation: run_top 25s linear infinite;
}
@keyframes run_top {
0% {
transform: translateX(100%);
}
100%{
transform: translateX(-500%);
}
}
#bottomScroller{
white-space:nowrap;
bottom:0;
left:0;
width:100vw;
font-size: 35pt;
font-family: monospace;
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
position:fixed;
z-index:1;
}
.innenunten{
animation:run_bottom 5s linear infinite;
}
@keyframes run_bottom{
0%{
margin-left:-100vw;
}
100%{
margin-left:100vw;
}
}
</style>
</head>
<body>
<div id="topScroller"><div class="innen">News Ticker --- You can add a text here --- It might be very long --- Even longer than screen width --- Please let me know if this ticker is fine</div>
</div>
<h2>Substitution Table</h2>
<h1>Tuesday, 13 October 2020</h1>
<p><b>Absent Teachers:</b> Alex (1-6), Anita (1-6), Anna (1-6), Greta (1-6)</p>
<p><b>Substitution:</b></p>
<table border="1" >
<tr><th>Teacher</th><th>Hour</th><th>Subject</th><th>Teachers</th><th>Students</th><th>Rooms</th><th>Comment</th></tr>
<tr class="odd"><td>Agnes</td><td>1</td><td>MA</td><td><b style="color: red;"><s>Alex</s></b><br /></td><td>10c</td><td></td><td> Overtime</td></tr>
<tr class="even"><td>Agnes</td><td>6</td><td>EK</td><td><b style="color: red;"><s>Greta</s></b><br /></td><td>5d</td><td></td><td> Overtime</td></tr>
<tr class="odd"><td>Alina</td><td>1</td><td>CH</td><td><b style="color: red;"><s>Anita</s></b><br /></td><td>7c</td><td>401</td><td> Overtime</td></tr>
<tr class="even"><td>Jan</td><td>4</td><td>EK</td><td><b style="color: red;"><s>Greta</s></b><br /></td><td>5b</td><td></td><td> Overtime</td></tr>
<tr class="odd"><td>Jenny</td><td>2</td><td>EK</td><td><b style="color: red;"><s>Greta</s></b><br /></td><td>5c</td><td></td><td> Overtime</td></tr>
<tr class="even"><td>Julia</td><td>5</td><td>GE</td><td><b style="color: red;"><s>Anna</s></b><br /></td><td>7b</td><td></td><td> Overtime</td></tr>
<tr class="odd"><td>Laura</td><td>6</td><td>BI</td><td><b style="color: red;"><s>Anita</s></b><br /></td><td>9IF</td><td>401</td><td> Overtime</td></tr>
<tr class="even"><td>Lina</td><td>2</td><td>EN</td><td><b style="color: red;"><s>Anna</s></b><br /></td><td>9d</td><td></td><td> Overtime</td></tr>
<tr class="odd"><td>Linda</td><td>2</td><td>MA</td><td><b style="color: red;"><s>Alex</s></b><br /></td><td>6b</td><td></td><td> Overtime</td></tr>
<tr class="even"><td>Maren</td><td>3</td><td>EN</td><td><b style="color: red;"><s>Greta</s></b><br /></td><td>9b</td><td></td><td> Overtime</td></tr>
<tr class="odd"><td>Marie</td><td>5</td><td>EK</td><td><b style="color: red;"><s>Greta</s></b><br /></td><td>9c</td><td></td><td> Overtime</td></tr>
<tr class="even"><td>Max</td><td>1</td><td>EN</td><td><b style="color: red;"><s>Greta</s></b><br /></td><td>7d</td><td></td><td> Overtime</td></tr>
<tr class="odd"><td>Max</td><td>3</td><td>DE</td><td><b style="color: red;"><s>Anna</s></b><br /></td><td>9d</td><td></td><td> Overtime</td></tr>
<tr class="even"><td>Mona</td><td>3</td><td>CH</td><td><b style="color: red;"><s>Anita</s></b><br /></td><td>8a</td><td>162</td><td> Overtime</td></tr>
<tr class="odd"><td>Mona</td><td>4</td><td>GE</td><td><b style="color: red;"><s>Anna</s></b><br /></td><td>7d</td><td></td><td> Overtime</td></tr>
<tr class="even"><td>Otto</td><td>3</td><td>MA</td><td><b style="color: red;"><s>Alex</s></b><br /></td><td>9a</td><td></td><td> Overtime</td></tr>
<tr class="odd"><td>Otto</td><td>4</td><td>MA</td><td><b style="color: red;"><s>Alex</s></b><br /></td><td>9d</td><td></td><td> Overtime</td></tr>
<tr class="even"><td>Pia</td><td>5</td><td>BI</td><td><b style="color: red;"><s>Anita</s></b><br /></td><td>10SW</td><td>403</td><td> Extra Supervision<br /></td></tr>
<tr class="odd"><td>Simon</td><td>1</td><td>EN</td><td><b style="color: red;"><s>Anna</s></b><br /></td><td>9c</td><td></td><td> Overtime</td></tr>
<tr class="even"><td>Tanja</td><td>2</td><td>CH</td><td><b style="color: red;"><s>Anita</s></b><br /></td><td>8c</td><td>401</td><td> Overtime</td></tr>
</table>
<table style="float: right;"><tr><td><small>www.timetabling.de</small></td></tr></table>
<div id="bottomScroller"><div class="innenunten">Have a nice day!</div></div>
</body>
</html>