flipLightBox

JavaScript

フリップ効果が特徴的なレスポンシブ対応のLightbox風jQueryプラグイン「flipLightBox」

レスポンシブ対応のLightbox風jQueryプラグイン「flipLightBox」がよさそうだったのでメモがてらご紹介します。クリックした画像はフリップで表示されます。違和感のないさりげないエフェクトがとても素敵ですね。画面の下部には上に向かってテキストバーがスライド表示されます。

[ads_center]

使い方

flipLightBox

見た目もシンプルで使いやすそうですね。前後のナビゲーションリンクはテキストバーのところに表示されます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="fliplightbox/fliplightbox.min.js"></script>
<script type="text/javascript">
$('body').flipLightBox()
</script>

aタグにはflipLightBoxというクラス名を付与します。

<a href="lightbox-image.jpg" class="flipLightBox">サムネイル画像など<span>サンプルテキスト</span></a>

オプションではフリップのスピードやボーダーカラーを設定できます。

$('body').flipLightBox({
    lightbox_flip_speed: 500,
    lightbox_border_color: '#666666'
})

レスポンシブな画像ギャラリーを作る際によさそうですね。

関連記事

  1. Zoomerang.js
  2. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  3. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

  4. Mirror Effect

    JavaScript

    ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」

    Mirror EffectはWebサイト内でかっこいいミラーエフェクト…

  5. shCircleLoader
  6. Rain & Water Effect Experiments

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる
  3. Hermèsオレンジスポーツバンド
  4. GoPro HERO8 Black

アーカイブ

PAGE TOP