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

関連記事

  1. BigText

    JavaScript

    テキストを指定した幅にフィットさせるjQueryプラグイン「BigText」

    BigTextは、テキストの行を、指定した幅にフィットさせるために必要…

  2. Toolgif

    JavaScript

    GIFアニメーションによるツールチップを実装できる「Toolgif」

    ToolgifはGIFアニメーションを活用したツールチップを実装するこ…

  3. shCircleLoader
  4. Navigation

    JavaScript

    コンテンツを押し出してナビゲーションを表示する「Navigation」

    Navigationはコンテンツを押し出すかたちでナビゲーションを表示…

  5. Animated Toggle Menu

最近の記事

  1. M360bt

アーカイブ

PAGE TOP