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. PgwSlider

    JavaScript

    レスポンシブで軽量なスライダーを実装できるjQueryプラグイン「PgwSlider」

    PgwSliderというjQueryプラグインを使えばレスポンシブで軽…

  2. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

  3. jQuery cForm

    JavaScript

    フォームのスタイルをカスタマイズできる「jQuery cForm」

    jQuery cFormはフォームのスタイルを簡単にカスタマイズするこ…

  4. ScrollTrigger

    JavaScript

    スクロールの位置をベースにしたアニメーション「ScrollTrigger」

    ScrollTriggerはユーザーがスクロールする位置をベースにした…

  5. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

最近の記事

  1. COMOLIの製品染ナイロン アノラックとトラックパンツ
  2. WH-XB900N
  3. Eufy RoboVac L70 Hybrid
  4. cheero Smart USB Charger 48W CHE-320

アーカイブ

PAGE TOP