Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Horizontally scrolling text on announcement bar

PJ22

Asked by PJ22,

Followers 3

Question

  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

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

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

8 answers to this question

Recommended Posts

  • 1

ChromaticZero    15

ChromaticZero
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>

 

Link to post
  • 1

ChromaticZero    15

ChromaticZero
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;

  ...
}

 

Link to post
  • 0

PJ22    0

PJ22
  • 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>

Link to post
  • 0

CubeSquared    4

CubeSquared
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.

Link to post
  • 0

PJ22    0

PJ22
  • 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>

Link to post

Create an account or sign in to comment

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

Sign Up / Login
Followers 3
Go to question listing
×
×
  • Create New...

Support

Community

Developers

Resources