タイピング効果を実現するCSS

JS 実装

最近プロジェクトを行っていたときに、文字を 1 つずつ表示するタイピング効果を実現する必要がありました。インターネットで優れた jQuery プラグイン Typed.js を見つけました。その効果は非常に優れています。

<p class="element"></p>

<script src="typed.js"></script>
<script>
  $(function(){
      $(".element").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
      });
  });
</script>

アドレス、注釈付きのソースコードは 200 行を超えており、それほど複雑ではありません 実装方法も、js を使用して文字を追加することを簡単に考えることができます。作者は多くの文字を 1 つずつ作成しており、その速度は驚くべきものです。詳細とブラウザーの互換性要件が満たされない場合は、簡単な

var s = 'Hello World! Hello World! Hello World!';
var con = $('.container');
var index = 0;
var length = s.length;
var tId = null;

function start(){
  con.text('');
  
  tId=setInterval(function(){
    con.append(s.charAt(index));
    if(index++ === length){
    clearInterval(tId);
    index = 0;
    start()
    }
  },100);
}

start();

JS Bin

CSS 実装を作成できます。非常に厳密ですが、CSS3 を通じて実装できます

animation-timing-function

私たちは皆、CSS3 アニメーションを普段このように使用しています

animation: animation-name animation-duration animation-iteration-count

animation: name 5s infinite;

実際、アニメーションのフルバージョンには多くのパラメータがあります。別の属性としても記述できます

animation-name

1. animation-duration

2. animation-timing-function

3. animation-delay

4. animation-iteration-count

5. アニメーション-direction

6. 今日は、アニメーション タイミング関数に焦点を当てます。はい、これは jQuery がアニメーション化するときに使用するライナー パラメーターの意味ですが、CSS3 ではその他の指定された変更が提供されます。アニメーション タイミング関数属性による

ease

1. linear

2. ease-out

3. ease-in-out

4. step-start

5. step-end

6. steps

7. cubic-bezier

8. 一種のベジェ曲線に対応することができ、ベジェ曲線の効果を直感的に確認することができます。ここでは詳しく説明しません
   ステップ
9. ステップの効果を見てみましょう。実際、その名前が示すように、落ちてくるテトリスの小さな四角形もアニメーション化されるのと同じように、ステップの意味を考えることができます。ただし、それらは連続的ではなく、フレームごとに似ています。ステップは、この効果を実現する方法です
   ステップの構文

steps(number_of_steps, [start|end])

number_of_steps アニメーションが分割されるステップ数

方向アニメーションの表示ステータス、終了: デフォルト値、最初のフレームが開始する前に表示、開始: 最初のフレームが終了した後に表示

JS Bin

• .walk {
    width: 125px;
    height: 150px;
    background: url(http://www.php.cn/) left;
    -webkit-animation:anima 1s steps(16) infinite ;
  }
  
  @-webkit-keyframes anima{
      from { background-position:2000px 0;}
      to {background-position:0px 0;}
  }

タイピング効果

• タイピング効果は想像できますが、コンテナの幅を変更するだけです (単一行でのみ使用できます。各ステップの長さを増やすにはまだ行う必要があります)文字の幅と一致するため、実際には js の方が優れています)

  .typing{
      width:250px;
      white-space:nowrap;
      overflow:hidden;
      -webkit-animation: type 3s steps(50, end) infinite;
    animation: type 3s steps(50, end) infinite;
  }
  
  
  @-webkit-keyframes type{
      from { width: 0;}
  }
  
  @keyframes type{
      from { width: 0;}
  }

JS Bin

タイピング効果を実現するための CSS 関連記事については、PHP 中国語 Web サイトに注目してください。