Snippets • Ticker BBCode

Code:

[ticker]{TEXT}[/ticker]

Code:

<aside class="ticker"><div class="ticker__inner"><p>{TEXT}</p></div></aside>

Code:

Ticker: [ticker]Put Your text here[/ticker]

Code:

[ticker]Lorem ipsum dolor sit amet, consectetuer adipiscing elit.[/ticker]

Code:

/** Ticker **/.ticker {  --ticker-duration: 20s;  z-index: 10;  overflow: hidden;  padding: 0.5rem;}.ticker__inner {  display: flex;  align-items: center;  justify-content: center;  flex-wrap: nowrap;  white-space: nowrap;  animation-iteration-count: infinite;  animation-timing-function: linear;  animation-name: ticker;  animation-duration: var(--ticker-duration);  text-align: center;  width: max-content;  padding-left: 100%;}@media (prefers-reduced-motion: reduce) {  .ticker__inner {    flex-wrap: wrap;    white-space: inherit;    padding-left: 0;    width: auto;  }}.ticker__inner p {  margin: 0 2rem;}@keyframes ticker {  0% {    transform: translate3d(0%, 0, 0);  }  100% {    transform: translate3d(-100%, 0, 0);  }}

Code:

  --ticker-duration: 20s;