Jump to content

Animated Typing Font - Help

Recommended Posts

  • Replies 4
  • Views 163
  • Created
  • Last Reply

Top Posters In This Topic

Thank you, I have uploaded the code you put on another post. 

Can you help me change the individual colours for each typed out word? I would like them to match the colours below where the icons are.

Also, I would like the main body of the text to be centralised 

Here is the URL for the website where it is currently live www.subjectresources.com

Thanks!

f37eb82b-0f9e-4720-b2fb-2dba02cb0924.png

Link to comment
20 hours ago, Stevey1919 said:

Thank you, I have uploaded the code you put on another post. 

Can you help me change the individual colours for each typed out word? I would like them to match the colours below where the icons are.

Also, I would like the main body of the text to be centralised 

Here is the URL for the website where it is currently live www.subjectresources.com

Thanks!

f37eb82b-0f9e-4720-b2fb-2dba02cb0924.png

#1. Use this CSS

/* center animate text */
div#block-yui_3_17_2_1_1655750353188_38269 .container {
    text-align: center;
}

#2. Try this

span[data-words*="Drama"] span {
    color: red !important;
}

span[data-words*="English"] span {
    color: green !important;
}

span[data-words*="Maths"] span {
    color: blue !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi Tuan 

The centre CSS worked but now I have the whole line moving back and forward when the typing animation happens. I would like the main body text to stay exactly where it is. 

The colour CSS did not work. Is there a way we can add a specific hex code to the code so that I can colour match for the right colour?

 

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.