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

    jQuery Backstretchを使えば超簡単にブラウザサイズに合った背景画像を表示できる

    背景画像をブラウザのサイズに合わせて表示できるプラグイン「jQuery…

  2. desoSlide

    JavaScript

    サムネイル付きのナビが素敵なスライダーを実装できるjQueryプラグイン「desoSlide」

    desoSlideというjQueryプラグインを使えば、サムネイル付き…

  3. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

  4. Sticky Multi Header Scroll
  5. Sticky Slider Navigation(Responsive)
  6. jquery.mark

    JavaScript

    キーワードをハイライトしてくれる「jquery.mark」

    jquery.markはキーワードをハイライトしてくれるjQueryプ…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP