TIPS
by
NETtMAN

CSS-News-Ticker - Code ohne Javascript und ohne animerte Bilder !

CSS-News-Ticker - Code ohne Javascript und ohne animerte Bilder !


<div id="css_ticker">
<span id="tipp"><a href="#">Brandneu</a></span>
<scroll>
<div class="zeile"><a href="#">Wann wird es besser ?</a></div><br>
<div class="zeile"><a href="#">Es werden immer mehr</a></div><br>
<div class="zeile"><a href="#">Inferno ungebremst</a></div><br>
<div class="zeile"><a href="#">Alternativlos geblieben</a></div><br>
<div class="zeile"><a href="#">Unter dem Sofa ...</a></div><br>
</scroll>
</div>



Soweit der HTML-Teil. Er besteht aus 2 Containern. Ersterer mit einer Art Stempel, welcher als Hyperlink fungieren kann, muss aber nicht.

Der 2. Container enthält in diesem Beispiel 5 Zeilen. Diese können genau wie die Zeilen im Quellcode auf eine beliebige Anzahl gebracht werden, wobei im Quellcode nur die Texte angepasst werden - auf Ihre Inhalte.

Der ganz unten angegebene CSS-Teil braucht nur im Bereich "@keyframes" auf die geänderte Anzahl Zeilen umgerechnet werden. Die Prozentualen Schritte, im Beispiel : " 0%, 20%, 40%, 60%, 80%, 100% " sind immer ein Schritt mehr als die Anzahl der Zeilen. Beispiel mit 4 Zeilen :

0% {margin-top: 0;}
25% {margin-top: -27px;}
50% {margin-top: -54px;}
75% {margin-top: -81px;}
100% {margin-top: -108px;}

Die vorgesetzte Prozentzahl entspricht also jeweils einer Steigerung von : " 100% / Zeilenanzahl ".

Für jede Zeile wird der " -?px " - Wert um 27 erhöht, was der Zeilen ( Text ) - Hoehe in Pixeln entspricht ( kann natürlich geändert werden ).

Und schon haben Sie einen leicht einstellbaren News-Ticker für Ihren Blog / Webseite.

Ein weiterer Ticker, der einem Einband entspringt, wird Morgen vorgestellt !


<style>
#css_ticker {
background: green;
width: 350px;
height: 27px;
margin: 20px auto 0;
overflow: hidden;
font-variant: small-caps;
border-radius: 5px;
padding: 3px;
position: relative;
box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5);
}
span#tipp {
float: left;
color: rgba(255,255,255,.8);
background: white;
padding: 5px;
position: relative;
border-radius: 4px;
font-size: 16px;
box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.2), 0px 1px 1px rgba(0,0,0,0.5);
background: orange;
}
span#tipp a {font-size: 16px;line-height: 16px;color: rgba(255,255,255,.8);}
scroll {
position: relative;
display: inline;
float: left;
padding-left: 10px;
animation: ticker 16s cubic-bezier(1, 0, 1, 0) infinite;
}
scroll:hover {
animation-play-state: paused;
}
div.zeile {display: inline;line-height: 27px;}
#css_ticker a {
color: #fff;
text-decoration: none;
font-size: 21px;
line-height: 27px;
}
@keyframes ticker {
0% {margin-top: 0;}
20% {margin-top: -27px;}
40% {margin-top: -54px;}
60% {margin-top: -81px;}
80% {margin-top: -108px;}
100% {margin-top: -135px;}
}
</style>

23.6.16 11:56
 


bisher 0 Kommentar(e)     TrackBack-URL

Name:
Email:
Website:
E-Mail bei weiteren Kommentaren
Informationen speichern (Cookie)



 Smileys einfügen
Myblog.de website reputation  Seitenreport - Die SEO und Website Analyse  Quality monitored by qualidator.com   Daisypath Friendship tickers OpenOffice

 responsive menu
 rauf
  runter