t-scrollはアニメーションとともにアイテムを一つずつ表示させることができます。アニメーションは全部で45種類もあり、さまざまな種類の中から好きなアニメーションを設定することができます。アイテムが一つずつ現れるかっこいいコンテンツを作りたい人は要チェックです。
45種類ものアニメーションを用意
以下、t-scrollの実際のデモページになります。
デモではページを読み込むと、1〜6のアイテムが一つずつアニメーションとともに表示されます。
右側にはいくつかのアニメーションタイプが用意されていて、見たいものをクリックするとそのアニメーションが実行されます。大きく分けると、BouncesとFadesの2種類があり、Bouncesには、bounceIn・bounceOut・bounceUp・bounceRight・bounceDown・bounceLeft、FadesにはfadeIn・fadeUpが用意されています。
また、実際に設定できるアニメーションのオプションは上記以外にもいろいろあり、flipX・flipY・lightSpeedUp・rollUp・rotateUpLeft・slideUp・zoomInなど、全部で45種類とかなり豊富な種類が用意されています。
これだけたくさんのアニメーションタイプがあれば、自分好みのアニメーションも見つかりやすいですね。使い方も簡単なので、サクッと実装できると思います。
クロスブラウザにも対応(IE 10+、Firefox、Safari、Opera、Chromeなど)しているところもうれしいポイントの一つです。
ちなみに、t-scrollはES6が使われているとのこと。jQueryを必要とせずに実装できるのも魅力的ですね。
というわけで、かっこいいアニメーションとともにアイテムを一つずつ表示させたい人は、ぜひ「t-scroll」を使われてみてはいかがでしょうか?
t-scrollの具体的な実装方法やダウンロードは以下のページからチェックできます。