search

straversi / Typer.js

Typing effect completely configurable in HTML.
http://steven.codes/typerjs
MIT License
135 stars 23 forks source link

Add options to randomize delay between typestroke #11

Closed rizdaprasetya closed 5 years ago

rizdaprasetya commented 5 years ago

Description

Addressing 'todo': Add human-like option that varies character delays slightly

I added options:

Thus allow user to specify how much the delay will be randomized.

Example usage:

<span class="typer" id="first-typer" data-words="beets,bears,battlestar galactica" data-delay="75" data-randomizeDelay="true" data-delayVariance="100"></span>

Example usage: https://jsfiddle.net/h8kxw4mo/

Modified docs preview: https://rawgit.com/rizdaprasetya/Typer.js/patch-1/docs/index.html

straversi commented 5 years ago

Thanks for making this contribution! This feature is a great idea. I love the name you chose, delay-variance. I have some thoughts:

Let's get rid of randomize-delay, and make the default delay-variance equal to 0. That way, if someone wants to specify a delay variance, all they have to do is set that value. I think that will keep the API cleaner.

Also, I like how you made the total delay a function of both the delay and delay-variance. I think we could improve it by centering the delay variance around the delay, instead of adding them together. As in (2 * Math.random() - 1) * delayVariance + this.delay.

Also sorry I never replied. I've been trying to find some time lately to revisit this, though. If you've moved on, I can implement these revisions.

rizdaprasetya commented 5 years ago

@straversi Thanks really great feedback, I agree. I have revised and opened new PR (and closing this PR) addressing the feedback. Check out: https://github.com/straversi/Typer.js/pull/15

Also sorry I never replied. I've been trying to find some time lately to revisit this, though. If you've moved on, I can implement these revisions.

No worry, I was just learning to contribute to open source back then on Hacktoberfest 2018 event. Also the PR was not clean enough, so I created another cleaner PR now.