Jump to content

Animated H1 Text - Typing

Recommended Posts

  • Replies 14
  • Views 455
  • Created
  • Last Reply

Top Posters In This Topic

15 minutes ago, Stevey1919 said:

Thank you, that was very helpful.

Do you know how to centre the bulk text and avoid the text moving when typing. www.subjectresources.com

Which text are you referring to? and mobile or desktop?

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
On 6/21/2022 at 7:13 PM, Stevey1919 said:

The 'We make outstanding subject resources for' is too far to the left and needs to be in the centre of the screen. I have attached an image so you can see.

Also, I would like set the typing animation to individual colours so each time it types out it corresponds to the images below. For example, 'Drama' would be in Dark Blue, 'English' in Green, etc. 

Screenshot 2022-06-21 at 13.10.52.png

#2. I think you try contacting @creedon. I remember I asked him the same question once, but couldn't remember what the code was.

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
On 6/23/2022 at 1:07 AM, tuanphan said:

#2. I think you try contacting @creedon. I remember I asked him the same question once, but couldn't remember what the code was.

Find the following lines in the code.

    // Insert txt into element
    this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

Replace with the following.

    // Insert txt into element
    // add word as attribute for CSS styling, By Thomas Creedon < http://www.tomsWeb.consulting/ >
    this.txtElement.innerHTML = `<span class="txt" data-word="${fullTxt}">${this.txt}</span>`;
    // this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

Add the following to the CSS of the style tag with the following. Be sure to change the words to match your needs and add more words as needed. This is just an example from the code @tuanphan and I worked on.

.txt-type .txt[data-word="Drama"] {

  color : #333652;
  
  }

.txt-type .txt[data-word="English"] {

  color : #749826;
  
  }

.txt-type .txt[data-word="History"] {

  color : #944311;
  
  }

.txt-type .txt[data-word="PE"] {

  color : #EB4E2E;
  
  }

.txt-type .txt[data-word="Primary"] {

  color : #18803C;
  
  }

.txt-type .txt[data-word="Science"] {

  color : #E85BA0;
  
  }

.txt-type .txt[data-word="Geography"] {

  color : #3C4148;
  
  }

.txt-type .txt[data-word="Maths"] {

  color : #D8AB4E;
  
  }

.txt-type .txt[data-word="Law"] {

  color : #81234B;
  
  }

.txt-type .txt[data-word="PSHE"] {

  color : #2A94DF;
  
  }

.txt-type .txt[data-word="Psychology"] {

  color : #6D8F85;
  
  }

.txt-type .txt[data-word="RE"] {

  color : #9C57C7;
  
  }

Let us know how it goes.

@Stevey1919

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 6/24/2022 at 2:24 AM, Stevey1919 said:

Hey, neither of those codes seem to do anything.

I think the following code from the code block is causing issues. Its making it more difficult than it needs to be to achieve the effect. I suggest removing it, make a copy somewhere.

#page .section-background {background: white;}
  #page section * {color: black !important;}
  #page .content {
    width: 100%; */
}

In its place add my revised CSS from my previous post. No need to add the code to Design > Custom CSS.

 

 

 

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 weeks later...

Hey I really want this as well, how do I do this? I am not sure where to put the codes, and I don't even know what codes I need to put where. Btw I only have the personal plan, is it still possible? If I need business plan, it's no problem, I'll upgrade. @creedon

Edited by Veduden
Link to comment

Hey, I Feel like there are many codes? Which one are you talking about, please be very specific, its very hard for me to understand. I dont understand why there are so many things pasted as well. Also what do I do after I have pasted the right code in the Custom CSS. Please be specific and descriptive as to what is the next step. Thank you very much.

Edited by Veduden
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.