SLIDING/Rotating TEXT for Great Content Makes Great…

Step 1: Copy and paste the below code into the Site Wide Header Code Injection.

To get to the footer code injection: In the Home Menu, click Settings, click Developer Tools, and then click Code Injection. Make sure you paste the code in the Header section.

<!-- schwartz-edmisten.com Rotating Text Plugin --> <link href="https://assets.codepen.io/5666732/rotating-text-v1.0.css" rel="stylesheet"> <script defer src="https://assets.codepen.io/5666732/rotating-text-v1.0.js"></script> <!-- end schwartz-edmisten.com Rotating Text Plugin -->

Step 2: Add a Code Block to Your Page and Insert the Below HTML

Replace the “I can help you” text with whatever you want your heading to say. Then, replace the words between the span tags - these will be the words that rotate through.

Right now the heading is set to be an H1 heading, but you can change this to any other heading size: h1, h2, h3, h4 or even turn it into a paragraph if you want by changing it to p. Don’t forget to update the closing tag as well at the bottom!

<h1>I can help you <div class="rotating-words" data-interval="3" data-fade-speed="1"> <span>Achieve.</span> <span>Dream.</span> <span>Accomplish.</span> <span>Soar.</span> <span>Inspire.</span> </div> </h1>

Additional Customizations

1. Change the interval of the rotating words

If you would like to change the interval at which the words rotate, change the data-interval="3" value in the code block. The speed is in seconds, so 3 is equal to 3 seconds. If you would like the interval to be 7 seconds put 7, etc. IMPORTANT: do not set the interval time lower than 1 otherwise you will notice issues.

data-interval="3"

2. Change the speed of the fade itself

To speed up or slow down the rate of the fade, you can update the data-fade-speed="1" value in the code block. This is in seconds, so right now it takes one second for the word to fade out, and 1 second for the word to fade in. Change this value higher or lower to change the speed of the fade. If you want to set a value that is less than a second, use decimals. So .5 would be half a second.

data-fade-speed="1"

3. Change the style of the rotating words

If you would like to change the font properties of the rotating words, you can do so by adding a class to the word you want to style. For example, if I want “Dream” to be red, I can give it whatever class name I want - I’ll use the descriptive name of “red-text.” Then in the Custom CSS Window (From the Home Panel go to Design > Custom CSS) you can target the class and change the CSS properties like so. Don’t forget we target classes with a period first:
.red-text {
color: red;
}

<h1>I can help you <div class="rotating-words" data-interval="3" data-fade-speed="1"> <span>Achieve.</span> <span class="red-text">Dream.</span> <span>Accomplish.</span> <span>Soar.</span> <span>Inspire.</span> </div> </h1>

4. Center your heading

By default, your heading will be left aligned. You can center it by surrounding all of the HTML in the code block in <center></center> tags like shown below:

<center> <h1>I can help you <div class="rotating-words" data-interval="3" data-fade-speed="1"> <span>Achieve.</span> <span>Dream.</span> <span>Accomplish.</span> <span>Soar.</span> <span>Inspire.</span> </div> </h1> </center>

6. Drop rotating words to next line

If you would like to drop the rotating words below the static line of text, you can do so by giving the rotating-words div a display of block:

<h1>I can help you <div style="display:block;" class="rotating-words" data-interval="3" data-fade-speed="1"> <span>Achieve.</span> <span>Dream.</span> <span>Accomplish.</span> <span>Soar.</span> <span>Inspire.</span> </div> </h1>

7. Stop looping at last word

If you would like to stop the rotating words from looping infinitely and instead stop at the last word, you can add this attribute to the list:

data-loop-stop="true"

The HTML would then look like this:

<h1>I can help you <div class="rotating-words" data-interval="3" data-fade-speed="1" data-loop-stop="true"> <span>Achieve.</span> <span>Dream.</span> <span>Accomplish.</span> <span>Soar.</span> <span>Inspire.</span> </div> </h1>

8. Change the animation style to “slide in”

If you would like the rotating words to slide in from the top instead of the default fade, you can add a class of “slide” after the “rotating-words” class like so:

<h1>I can help you <div class="rotating-words slide" data-interval="3" data-fade-speed="1"> <span>Achieve.</span> <span>Dream.</span> <span>Accomplish.</span> <span>Soar.</span> <span>Inspire.</span> </div> </h1>

9. Change the bounce amount of the “slide in” animation style

If you want to adjust the amount of “bounce” the rotating word has as it animates in, you can add an optional data-bounce paremeter to the HTML like so. The default amount is 20, personally I would not go above this. But you can set it to any value between 0 and 20. 0 being no bounce and 20 being the default amount of bounce.

<h1>I can help you <div class="rotating-words slide" data-interval="3" data-fade-speed="1" data-bounce="0"> <span>Achieve.</span> <span>Dream.</span> <span>Accomplish.</span> <span>Soar.</span> <span>Inspire.</span> </div> </h1>

10. Center rotating words when you don’t have any leading words and are using the “slide in” animation style

If you want to only show the rotating words, without any leading words before the rotating ones, you can simply not include any text in the H1 tag. But you might notice if you are doing that AND using the “slide in” animation style AND you want to center the rotating words, that not all of your words are centered when using the <center></center> tags from customization 4.

To center all of the rotating words in this specific case, you can use the HTML below, which is a combination of customizations 4 and 6. If you have leading words before the rotating ones and you are using the “slide in“ animation style, you will not need to use the below HTML.

This is specifically for if you don’t have leading words AND you are using the “slide in” animation style AND you want to center them.

<center> <h1> <div style="display:block;" class="rotating-words slide" data-interval="3" data-fade-speed="1"> <span>Achieve.</span> <span>Dream.</span> <span>Accomplish.</span> <span>Soar.</span> <span>Inspire.</span> </div> </h1> </center>

And that is it! If you have any questions, please send me an email at chris@schwartz-edmisten.com.
Thank you again for purchasing!