Text ticker with Pagebuilder - Forum | JoomShaper
Staff replied SP Page Builder

Text ticker with Pagebuilder

Asked by H 1 year ago Last activity 1 year ago

2 replies

Atick Eashrak Shuvo Staff
1 year ago · edited

Apolozy for the inconvenience. Unfortunately, there is no built-in addon in SP Page Builder for creating a text ticker. However, you can achieve this using the Raw HTML addon by implementing custom HTML, CSS, and JavaScript. Here is a example code.

<style>
  /* Global box-sizing */
  * {
    box-sizing: border-box;
  }

  /* Keyframes for ticker animation */
  @-webkit-keyframes ticker {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
      visibility: visible;
    }
    100% {
      -webkit-transform: translate3d(-100%, 0, 0);
              transform: translate3d(-100%, 0, 0);
    }
  }
  @keyframes ticker {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
      visibility: visible;
    }
    100% {
      -webkit-transform: translate3d(-100%, 0, 0);
              transform: translate3d(-100%, 0, 0);
    }
  }

  /* Ticker styling */
  .ticker-wrap {
    bottom: 0;
    width: 100%;
    overflow: hidden;
    height: 4rem;
    background-color: rgba(0, 0, 0, 0.9);
    padding-left: 100%;
    box-sizing: content-box;
  }

  .ticker-wrap .ticker {
    display: inline-block;
    height: 4rem;
    line-height: 4rem;
    white-space: nowrap;
    padding-right: 100%;
    box-sizing: content-box;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-name: ticker;
            animation-name: ticker;
    -webkit-animation-duration: 30s;
            animation-duration: 30s;
  }

  .ticker-wrap .ticker__item {
    display: inline-block;
    padding: 0 2rem;
    font-size: 2rem;
    color: white;
  }
</style>

<div class="ticker-wrap">
  <div class="ticker">
    <div class="ticker__item">Letterpress chambray brunch.</div>
    <div class="ticker__item">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div>
    <div class="ticker__item">Ugh PBR&amp;B kale chips Echo Park.</div>
    <div class="ticker__item">Gluten-free mumblecore chambray mixtape food truck.</div>
  </div>
</div>
H Asked this

This is the CSS that I sent you!

But where do I have to put this CSS?

Atick Eashrak Shuvo Staff

Just pest the full code in the Raw Html addon

Log in to reply.