Jadi pada dasarnya animasi CSS saya seharusnya meniru beberapa teks yang sedang diketik, tidak diketik dan akhirnya diubah menjadi kata lain. Biasanya keyframe CSS dan JavaScript setInterval sinkron tetapi pada perangkat seluler terkadang tidak sinkron atau jika saya membuka tab baru mereka tidak sinkron.

<center style="display: flex; width:70vw">
     <h1 style="padding-right:20px;">We</h1>
     <h1 id="terminal-text">innovate.</h1>
</center>
<script type="text/javascript">
    var i = 0;
    words = ['architect.','build.','design.','code.','develop.','innovate.'];
    setInterval(function() {
      $("#terminal-text").text(words[i]);
      i++;
      if (i > words.length) {
        i=0;
      }
    },3000);
</script>
#header .banner h1 {
  margin: 1em 0 .5em -10%;
  padding: 0;
  color: white;
  text-align: left;
}
@keyframes terminal {
  0% {max-width:0}
  50% {max-width:100%}
  55% {max-width:100%}
  100% {max-width:0}
}
#header #terminal-text {
  font-weight: bold;
  margin: 1em 0 .5em 0;
  padding: 0;
  animation: terminal 3s infinite;
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid white;
  text-align: left;
}
2
K A 22 Oktober 2019, 22:03

1 menjawab

Sebenarnya bukan jawaban, tetapi lebih merupakan saran, ini mengingatkan saya tentang 2 fungsi JS sederhana yang saya tulis untuk ini beberapa waktu lalu, type_word() dan erase_word(), dan saya dapat menemukannya kembali. Ini tidak benar-benar membantu memecahkan masalah Anda, tetapi pada akhirnya mungkin membantu Anda. Ini cukup keren, bahkan menggunakan faktor waktu acak untuk mensimulasikan pengetikan realistis!

var span = document.getElementById('text');

// add a right border to simulate cursor!
span.style.borderRight = "1px solid #000";

type_word('develop', span, function(){
  erase_word(span, function(){
    type_word('innovate', span, function(){
      // all finished, remove the fake cursor !
      span.style.borderRight = "0px";
    });
  });
});


function type_word(word, container, cback){
  container.innerHTML += word.substring(0,1);
  if(word.length > 1){
    var t = setTimeout(function(){type_word(word.substring(1), container, cback); }, 50+Math.random()*250);
  }
  else{
    cback();
  }
}

function erase_word(container, cback){
  container.innerHTML = span.innerHTML.slice(0, -1);
  if(container.innerHTML.length > 0){
    var t = setTimeout(function(){erase_word(container, cback); }, 50+Math.random()*50);
  }
  else{
    cback();
  }
}
We <span id="text"></span>
1
François Huppé 22 Oktober 2019, 20:03