<style><!-- [et_pb_line_break_holder] -->#test span {<!-- [et_pb_line_break_holder] --> border-right: .05em solid;<!-- [et_pb_line_break_holder] --> animation: caret 1s steps(1) infinite;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@keyframes caret {<!-- [et_pb_line_break_holder] --> 50% {<!-- [et_pb_line_break_holder] --> border-color: transparent;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style><!-- [et_pb_line_break_holder] --><h1 id="test">Hallo, Wij zijn Occhio!</h1><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->document.addEventListener('DOMContentLoaded',function(event){<!-- [et_pb_line_break_holder] --> // array with texts to type in typewriter<!-- [et_pb_line_break_holder] --> var dataText = [ "Amsterdam.", "Full Service.", "Webdevelopment.", "Wij zijn Occhio!"];<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> // type one text in the typwriter<!-- [et_pb_line_break_holder] --> // keeps calling itself until the text is finished<!-- [et_pb_line_break_holder] --> function typeWriter(text, i, fnCallback) {<!-- [et_pb_line_break_holder] --> // chekc if text isn't finished yet<!-- [et_pb_line_break_holder] --> if (i < (text.length)) {<!-- [et_pb_line_break_holder] --> // add next character to h1<!-- [et_pb_line_break_holder] --> document.querySelector("h1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // wait for a while and call this function again for next character<!-- [et_pb_line_break_holder] --> setTimeout(function() {<!-- [et_pb_line_break_holder] --> typeWriter(text, i + 1, fnCallback)<!-- [et_pb_line_break_holder] --> }, 100);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> // text finished, call callback if there is a callback function<!-- [et_pb_line_break_holder] --> else if (typeof fnCallback == 'function') {<!-- [et_pb_line_break_holder] --> // call callback after timeout<!-- [et_pb_line_break_holder] --> setTimeout(fnCallback, 700);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> // start a typewriter animation for a text in the dataText array<!-- [et_pb_line_break_holder] --> function StartTextAnimation(i) {<!-- [et_pb_line_break_holder] --> if (typeof dataText[i] == 'undefined'){<!-- [et_pb_line_break_holder] --> setTimeout(function() {<!-- [et_pb_line_break_holder] --> StartTextAnimation(0);<!-- [et_pb_line_break_holder] --> }, 20000);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> // check if dataText[i] exists<!-- [et_pb_line_break_holder] --> if (i < dataText[i].length) {<!-- [et_pb_line_break_holder] --> // text exists! start typewriter animation<!-- [et_pb_line_break_holder] --> typeWriter(dataText[i], 0, function(){<!-- [et_pb_line_break_holder] --> // after callback (and whole text has been animated), start next text<!-- [et_pb_line_break_holder] --> StartTextAnimation(i + 1);<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> // start the text animation<!-- [et_pb_line_break_holder] --> StartTextAnimation(0);<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --></script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->