fbpx
<div class='console-container'><span id='text'></span><div class='console-underscore' id='console'>_</div></div>
<script type="text/javascript"><!-- [et_pb_line_break_holder] -->// function([string1, string2],target id,[color1,color2])<!-- [et_pb_line_break_holder] --> consoleText(['Rumbo a los 30 años.', 'Inscripciones #IUFRONT', 'en todas las carreras'], 'text',['#BD6983','tomato','lightblue']);<!-- [et_pb_line_break_holder] -->function consoleText(words, id, colors) {<!-- [et_pb_line_break_holder] --> if (colors === undefined) colors = ['#fff'];<!-- [et_pb_line_break_holder] --> var visible = true;<!-- [et_pb_line_break_holder] --> var con = document.getElementById('console');<!-- [et_pb_line_break_holder] --> var letterCount = 1;<!-- [et_pb_line_break_holder] --> var x = 1;<!-- [et_pb_line_break_holder] --> var waiting = false;<!-- [et_pb_line_break_holder] --> var target = document.getElementById(id)<!-- [et_pb_line_break_holder] --> target.setAttribute('style', 'color:' + colors[0])<!-- [et_pb_line_break_holder] --> window.setInterval(function() {<!-- [et_pb_line_break_holder] --> if (letterCount === 0 && waiting === false) {<!-- [et_pb_line_break_holder] --> waiting = true;<!-- [et_pb_line_break_holder] --> target.innerHTML = words[0].substring(0, letterCount)<!-- [et_pb_line_break_holder] --> window.setTimeout(function() {<!-- [et_pb_line_break_holder] --> var usedColor = colors.shift();<!-- [et_pb_line_break_holder] --> colors.push(usedColor);<!-- [et_pb_line_break_holder] --> var usedWord = words.shift();<!-- [et_pb_line_break_holder] --> words.push(usedWord);<!-- [et_pb_line_break_holder] --> x = 1;<!-- [et_pb_line_break_holder] --> target.setAttribute('style', 'color:' + colors[0])<!-- [et_pb_line_break_holder] --> letterCount += x;<!-- [et_pb_line_break_holder] --> waiting = false;<!-- [et_pb_line_break_holder] --> }, 1000)<!-- [et_pb_line_break_holder] --> } else if (letterCount === words[0].length + 1 && waiting === false) {<!-- [et_pb_line_break_holder] --> waiting = true;<!-- [et_pb_line_break_holder] --> window.setTimeout(function() {<!-- [et_pb_line_break_holder] --> x = -1;<!-- [et_pb_line_break_holder] --> letterCount += x;<!-- [et_pb_line_break_holder] --> waiting = false;<!-- [et_pb_line_break_holder] --> }, 1000)<!-- [et_pb_line_break_holder] --> } else if (waiting === false) {<!-- [et_pb_line_break_holder] --> target.innerHTML = words[0].substring(0, letterCount)<!-- [et_pb_line_break_holder] --> letterCount += x;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }, 120)<!-- [et_pb_line_break_holder] --> window.setInterval(function() {<!-- [et_pb_line_break_holder] --> if (visible === true) {<!-- [et_pb_line_break_holder] --> con.className = 'console-underscore hidden'<!-- [et_pb_line_break_holder] --> visible = false;<!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> con.className = 'console-underscore'<!-- [et_pb_line_break_holder] --> visible = true;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }, 400)<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></script>
<style><!-- [et_pb_line_break_holder] -->@import url(https://fonts.googleapis.com/css?family=Khula:700); <!-- [et_pb_line_break_holder] -->.hidden {<!-- [et_pb_line_break_holder] --> opacity:0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.console-container {<!-- [et_pb_line_break_holder] --> font-family:Khula;<!-- [et_pb_line_break_holder] --> font-size:4em;<!-- [et_pb_line_break_holder] --> text-align:center;<!-- [et_pb_line_break_holder] --> height:30px;<!-- [et_pb_line_break_holder] --> width:600px;<!-- [et_pb_line_break_holder] --> display:inline;<!-- [et_pb_line_break_holder] --> position:relative;<!-- [et_pb_line_break_holder] --> color:black;<!-- [et_pb_line_break_holder] --> top:0;<!-- [et_pb_line_break_holder] --> bottom:0;<!-- [et_pb_line_break_holder] --> left:0;<!-- [et_pb_line_break_holder] --> right:0;<!-- [et_pb_line_break_holder] --> margin:auto;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.console-underscore {<!-- [et_pb_line_break_holder] --> display:inline-block;<!-- [et_pb_line_break_holder] --> position:relative;<!-- [et_pb_line_break_holder] --> left:10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->@media (max-width: 750px) {<!-- [et_pb_line_break_holder] --> .console-container { font-size:2em; }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style>