jQueryを使ったタイピングエフェクトです。オリジナルは、英文用でしたが、scriptやcssを少し改変することで日本語も問題なく表示できるようになりました。ページをロードすると、h1要素のタイトルが中央から開くようにタイプされ、p要素の本文が1文字ずつタイプされていきます。使い方は、下のhtmlソースのような構造で、h1要素とp要素を書き込むだけです。
注意点:オリジナルでは、すべてのh1要素とp要素に影響してしまいますので、セレクタを変更しています。

百万石 BtoB WEB受注システム

まだFAX・電話で受注ですか!? 月98,000円(税抜き)でBtoB受注を開始できます。 「経費節減+顧客満足度UP」を図るなら、WEB受注をお勧めします!! まずは受注全体の50%をWEB受注にしてみてはいかがでしょう。 既存システムの変更不要で即行稼動します!!  どこかコストを削減できないかとお嘆きの経営者の皆様。 本当のコストダウンは受注から始まります。 携帯電話、スマートフォン、iPad等の端末からの利用(発注)にも対応可能です。

サンプルのhtmlソース

<div id="table">
  <div id="centeralign">
    <h1>百万石 BtoB WEB受注システム</h1>
    <p>まだFAX・電話で受注ですか!? 
      月98,000円(税抜き)でBtoB受注を開始できます。
      「経費節減+顧客満足度UP」を図るなら、WEB受注をお勧めします!!
      まずは受注全体の50%をWEB受注にしてみてはいかがでしょう。
      既存システムの変更不要で即行稼動します!! 
      どこかコストを削減できないかとお嘆きの経営者の皆様。
      本当のコストダウンは受注から始まります。
      携帯電話、スマートフォン、iPad等の端末からの利用(発注)にも対応可能です。
    </p>
  </div>
</div>
※引用と参考;http://codepen.io/worksbyvan/pen/dRBGKK
戻るボタン