t-scroll

JavaScript

アニメーションとともにアイテムが一つずつ現れる「t-scroll」

t-scrollはアニメーションとともにアイテムを一つずつ表示させることができます。アニメーションは全部で45種類もあり、さまざまな種類の中から好きなアニメーションを設定することができます。アイテムが一つずつ現れるかっこいいコンテンツを作りたい人は要チェックです。

45種類ものアニメーションを用意

デモ

デモではページを読み込むと、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

floatTheadテーブルのヘッダーを固定できるjQueryプラグイン「floatThead」前のページ

かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」次のページFancy Input

関連記事

  1. Radial SVG Slider

    JavaScript

    放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

    Radial SVG Sliderは、放射状に広がりながら切り替わるス…

  2. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  3. PhotoJShop

    JavaScript

    写真にエフェクトやフィルタをかけることができるjQueryプラグイン「PhotoJShop」

    PhotoJShopというjQueryプラグインを使えば、写真にエフェ…

  4. Filterable Product Grid
  5. JavaScript

    jQueryで好きな要素を浮遊させることができるプラグイン「jqFloat」を使ってみた

    指定した要素をフワフワと浮遊させることができる面白いプラグインを使って…

  6. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP