Jump to content
Join us live on Dec. 11 as we discuss the most-anticipated designs of 2025 with three brand design experts. ×

Horizontally scrolling text on announcement bar

By PJ22, in Customize with code

Recommended Posts

  • Replies 8
  • Views 9k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

ChromaticZero
ChromaticZero

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

ChromaticZero
ChromaticZero

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 somet

Posted Images

ChromaticZero Level 5

ChromaticZero

Posted
Posted

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 Level 3

PJ22

Posted
  • Author
Posted

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 Level 5

ChromaticZero

Posted
Posted

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;

  ...
}

 

  • 2 weeks later...
CubeSquared Level 5

CubeSquared

Posted
Posted

@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 Level 3

PJ22

Posted
  • Author
Posted

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>

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources