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

関連記事

  1. NO IMAGE

    JavaScript

    テキストコンテンツをページ分割(ページネーション)できる「jPaginate」

    jPaginateはWebページ内のテキストコンテンツをページ分割(ペ…

  2. JavaScript

    レスポンシブで横スクロールやキーボード操作も可能なjQueryギャラリー「Portfoliojs」

    ポートフォリオなどでとても素敵なイメージギャラリーを実装することができ…

  3. table-dragger

    JavaScript

    ドラッグ&ドロップでテーブルを並べ替えられる「table-dragger」

    table-draggerはドラッグ&ドロップでテーブルの並べ替えを可…

  4. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

  5. no-image

    JavaScript

    チェックボックスをアニメーショントグルにする「jquery-simpletoggler」

    jquery-simpletogglerは、デフォルトのチェックボック…

  6. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

最近の記事

  1. オリジナルチキン6ピース
  2. 200-DGCAM019
  3. ハクバ GW-PRO RED フォトグローブプロ PL
  4. Soundcore Liberty Air 2

アーカイブ

PAGE TOP