Typewriter effect

by Marko Novakovic | Feb 20, 2019 | Web Design, Demo

To be successful is to

_

Typewriter effect can be achieved in many different ways but here is one example of a typewriter effect using HTML, CSS and JavaScript.

HTML code example

<div class=”console-container”>
To be
<span class=”highlight”> successful</span>
is to
<span id=”text”></span>
<div class=”console-underscore” id=”console”>_</div>
</div>

In HTML code static part of the text can be defined. Div with the ID text is used to insert dynamic part of the sentence. That part if the text is inserted using Java Script. In CSS code, text can be customized. Define color, size and position of the text. In JavaScript you can add dynamic part of the sentence that will be inserted into HTML. That text is being parsed and inserted each character at a time. Speed of insertion can also be adjusted inside JavaScript code.

CSS code example

.hidden {
 opacity:0;
}
.console-container {
 color: #fff;
 text-shadow:2px 2px 2px #333;
 font-size:3em;
 text-align: left;
 height:30px;
 display:block;
 position:relative;
 color:black;
 top:0;
 bottom:0;
 left:5rem;
 right:0;
 margin:auto;
font-weight: 500;
}
.console-underscore {
 display:inline-block;
 position:relative;
 left:10px;
}
.highlight{
 font-size: 4.5rem;
 color: orange;
 display:block;
 margin:15px 0;
 text-transform:uppercase;
 font-weight:bold; 
 line-height:1;
}

@media (max-width: 750px) {
 .console-container { font-size:1em; }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

.hidden {

opacity:0;

}

.console-container {

color: #fff;

text-shadow:2px 2px 2px #333;

font-size:3em;

text-align: left;

height:30px;

display:block;

position:relative;

color:black;

top:0;

bottom:0;

left:5rem;

right:0;

margin:auto;

font-weight: 500;

}

.console-underscore {

display:inline-block;

position:relative;

left:10px;

}

.highlight{

font-size: 4.5rem;

color: orange;

display:block;

margin:15px 0;

text-transform:uppercase;

font-weight:bold;

line-height:1;

}

@media (max-width: 750px) {

.console-container { font-size:1em; }

}

JavaScript code example

 consoleText(['trust yourself!', 'break some rules!', 'not be afraid to fail!', 'ignore the naysayers!', 'work like hell!', 'give something back!'], 'text',['#fff']);

function consoleText(words, id, colors) {
 if (colors === undefined) colors = ['#fff'];
 var visible = true;
 var con = document.getElementById('console');
 var letterCount = 1;
 var x = 1;
 var waiting = false;
 var target = document.getElementById(id)
 target.setAttribute('style', 'color:' + colors[0])
 window.setInterval(function() {

 if (letterCount === 0 && waiting === false) {
 waiting = true;
 target.innerHTML = words[0].substring(0, letterCount)
 window.setTimeout(function() {
 var usedColor = colors.shift();
 colors.push(usedColor);
 var usedWord = words.shift();
 words.push(usedWord);
 x = 1;
 target.setAttribute('style', 'color:' + colors[0])
 letterCount += x;
 waiting = false;
 }, 1000)
 } else if (letterCount === words[0].length + 1 && waiting === false) {
 waiting = true;
 window.setTimeout(function() {
 x = -1;
 letterCount += x;
 waiting = false;
 }, 1000)
 } else if (waiting === false) {
 target.innerHTML = words[0].substring(0, letterCount)
 letterCount += x;
 }
 }, 60)
 window.setInterval(function() {
 if (visible === true) {
 con.className = 'console-underscore hidden'
 visible = false;

 } else {
 con.className = 'console-underscore'

 visible = true;
 }
 }, 400)
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

consoleText(['trust yourself!', 'break some rules!', 'not be afraid to fail!', 'ignore the naysayers!', 'work like hell!', 'give something back!'], 'text',['#fff']);

function consoleText(words, id, colors) {

if (colors === undefined) colors = ['#fff'];

var visible = true;

var con = document.getElementById('console');

var letterCount = 1;

var x = 1;

var waiting = false;

var target = document.getElementById(id)

target.setAttribute('style', 'color:' + colors[0])

window.setInterval(function() {

if (letterCount === 0 && waiting === false) {

waiting = true;

target.innerHTML = words[0].substring(0, letterCount)

window.setTimeout(function() {

var usedColor = colors.shift();

colors.push(usedColor);

var usedWord = words.shift();

words.push(usedWord);

x = 1;

target.setAttribute('style', 'color:' + colors[0])

letterCount += x;

waiting = false;

}, 1000)

} else if (letterCount === words[0].length + 1 && waiting === false) {

waiting = true;

window.setTimeout(function() {

x = -1;

letterCount += x;

waiting = false;

}, 1000)

} else if (waiting === false) {

target.innerHTML = words[0].substring(0, letterCount)

letterCount += x;

}

}, 60)

window.setInterval(function() {

if (visible === true) {

con.className = 'console-underscore hidden'

visible = false;

} else {

con.className = 'console-underscore'

visible = true;

}

}, 400)

}

2 Comments

Larry Roberts on January 3, 2021 at 12:11 pm

Love your code, I hope to try it out soon. However, successful is spelled wrong. It has 2 c’s.
Reply
- Marko Novakovic on January 4, 2021 at 9:27 am
  
  Good catch! We fixed it!
  Reply