Jump to content

Horizontally scrolling text on announcement bar

Recommended Posts

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 comment

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 comment
  • 2 weeks later...

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 comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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