HackerTyper.js is a javascript script that creates a cool hacking effect on texts.
CDN (jsdelivr):
<script src="https://cdn.jsdelivr.net/gh/zMarcosDantas/hackerTyper.js@latest/dist/hTyper.min.js"></script>Basic Usage:
<body>
<!-- Element that will have the effect -->
<h1 id="zMD">MARCOS DANTAS</h1>
<!-- CDN Script -->
<script src="https://cdn.jsdelivr.net/gh/zMarcosDantas/hackerTyper.js@latest/dist/hTyper.min.js"></script>
<script>
// Init hTyper with default values
let typer = new hTyper(document.querySelector('#zMD'), {});
</script>
</body>Example that elements with .hTyping class will receive the effect:
document.querySelectorAll(".hTyping").forEach(element => {
new hTyper(element); // init with default values
}); You can pass the element parameter to constructor as HTMLElement or query string.
The constructor can receive a second parameter that should be a config json
new hTyper(element, {
chars: "abcdefghijklmnopqrstuvwxyz", // chars that you want
repetitions: 10, // the number of repetitions that will happen on each char
delay: 30, // repetition delay on each char
startDelay: 0, // waiting time before starting effect
looping: false, // repeat endlessly effect
forceUppercase: false, // force all chars to be uppercase,
hover: true, // effect on hover
}); - KPRVerse - Original website where the idea came from.
- Hyperplexed - Effect Tutorial
- Typed.js - Readme Inspiration