Ticker BBCode

[Stoker]

Ticker BBCode

The Ticker BBCode let you insert at ticker in your posts.

Demo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

BBCode:

Code: Select all

[ticker]{TEXT}[/ticker]

HTML:

Code: Select all

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

Helpline:

Code: Select all

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

Example:

Code: Select all

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

Now, to make this work we need some css.
You can add it to the bottom of your styles colours.css

Code: Select all

/** 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);
  }
}

This piece controls the speed:

Code: Select all

  --ticker-duration: 20s;

Save, upload and refresh

[Steve]

Can't you add the CSS via the style tag in html?

[Stoker]

Can't you add the CSS via the style tag in html?

And if you use the BBCodes more than once per page?

[Steve]

The Ticker BBCode let you insert at ticker in your posts.

Demo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

The Ticker BBCode let you insert at ticker in your posts.

Demo:

:p
: Lorem ipsum dolor sit amet, consectetuer adipiscing elit :booobs:

[Stoker]

Can't you add the CSS via the style tag in html?

And if you use the BBCodes more than once per page?

Then the html would be added in style several times. We dont want that Stoker