ITエンジニア/デザイナ向けにオープンソースを毎日紹介

単なるテキストだと見過ごされてしまうかも知れません。そこで必要になるのが目立たせるための工夫です。文字の色を変えたり、フォントを変えたりすることもできますが、ちょっと安っぽくなってしまうこともあります。

そこで使ってみたいのがtScrollです。文字をアニメーションさせることで印象づけるテクニックが使えます。

tScrollの使い方

デモです。アニメーションGIFではちょっと分かりづらいですが、手前から降ってくるような感じです。

下から出てくるアニメーション。

右からスライド。

こちらも下から。

回転しながら。

横回転。

手前に迫ってくる感じ。

tScrollでは様々なアニメーションがあらかじめ登録されているので、それらを指定するだけでインパクトある表示が実現します。JavaScriptなので画面のスクロールやDOMのドラッグに合わせるといったことも簡単でしょう。

tScrollはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

tScroll Index | Animation Scroll | t-scroll tuds

crazychicken/t-scroll: The most popular HTML, CSS, and JavaScript (Animate Elements On Reveal)

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2