Ticker BBCode
Posted: 13 Dec 2024, 20:26
Ticker BBCode
The Ticker BBCode let you insert at ticker in your posts.
Demo: BBCode:
HTML:
Helpline:
Example:
Now, to make this work we need some css.
You can add it to the bottom of your styles colours.css
This piece controls the speed:
Save, upload and refresh
The Ticker BBCode let you insert at ticker in your posts.
Demo: BBCode:
Code: Select all
[ticker]{TEXT}[/ticker]Code: Select all
<aside class="ticker">
<div class="ticker__inner">
<p>{TEXT}</p>
</div>
</aside>Code: Select all
Ticker: [ticker]Put Your text here[/ticker]Code: Select all
[ticker]Lorem ipsum dolor sit amet, consectetuer adipiscing elit.[/ticker]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);
}
}Code: Select all
--ticker-duration: 20s;
