codekraft-studio / angular-typed

the angularjs typing tool module, that helps you with typing animation
https://codekraft-studio.github.io/angular-typed/
11 stars 7 forks source link

After type-strings array is finished hide the cursor #6

Closed psmod2 closed 6 years ago

psmod2 commented 6 years ago

Hello,

I have the following snippet:

<span start-timeout="10" type-speed="50" back-speed="40" html-mode="" typed=""
type-strings="[
            'a^2000',
            'b^2000',
            'c^2000' "]>
</span>

However once it is over - how do i hide the cursor, or at least have it flashing? it's currently just showing as a solid | which looks very much like the letter l

Also what exactly does the html-mode: Enable the html parse mode mean?

Thanks

b4dnewz commented 6 years ago

hi @psmod2

Also what exactly does the html-mode: Enable the html parse mode mean?

It means you can write HTML inside your type-strings and it will be rendered as HTML, for example as in the demo code: type-strings="it supports <code>html markup</code>^750 and timings^500"

However once it is over - how do i hide the cursor, or at least have it flashing?

For the blink effect you have to do it yourself, but there is an example in the project, you can grab that and add it your css file or write a new one, be sure to use typed-cursor class selector.

.typed-cursor {
  animation: blink-animation 850ms steps(5, start) infinite;
  -webkit-animation: blink-animation 850ms steps(5, start) infinite;
  margin-left: 2px;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

In order to hiding it once the typing has done I need to add more options to the component.

b4dnewz commented 6 years ago

I also have to improve the guide because from your questions I understand that it is not sufficiently clear, any suggestion? would you like to see some example in particular?

psmod2 commented 6 years ago

Hi,

Sorry for the late reply.

Thanks for the above CSS - will give it a go now.

Yeah, so the documentation, I felt the biggest thing was giving an example case of how to add an array of strings (as I feel that's probably the biggest use case of your module).

And of course, the ability to add the cursor would be great too.

Take it easy, Thanks again for the great module - really useful!