Jump to content

Rotating Words Code using HTML/CSS

Recommended Posts

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!

Link to comment
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. 

Link to comment

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
  • 1 year later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.