Vertikaler Ticker in der Seite

[Gonzo Gates]

Hallo Gemeinde,

In einer meiner Seiten habe ich einen vertikalen Ticker eingebaut. Der ist zwar nicht einfach zu bedienen ist, macht aber einen schmalen Schuh

In den Textinhalt im Quellcode einer Seite kommt an einer Stelle eures Gustos z.B. folgendes (11 Einträge ):

Code: Select all

<div class="vwrap">
<div class="vmove">
<div id="1" class="vitem">500 g Rinderhack</div>
<div class="vitem">6 EL Distelöl</div>
<div class="vitem">1 Gemüsezwiebel oder 2 Zwiebeln</div>
<div class="vitem">1 - 2 Knoblauchzehen</div>
<div class="vitem">1 Ei</div>
<div class="vitem">1 altbackenes Brötchen</div>
<div class="vitem">100 ml Milch</div>
<div class="vitem">100 ml Wasser</div>
<div class="vitem">Thymian und Oregano</div>
<div class="vitem">Paprikapulver</div>
<div class="vitem">Salz und Pfeffer</div>
</div>
</div>

Zusätzlich habe ich eine CSS-Datei in 'CMSroot/css/vertical-ticker.css', die in 'CMSroot/templates/[templatename]/stylsheet.css' mit '@import url(../../css/vertical-ticker.css);' importiert wird, damit der Ticker auch in Tiny angezeigt wird. Schon in https://cmsimple.org/forum/viewtopic.php?p=4340 erwähnt.

Code: Select all

/* https://code-boxx.com/html-css-news-ticker-horizontal-vertical */
/* (A) STANDARD ROW HEIGHT */
.vwrap, .vitem {
  height: 30px;
  line-height: 30px;
  border: 2px rgba(153,51,0,.8); /*funzt hier nicht! */
}
 
/* (B) FIXED WRAPPER */
.vwrap {
  overflow: hidden; /* HIDE SCROLL BAR */
  /*  display: block;
  background: transparent;*/
  background: rgba(230,230,230,.5); /* hinzugefuegt */
  border: 1px solid rgba(153,51,0,.8); /* hinzugefuegt */
  border-radius: 0 18px 18px 0;/* hinzugefuegt */
  box-shadow: inset 0px 0px 3px rgba(153, 51, 0, 1);/* hinzugefuegt */
  padding: 0px 0 0 25px; /* hinzugefuegt, Schriftabstand unten wird ueber '@keyframes tickerv' geregelt */
}
/* (C) TICKER ITEMS */
.vitem { text-align: left; font-family: SpecialElite, EagleLake, LeagueSpartan, RobotoCondensed, arial, sans-serif; font-size:18px; font-weight: 300; color: rgba(51,51,51, 1) /* #333 */;} /* andere schrift als erstes gesetzt, schriftgroesse von 20 auf 18 geaendert  */
 
/* (D) ANIMATION - MOVE ITEMS FROM TOP TO BOTTOM */
/* CHANGE KEYFRAMES IF YOU ADD/REMOVE ITEMS */
.vmove { position: relative; }
/*@keyframes tickerv {
  0% { bottom: 0; }  FIRST ITEM */
  /*30% { bottom: 30px; }  SECOND ITEM */
  /*60% { bottom: 60px; }  THIRD ITEM */
  /*90% { bottom: 90px; }  FORTH ITEM */
  /*100% { bottom: 0; }  BACK TO FIRST 
}*/

/*@keyframes tickerv { DOR: Geht. Auch mit 10 Eintraegen. Ist aber nicht gut oder auch Kacke ;-)
  0% { bottom: 0; }  FIRST ITEM */
/*  5% { bottom: 30px; }  SECOND ITEM */
/*  10% { bottom: 60px; }  THIRD ITEM */
/*  15% { bottom: 90px; }  FORTH ITEM */
/*  20% { bottom: 120px; }  FORTH ITEM */
/*  25% { bottom: 150px; }  FIFTH ITEM */
/*  30% { bottom: 180px; }  SIXTH ITEM */
/*  35% { bottom: 210px; }  SEVENTH ITEM */
/*  40% { bottom: 240px; }  EIGHTH ITEM */
/*  45% { bottom: 270px; }  NINETH ITEM */
/*  50% { bottom: 300px; }  TENTH ITEM */
/*  55% { bottom: 330px; }  ELEVENTH ITEM */
/*  60% { bottom: 360px; }  TWELFTH ITEM */
/*  65% { bottom: 390px; }  THIRTEENTH ITEM */
/*  70% { bottom: 420px; }  FORTEENTH ITEM */
/*  75% { bottom: 450px; }  FIFTEENTH ITEM */
/*  80% { bottom: 480px; }  SIXTEENTH ITEM */
/*  85% { bottom: 510px; }  SEVENTEENTH ITEM */
/*  90% { bottom: 540px; }  EIGHTEENTH ITEM */
/*  95% { bottom: 570px; }  NINETEENTH ITEM */
/*  100% { bottom: 0; }  BACK TO FIRST 
}*/


/* Alt: Schrift: LeagueSpartan, Schrifrgroesse: 20px */
/* @keyframes tickerv { */
/*  0% { bottom: 0; }  FIRST ITEM */
/*  10% { bottom: 30px; }  SECOND ITEM */
/*  20% { bottom: 60px; }  THIRD ITEM */
/*  30% { bottom: 90px; }  FORTH ITEM */
/*  40% { bottom: 120px; }  FORTH ITEM */
/*  50% { bottom: 150px; }  FIFTH ITEM */
/*  60% { bottom: 180px; }  SIXTH ITEM */
/*  70% { bottom: 210px; }  SEVENTH ITEM */
/*  80% { bottom: 240px; }  EIGHTH ITEM */
/*  90% { bottom: 270px; }  NINETH ITEM */
/*  100% { bottom: 0; }  BACK TO FIRST 
}*/
/* Bei Aenderug der Schriftart und Schriftgroesse muss 'bottom:' ggf. angepasst werden! 
   Neu: Schrift: SpecialElite, Schrifrgroesse: 18px */
@keyframes tickerv {
  0% { bottom: -2px; } /* FIRST ITEM */
  10% { bottom: 28px; } /* SECOND ITEM */
  20% { bottom: 58px; } /* THIRD ITEM */
  30% { bottom: 88px; } /* FORTH ITEM */
  40% { bottom: 118px; } /* FORTH ITEM */
  50% { bottom: 148px; } /* FIFTH ITEM */
  60% { bottom: 178px; } /* SIXTH ITEM */
  70% { bottom: 208px; } /* SEVENTH ITEM */
  80% { bottom: 238px; } /* EIGHTH ITEM */
  90% { bottom: 268px; } /* NINETH ITEM */
  100% { bottom: 0; } /* BACK TO FIRST */
}

.vmove {
  animation-name: tickerv;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, 0, .5, 0);
}
.vmove:hover { animation-play-state: paused; }

Wie immer, lasse ich meine alten Kommentare drinne, damit ich weiß, womit ich nicht klar gekommen bin, was nicht gefunzt hat und was geht.

Wer den Ticker sehen will, kann ihn in meiner lansamen Website auf http://dorilaraukft.bplaced.net/sites/C ... zepte_0-3/ in einer versteckten Subsite (einen Link gibt es in der FixedNav) unter 'Testarossa' finden.

Abchließend: Natürlich könnte man den Ticker verscripten, aber da ich nur in Abwandlung und nicht in Neuerfindung beim Scripten ausgestattet bin, überlasse ich es euch.

Ach ja, rechnen können beim Abwandeln ist auch wichtig!

Gruß
Gonzo