Horizontally scrolling text on announcement bar

PJ22 · May 6, 2020

Site URL: https://www.bypaigejordan.com/

Hello Everyone,

I wanted to know if it is possible to make the text on the announcement bar scroll/roll going from right to left automatically and reset/start again?

Thanks

Edited May 6, 2020 by PJ22

ChromaticZero · May 6, 2020

Sounds like you want a marquee effect. Have a poke around Google for CSS Marquee examples. Just be sure to do it in CSS as the HTML marquee tag has been deprecated.

A quick search will find something like this as an example:

.marquee {
  width: 450px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  will-change: transform;
  /* show the marquee just outside the paragraph */
  animation: marquee 15s linear infinite;
}

.marquee span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}


/* Respect user preferences about animations */

@media (prefers-reduced-motion: reduce) {
  .marquee { 
    white-space: normal 
  }
  .marquee span {
    animation: none;
    padding-left: 0;
  }
}

<p class="marquee">
   <span>
       Windows 8 and Windows RT are focused on your life—your friends 
       and family, your apps, and your stuff. With new things like the 
       Start screen, charms and a Microsoft account, you can spend    
       less time searching and more time doing.
   </span>
   </p>

PJ22 · May 6, 2020

Thanks for the quick reply. How would i change the font with this code?

<!DOCTYPE html>
<html>

<body>
    <style style="text/css">
        .bounce {
            height: 40px;
            overflow: hidden;
            position: relative;
            background:    #000000;
            color:    #ffffff;
            border: 0px solid    #000000;
        }

        .bounce p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 40px;
            text-align: center;
            -moz-transform: translateX(50%);
            -webkit-transform: translateX(50%);
            transform: translateX(50%);
            -moz-animation: bouncing-text 5s linear infinite alternate;
            -webkit-animation: bouncing-text 5s linear infinite alternate;
            animation: bouncing-text 10s linear infinite alternate;
        }

        @-moz-keyframes bouncing-text {
            0% {
                -moz-transform: translateX(50%);
            }
            100% {
                -moz-transform: translateX(-50%);
            }
        }

        @-webkit-keyframes bouncing-text {
            0% {
                -webkit-transform: translateX(50%);
            }
            100% {
                -webkit-transform: translateX(-50%);
            }
        }

        @keyframes bouncing-text {
            0% {
                -moz-transform: translateX(50%);
                -webkit-transform: translateX(50%);
                transform: translateX(50%);
            }
            100% {
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
            }
        }
    </style>

    <div class="bounce">
        <p> BUY ONE, DONATE ONE! </p>
    </div>
</body>

</html>

ChromaticZero · May 6, 2020

What do you mean by 'change the font'?

The font of your announcement bar should be dictated by your template settings. I suppose if you want to override it with code you could do so here but that depends on what you mean by 'change the font'.

.bounce p {
  font-family: 'Montserrat';
  color: #101010;
  font-weight: 600;

  ...
}

PJ22 · May 6, 2020

Thanks it is working now

PJ22 · May 10, 2020

One last question, How do i add spaces and repeat the text over again going around repeatably ?

CubeSquared · May 24, 2020

@PJ22 This is great thank you. May I ask, how do you make the text repeat from right to left (rather than bounce from side to side? Also, how could you change the font of the scrolling text? Thanks in advance.

PJ22 · May 26, 2020

Hey,

On 5/24/2020 at 4:24 AM, Left2Write said:

@PJ22 This is great thank you. May I ask, how do you make the text repeat from right to left (rather than bounce from side to side? Also, how could you change the font of the scrolling text? Thanks in advance.

No problem. You can change the front with this line "font-family: 'proxima-nova', sans-serif;"

I'm still trying to figure out how to repeat and do an infinite scroll/Carousel effect.

This page may be of help. Please let me know if you figure it out. Thanks

https://www.w3schools.in/css3/css-marquee/#Scrolling_Text_Using_CSS

<!DOCTYPE html>
<html>

<body>
    <style style="text/css">
        .bounce {
            font-family: 'proxima-nova', sans-serif;
            font-weight: 400;
            height: 40px;
            overflow: hidden;
            position: relative;
            background:    #000000;
            color:    #ffffff;
            border: 0px solid    #000000;
        }

        .bounce p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 40px;
            text-align: center;
            -moz-transform: translateX(50%);
            -webkit-transform: translateX(50%);
            transform: translateX(50%);
            -moz-animation: bouncing-text 5s linear infinite alternate;
            -webkit-animation: bouncing-text 5s linear infinite alternate;
            animation: bouncing-text 20s linear infinite alternate;
        }

        @-moz-keyframes bouncing-text {
            0% {
                -moz-transform: translateX(60%);
            }
            100% {
                -moz-transform: translateX(-60%);
            }
        }

        @-webkit-keyframes bouncing-text {
            0% {
                -webkit-transform: translateX(60%);
            }
            100% {
                -webkit-transform: translateX(-60%);
            }
        }

        @keyframes bouncing-text {
            0% {
                -moz-transform: translateX(60%);
                -webkit-transform: translateX(60%);
                transform: translateX(60%);
            }
            100% {
                -moz-transform: translateX(-60%);
                -webkit-transform: translateX(-60%);
                transform: translateX(-60%);
            }
        }
    </style>

<div class="bounce">
<p>
BUY ONE, DONATE ONE FACE MASK!</p>
</div>
</body>

CubeSquared · May 27, 2020

Again, thank you so much for taking the time to respond.

Horizontally scrolling text on announcement bar

Recommended Posts

PJ22

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

ChromaticZero

ChromaticZero

Posted Images

ChromaticZero

Link to comment

PJ22

Link to comment

ChromaticZero

Link to comment

PJ22

Link to comment

PJ22

Link to comment

CubeSquared

Link to comment

PJ22

Link to comment

CubeSquared

Link to comment

Create an account or sign in to comment

News

ChromaticZero

ChromaticZero

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources