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

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

ease

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

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;}
}
```
ログイン後にコピー

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