Bootstrap Carousel Touch Slider with Text Animation

JavaScript

美しいテキストアニメーションによるスライダー実装「Bootstrap Carousel Touch Slider with Text Animation」

Bootstrap Carousel Touch Slider with Text Animationは、美しいテキストアニメーションによるスライダーを実装することができます。タッチにも対応したカルーセルスライダーで、PCはもちろん、スマホからでも手軽にスライドさせることが可能です。

Bootstrap Carousel Touch Slider with Text Animation

デモ

デモページをPCで開き、ページ内にマウスオーバーすると画面左右に前後移動できる矢印アイコンが表示されます。ここをクリックすることで、前後のコンテンツへスライド移動させることが可能です。

テキストが美しいアニメーションとともに表示されるので、とてもカッコイイですね。テキストに動きが加わることで注目度もグッとアップすると思います。

また、スライドは矢印アイコンからだけではなく、ドラッグでスライドさせることもできます。タッチにも対応しているので、スマホからでもしっかりスライドします。

オプションには、Slide effectやText Alignといったものが用意されているので、気になる人はぜひチェックしてみてください。ちなみに、スライドエフェクトには、slideとfadeが用意されています。

というわけで、テキストアニメーションが美しいカルーセルスライダーを実装できる「Bootstrap Carousel Touch Slider with Text Animation」のご紹介でした。

Bootstrap Carousel Touch Slider with Text Animation

infoBoxマウスオーバーでインフォメーションボックスを表示させる「infoBox」前のページ

左右に移動できるパノラマ画像を表示させれる「Panoramix Image」次のページPanoramix Image

関連記事

  1. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

  2. Zoomerang.js
  3. JavaScript

    文字の半分をスタイルすることができるjQueryプラグイン「Splitchar」

    SplitcharというjQueryプラグインを使えば、文字の半分をス…

  4. SmartPhoto.js

    JavaScript

    レスポンシブなイメージビューアを実装できる「SmartPhoto.js」

    SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージ…

  5. EasyZoom

    JavaScript

    タッチ対応で画像拡大やパンもできるjQueryプラグイン「EasyZoom」

    EasyZoomはタッチにも対応したモバイルフレンドリーな、画像拡大や…

  6. JavaScript

    円グラフ/折れ線グラフ/棒グラフを簡単に作れるjQueryプラグイン「Peity」

    個人的にかなり便利なプラグインを発見しました。円グラフ、折れ線グラフ、…

最近の記事

  1. フィールグッドシャワー
  2. RP-PB055
  3. ESD-EFシリーズ

アーカイブ

PAGE TOP