Infinite scrolling text

Support
#1

I’m hoping one of you guys might be able to give me a hand :slight_smile:

I’ve found a style of scrolling text I love on this site
https://www.bikebear.com.my/

I have done all the research I can including inspecting on how they do it and I just can’t seem to get mine to run quite the same.

Here is what I have tried

Attempt 1

    <marquee behavior="scroll" direction="right">Checkout Slide-in Text</marquee>

But all it does is slide the text to one end - not infinitely

Attempt 2

<div class="example1">
<h3>This is the scrolling text </h3>
</div>
<div class="example2">
<h3>This is the scrolling text </h3>
</div>


<style>
.example1 {
 height: 50px;  
 overflow: hidden;
 position: relative;
}
.example1 h3 {
 font-size: 3em;
 color: blue;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);    
 transform:translateX(100%);
 /* Apply animation to this element */  
 -moz-animation: example1 15s linear infinite;
 -webkit-animation: example1 15s linear infinite;
 animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);       
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}
</style>


<style>
.example2 {
 height: 50px;  
 overflow: hidden;
 position: relative;
}
.example2 h3 {
 font-size: 3em;
 color: red;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);    
 transform:translateX(100%);
 /* Apply animation to this element */  
 -moz-animation: example2 30s linear infinite;
 -webkit-animation: example2 30s linear infinite;
 animation: example1 30s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example2 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example2 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example2 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);       
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}
</style>

I’m sure there is a simple answer and I’m just missing it because I have managed to get this far

Please could somebody help me?

Thanks so much in advance!

#2

Hello Niall,

Thanks for posting in!

Just to manage your expectations, this isn’t specifically a theme issue, but rather, your customisation of it. So whilst I have happily provided you with some guidance above on how to get it working, we cannot provide theme customisation as a general rule, or support custom code solutions provided. Therefore, you might find it helpful to check out the following:

Thank you for your understanding.

#3

Hey @ruenel!

Ahhh that’s a shame I have already given those sources a try but it doesn’t seem to work.

Thanks anyway though

#4

You are most welcome!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.