0
163
ViewsSimular 'retroceso' en Jquery
Tengo un código de animación simple, parece una entrada de consola.
Originalmente de: https://codepen.io/atunnecliffe/pen/BaZyLR
Modifiqué la introducción de la pantalla de inicio en solo una entrada de consola en mi sitio web:
Código:
<script> //console var textarea = $('.term'); var text = 'ping life'; var i = 0; runner(); function runner() { textarea.append(text.charAt(i)); i++; setTimeout( function () { runner(); }, Math.floor(Math.random() * 1000) + 50); } </script> Ahora, el efecto que quiero es un poco complejo, al menos para mí, ya que mi conocimiento sobre JQuery es limitado. Quería que el código ingresara a ping life , luego retrocediera por completo, repitiera infinitamente. Busqué cómo simular el retroceso en JQuery, usando la secuencia de escape de (8), pero no estoy seguro de cómo usar la secuencia de escape, ni implementar la función en la función recursiva existente, para que se repita infinitamente.
Cualquier ayuda sería maravillosa :)
1 answers
Answer question0
¿Como esto? Contar así dará un patrón de conteo en zigzag. Agregué búferes para el inicio y el final de la entrada, y un tiempo de espera fijo para eliminar letras.
textarea.text(text.substr(0, i)) selecciona una subcadena de su texto (tratada como una matriz de letras, seleccionando todo entre el índice 0 y i)
Más fácil que agregar y borrar letras
var direction = 1; var i = 0; var textarea = $('.term'); var text = 'ping life'; // NOTE: // I added the "@dev:~$ " as css:before elem, easier to write the code function count() { i += direction; direction *= (((i % text.length) == 0) ? -1 : 1); textarea.text(text.substr(0, i)); clearInterval(time); // direction is 1 if counting up if (direction === 1) { if (i === 0) { // buffer for start time = setInterval(count, 1000); } else { time = setInterval(count, Math.floor(Math.random() * 1000) + 50); } } else { // direction is -1 if counting down if (i === text.length) { time = setInterval(count, 1500); } else { // buffer for end time = setInterval(count, 100); } } } // inital interval // setTimeout doesn't work well here var time = setInterval(count, 1000) html, body { margin: 0 auto; height: 100%; } pre { padding: 0; margin: 0; } pre::before { content: "@dev:~$ "; color: white; } .load { margin: 0 auto; min-height: 100%; width: 100%; background: black; } .term { font-family: monospace; color: #fff; opacity: 0.8; font-size: 2em; overflow-y: auto; overflow-x: hidden; padding-top: 10px; padding-left: 20px; } .term:after { content: "_"; opacity: 1; animation: cursor 1s infinite; } @keyframes cursor { 0% { opacity: 0; } 40% { opacity: 0; } 50% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="load"> <pre class="term"></pre> </div>