Text Ticker With Pagebuilder - Question | JoomShaper

Text Ticker With Pagebuilder

H

H

SP Page Builder 9 months ago

Is it possible to make a simple text ticker (like her: https://www.heroinesinc.org/) wit Pagebuilder?

Or can I implement this CSS text ticker (https://codepen.io/lewismcarey/pen/GJZVoG) in a raw HTML addon? I tried pasting the HTML in the addon and the CSS in the "custom CSS". But the CSS seems not to be used!

0
3 Answers
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 9 months ago #182484

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>
0
H
H
Accepted Answer
9 months ago #182503

This is the CSS that I sent you!

But where do I have to put this CSS?

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 9 months ago #182504

Just pest the full code in the Raw Html addon

0