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. jquery-base-slider
  2. Pogo Slider

    JavaScript

    豊富なスライドアニメーションが揃っているjQueryプラグイン「Pogo Slider」

    Pogo Sliderは豊富なスライドアニメーションが揃っているjQu…

  3. FilmRoll

    JavaScript

    中央に来た項目に焦点を当てるカルーセルを実装できるjQueryプラグイン「FilmRoll」

    FilmRollというjQueryプラグインを使えば中央に来た項目に焦…

  4. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

  5. Pilpil

    JavaScript

    プログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」

    Pilpilは、ページの画像表示の時間を短縮するためのJSライブラリで…

  6. PIGNOSE Calendar

    JavaScript

    美しくてシンプルに使えるデートピッカー実装「PIGNOSE Calendar」

    PIGNOSE Calendarは、美しくてシンプルな操作性によるデー…

最近の記事

  1. フェルメール展
  2. 上島珈琲店 No.11
  3. 銀座トリコロール

アーカイブ

PAGE TOP