Typer.js cursor issue

Design help Custom code
1

Hi,

I just incorporated the typer.js plug in to my webflow site using this tutorial. http://type-effect.webflow.io/

For the most part the plug in works but I have 2 issues that I can not seem to figure out.

1st) The cursor did not adapt the same styling that I gave to the text. The text is white, large and bold, the cursor is small & black It does not line up with the text either. I would like to fix this so that its all uniform just like in the example link above. I didn’t do anything different so I do not know why this is happening.

2nd) If you look at this link http://soul-lucianis-top-notch-site.webflow.io/
You will notice that the first line, “My name is Soul Luciani” erases and then the second line comes in. I want that to stay like that but I want the second line to stay where it is when the third line “branding, UI/UX” comes in.

The goal is that it reads I’m a Visual Designer with a diverse background in Branding, Then Branding deletes and UI/UX comes in.

Is there anyone that might be able to help me actualize this idea? I know it can be done I have seen it before, I just need a little help with it.

Thanks for your time
Soul

Here is my public share link: LINK
(how to access public share link)

2

Why would it? It’s a different element with a different class. You have to style the cursor separately.

Then why did you split the strings up??

"I'm a Visual Designer with a diverse background in", "Branding", "UI/UX Design"
3

I see what you mean about the class and have fixed the style on that. Is it possible to have the cursor on the first string but not the second?

I thought I had to split the string to get the desired result. I only want the words Branding and UI/UX designer to change and the rest of the sentence to remain the same.

Sorry if this seems novice but I am not really all that familiar with java… I really appreciate the help!

4

If you view the source of the official plugin website, it shows you how the deletion on the home page demo is done.

5

I viewed the code but the problem is I don’t fully understand it. I tried several variations and can not seem to get the result I am looking for.

This is the script I am using. I would like to make it so that it calls back the word branding and replaces it with print. Can you help me understand how to do this?

The other thing is that for some reason the cursor stops before the text stops, how can I fix that?

<script> var Webflow = Webflow || []; Webflow.push(function() { $.getScript('https://cdn.rawgit.com/mattboldt/typed.js/master/js/typed.js', function() { $("#typed").typed({ strings: ["My name is Soul Luciani", " I'm a Visual Designer with a diverse background in branding"], typeSpeed: 30, }); }); }); </script>

6

Nelson,

I have 2 problems that I am trying to fix.

  • The first is that the cursor does not line up with the text properly. It seems to start on a line above the actual text and stops before the text is finished.

  • The second issue is on the second string I only want to delete the word “branding" and replace it with the word “print". Is it possible for you to help me understand this?

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.