jQuery

【jQuery】タイプライターをシミュレートするアニメーションTypewriter

April 24, 2017
A VERY lightweight Jquery Typewriter

Typewriter軽量のタイプライターをシミュレートするjqueryプラグイン/ CSSアニメーション

How to install

typeewriter__clipクラスをコンテナに追加します。

<div class="typewriter__clip">
    <div class="js-typewriter">
        <p class="typewriter__word">The series is fun !</p>
        <p class="typewriter__word">The rooting interests are many and varied...</p>
        <p class="typewriter__word">Watch it !</p>
    </div>
</div>
<script>
    $('.js-typewriter').typewriter();
</script>

Customize it !

色を変更したい場合は、いくつかのCSSを編集

.typewriter__clip {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-right: 1px solid white; /* change the cursor color here */
}

カーソルを削除するには、typewriter__clipクラスの隣にtypewriter__clip_no-cursorというクラスを追加

<div class="typewriter__clip typewriter__clip_no-cursor">
    <div class="js-typewriter">
        <p class="typewriter__word">The series is fun !</p>
        <p class="typewriter__word">The rooting interests are many and varied...</p>
        <p class="typewriter__word">Watch it !</p>
    </div>
</div>

Options

<script>
    $('.js-typewriter').typewriter({
        speed: 1000, // Speed animation, in ms
        delay: 5000, // Waiting time for the next switch, in ms
        marge: 10 // Right margin, in px
    });
</script>

MIT