Rotating Words Code using HTML/CSS

Hi, 

I have been building my site for a few months and am now in the final stages before launch. In testing to see how the page responds on other computers/displays, I noticed that a custom code for rotating words that I have on the homepage displays in variable form because the code unfortunately does not let me center the words and have them auto adjust to all displays/browsers. 

I came across this code here: https://codepen.io/kenwestphal/pen/xqRZYZ to be used for the same purpose, but when I insert it into my site, it does not work how it should (The words do not rotate. They simply appear with a slight bounce but does not proceed to display the following words written)

Can anyone tell me what needs to be adjusted in order for it to properly work on 7.1? This is exactly what I need and is the closest thing I have found for my site. I am not very good nor familiar with coding, so any help is more than appreciated. 

Thanks!

Hi,
Please share your website URL and also check this free extension to build Typewriter without coding!

Feel free to ask me if you have a question!

Please use the like button if it helps you!

Best,
Leopold

Hey, 

Thank you for the extension! Will check it out and see how it works for the site.

Here is the link to my site: https://copper-alpaca-se6n.squarespace.com/ (Password: thorncliffepark)

On the home page, the rotating words just below the nav is what i am referring to. I just want it to be centred, but I am open to changing the styling/code to make it work. 

Thanks for your help!

6 hours ago, IXStudio said:

Hi,
Please share your website URL and also check this free extension to build Typewriter without coding!

Feel free to ask me if you have a question!

Please use the like button if it helps you!

Best,
Leopold

Also, I am trying to use the extension and I have followed the same inputs as shown in your Youtube video, but it does not animate for me. I am not sure why. 

Did you follow these steps?

And this is the CSS code to center your current text rotator.

Use this code in Design -> Custom CSS

#block-yui_3_17_2_1_1598542012293_13341 h1.preFade.fadeIn {
    text-align: center;
    width: fit-content;
    display: flex;
}


.rotating-words.rotating-words-1 {
    display: flex;
    width: 313px;
}

#block-yui_3_17_2_1_1598542012293_13341 .sqs-block-content {
    width: max-content;
    justify-content: center;
    display: flex;
    align-items: center;
    text-align: center;
    margin: 0 auto;
}

Please use the like button if it helps you!

Best,
Leopold

Hello! I am looking to add a rotating word in my header. Does anyone know what code I would use for this? 

Hi there! I was wondering if you would be willing to share the code you used for the scrolling words on your website here? https://copper-alpaca-se6n.squarespace.com

I am looking to do something similar in my header. Thank you so much!

On 8/7/2022 at 7:19 PM, Max098 said:

 

Hi there! I was wondering if you would be willing to share the code you used for the scrolling words on your website here? https://copper-alpaca-se6n.squarespace.com

 

I am looking to do something similar in my header. Thank you so much!

Hi. How about this code?

https://codepen.io/Rathijit/pen/EbQqPd

@tuanphan Have you been able to get that code to work? (Re: https://codepen.io/Rathijit/pen/EbQqPd) I've tried and it doesn't animate - it only bounces once and then nothing....

I've been trying to get this one to work on my 7.1 FE site and it won't....

https://codepen.io/kenwestphal/pen/xqRZYZ

On 10/11/2022 at 4:27 AM, jojod said:

@tuanphan Have you been able to get that code to work? (Re: https://codepen.io/Rathijit/pen/EbQqPd) I've tried and it doesn't animate - it only bounces once and then nothing....

That CodePen uses LESS, you will need to compile it to CSS first.

Also, the Codepen use jQuery code, not JavaScript, you will need to declare jQuery library 

Which exact code did you add? & Link to page where you added the code?

If you're looking to implement rotating words using HTML/CSS, you can check out this plugin for a smooth and customizable solution from my company: Animated Rotating Words Plugin.