Solved

Need help with a code for revolving text

iPhoneCases
Tourist
15 0 0
Accepted Solutions (2)

LuffyOnePiece
Shopify Partner
597 86 102

This is an accepted solution.

Hi @iPhoneCases ,

 

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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

LuffyOnePiece
Shopify Partner
597 86 102

This is an accepted solution.

Hi @iPhoneCases ,

 

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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

Replies 7 (7)

LuffyOnePiece
Shopify Partner
597 86 102

This is an accepted solution.

Hi @iPhoneCases ,

 

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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
iPhoneCases
Tourist
15 0 0

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

iPhoneCases
Tourist
15 0 0

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? 

iPhoneCases
Tourist
15 0 0

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

iPhoneCases
Tourist
15 0 0

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
Shopify Partner
597 86 102

This is an accepted solution.

Hi @iPhoneCases ,

 

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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
iPhoneCases
Tourist
15 0 0

Thank you much!! - PERFECT