Sağdan Sola Kayan Yazı

[malialdemir]

Sağdan Sola Kayan Yazı BBCode, gönderilerinize bir kayma efekti kodu eklemenizi sağlar.

Demo:

Det er i dag, jeg skal af sted, min ven
Jeg glæder mig til vi skal ses igen
For det er her hos dig, jeg har det bedst
Ja, det er dig, jeg elsker allermest
Når jeg sådan må forlade dig
Ved du så, at jeg...

Farklı bir demo içeriği:

Sağdan Sola Kayan Yazı BBCode, gönderilerinize bir kayma efekti kodu eklemenizi sağlar.

BBCode:

Kod: Tümünü seç

[ticker]{TEXT}[/ticker]

HTML:

Kod: Tümünü seç

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

Yardım Hattı:

Kod: Tümünü seç

Sağdan Sola Kayan Yazı BBCode: [ticker]Metninizi buraya yazın.[/ticker]

Örnek:

Kod: Tümünü seç

[ticker]Lorem ipsum dolor sit amet, adipiscing elit'i bir araya getiriyor.[/ticker]

Şimdi, bunun çalışması için biraz CSS'ye ihtiyacımız var.
Bunu styles.css dosyanızın en altına ekleyebilirsiniz.

Kod: Tümünü seç

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

Bu parça hızı kontrol ediyor:

Kod: Tümünü seç

  --ticker-duration: 20s;

Kaydedin, yükleyin ve yenileyin

Ekstra stil eklemek için bir stil sayfasına mı ihtiyacınız var? phpBB çekirdeğini düzenlemenize gerek yok!