Need help with a code for revolving text

[PhoneCases]

Looking to implement this similar to the below. Any advise? 

https://stackoverflow.com/questions/70400035/how-can-i-mimic-this-revolving-text-animation-for-my-e-...

[LuffyOnePiece · Accepted solution]

Hi @PhoneCases ,

I would like to give you some recommendations to support you

You need to find the code containing the above content and edit it according to the template:

<h2 class="rich-text__heading title text-align-left ">
<span>Your One Stop Hobby Shop</span>
</h2>

updated code:

<h2 class="rich-text__heading title text-align-left ">
<span>Your One Stop <strong id="sequence">Hobby</i>Shop</strong>
</h2>

Open your theme.liquid theme file

Paste below code before </body> :

<script>
        var example = ['Hobby', 'Custom text 2', 'Custom text 3'];
        textSequence(0);
        function textSequence(i) {
            if (example.length > i) {
                setTimeout(function() {
                    document.getElementById("sequence").innerHTML = example[i];
                    textSequence(++i);
                }, 2000); // 1 second (in milliseconds)

            } else if (example.length == i) { // Loop
                textSequence(0);
            }
        }
</script>

and change color if you want:

<style>
 #sequence{
  color red;
 }
</style>

Please don't hesitate to reach out if you need further help optimizing or customizing your store. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

[LuffyOnePiece · Accepted solution]

Hi @PhoneCases ,

I would like to give you some recommendations to support you

You need to find the code containing the above content and edit it according to the template:

<h2 class="rich-text__heading title text-align-left ">
<span>Your One Stop Hobby Shop</span>
</h2>

updated code:

<h2 class="rich-text__heading title text-align-left ">
<span>Your One Stop <strong id="sequence">Hobby</i>Shop</strong>
</h2>

Open your theme.liquid theme file

Paste below code before </body> :

<script>
        var example = ['Hobby', 'Custom text 2', 'Custom text 3'];
        textSequence(0);
        function textSequence(i) {
            if (example.length > i) {
                setTimeout(function() {
                    document.getElementById("sequence").innerHTML = example[i];
                    textSequence(++i);
                }, 2000); // 1 second (in milliseconds)

            } else if (example.length == i) { // Loop
                textSequence(0);
            }
        }
</script>

and change color if you want:

<style>
 #sequence{
  color red;
 }
</style>

Please don't hesitate to reach out if you need further help optimizing or customizing your store. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

[PhoneCases]

Not sure I understand. Is this the code to make happen as the example link shown? 

https://stackoverflow.com/questions/70400035/how-can-i-mimic-this-revolving-text-animation-for-my-e-... 

[PhoneCases]

I entered all the code and it works like a charm! Is it possible to only flip "For the ....." vs the whole line? Also, this code flips hard. Can it be more of a rolling smother flip? 

[PhoneCases]

I have this live on my site if you can take a look. On mobile, some of the custom text show on two lines. Can this be resolved? 

phonecasefor.com

[PhoneCases]

Here is my current code. All works as designed. However, I am wanting to make each "The Bold" scrolling text a different color. 

<h2 style="font-size:35px ">

  <wrap>Phone Case For<br <br class="mobile-break">

    <strong id="sequence"></i></strong>

</h2>

<script>

  var example = ['THE BOLD😎', 'THE CONFIDENT🤳', 'THE INFLUENCER💁‍♀️', 'THE UNIQUE🤩' ];

        textSequence(0);

        function textSequence(i) {

            if (example.length > i) {

                setTimeout(function() {

                    document.getElementById("sequence").innerHTML = example[i];

                    textSequence(++i);

                }, 2000); // 1 second (in milliseconds)

            } else if (example.length == i) { // Loop

                textSequence(0);

            }

        }

[LuffyOnePiece · Accepted solution]

Hi @PhoneCases ,

Try adding below code.

<h2 style="font-size:35px ">
  <wrap>Phone Case For<br><br class="mobile-break">
    <strong id="sequence"></strong>
</h2>

<script>
    var example = ['<span style="color: blue;">THE BOLD 😎</span>', '<span style="color: green;">THE CONFIDENT 🤳</span>', '<span style="color: red;">THE INFLUENCER 💁‍♀️</span>', '<span style="color: purple;">THE UNIQUE 🤩</span>'];
    textSequence(0);

    function textSequence(i) {
        if (example.length > i) {
            setTimeout(function() {
                document.getElementById("sequence").innerHTML = example[i];
                textSequence(++i);
            }, 2000); // 2 seconds (in milliseconds)

        } else if (example.length === i) { // Loop
            textSequence(0);
        }
    }
</script>

Thank you

[PhoneCases]

Thank you much!! - PERFECT