Scrolling Text from Right to Left

  • Resolved nar329

    (@nar329)


    5 years, 3 months ago

    NOTE: I am extremely new to this and it is my third or fourth day trying to figure out some code for my website.

    I found a CSS Marquee that I have little to no idea how to actually implement in my top bar. Here is the link: https://www.html.am/html-codes/marquees/css-marquee.cfm

    My understanding is that this should go in style.css, but I do not know how to fill in all of the particulars and make it work in my top bar. I also do not know where the [mobileonly] [/mobileonly] should go for it to appear only for mobile users. Here is what I’ve got so far using the source code from the link:

    <style style="text/css">
.marquee {	
 overflow: hidden;
 position: relative;
 background-color: #cfb53b;
 color: #ffffff;
}
.marquee p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 1.5;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 5s linear infinite;
 -webkit-animation: scroll-left 5s linear infinite;
 animation: scroll-left 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
</style>

<div class="marquee">
<p>FREE SHIPPING ON DOMESTIC ORDERS OVER 40$ AND INTERNATIONAL ORDERS OVER $60</p>
</div>

    Please help me. If there is a simpler, better way of doing this, all I am hoping for is for is an infinitely looping sentence from right to left in the top bar for mobile users. God bless you all for being so good with this technical work!!!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Tom

    (@edge22)

    Hi there,

    I would try this:

    1. Create a new HTML widget and add your HTML:

    <div class="marquee">
<p>FREE SHIPPING ON DOMESTIC ORDERS OVER 40$ AND INTERNATIONAL ORDERS OVER $60</p>
</div>

    2. Add your CSS using one of these methods: https://docs.generatepress.com/article/adding-css/

    Your CSS shouldn’t have the <style> elements – just the CSS is necessary.

    Hope this helps ??

    Thread Starter nar329

    (@nar329)

    Thanks! That’s what I had tried using, but for some reason it was choppy when I viewed the site on my phone. On someone else’s phone it was smooth. I’ll come back to it after trying a few more things out!

    Happiest of Holidays!!! ??

    Theme Author Tom

    (@edge22)

    Happy Holidays! ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Scrolling Text from Right to Left’ is closed to new replies.