Animated H1 Text - Typing

Site URL: https://sketchwow.com/

Hello,

Please could someone help me create a similar text animation to this website https://sketchwow.com/

I would like my subjects to be typed out and deleted (for example, english, maths, drama, science, etc.) where is says 'subject resources for ....'

my website is www.subjectresources.com

Thank you

There are several threads that discuss a typewriter effect.

Here is one.

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

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?

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. 

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

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

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.

Thank you so much! This worked perfectly. I have been trying to do this for ages so I am delighted to finally have it how I want it 🙂

 

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

Hey dude, use the CSS code that has been pasted in this thread. Hope it works for you

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.

Can I get some help @tuanphan I hired a coder to look at this forum, and he couldn't do it, he turned every corner he said.

Have you updated the HAS code?

22 hours ago, Veduden said:

Can I get some help @tuanphan I hired a coder to look at this forum, and he couldn't do it, he turned every corner he said.

What is your problem?

Nvm I hired another coder who coded it for me, it was very simple he said.