diamonds.js

JavaScript

ダイヤモンドみたいな形のイメージギャラリーを実装できるjQueryプラグイン「diamonds.js」

diamonds.jsというjQueryプラグインを使えば、ダイヤモンド(菱形)みたいな形をしたイメージギャラリーを実装することができます。普通のイメージギャラリーじゃつまらない!という方にはよさそうですね。ちょっと変わったイメージギャラリーなので印象に残りそうな感じです。

[ads_center]

diamonds.jsの使い方

diamonds.jsの使い方

diamonds.js

jQueryを読み込んでいる状態で、diamonds.cssとjquery.diamonds.jsをhead内に読み込みます。

<link rel="stylesheet" type="text/css" href="diamonds.css" />
<script type="text/javascript" src="jquery.diamonds.js"></script>

マークアップはこんな感じです。

<div class="diamondswrap">
    <a href="#" class="item">sample</a>
    <a href="#" class="item">sample</a>
    <!-- 中略 -->
</div>

プラグインを呼び出します。

$(".diamondswrap").diamonds({
    size: 250,
    gap: 1
});

関連記事

  1. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  2. Panoramix Image

    JavaScript

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

    Panoramix Imageは、左右に移動できるパノラマ画像を表示さ…

  3. SMINT

    JavaScript

    1ページだけのWebサイトに最適なスクロール移動できるナビゲーションを実装できるjQueryプラグイ…

    1ページだけのWebサイトを作る際にとても役立ちそうですね。ナビゲーシ…

  4. AnimatedSlideNav

    JavaScript

    動きがオシャレなアニメーションのサイドナビゲーション「AnimatedSideNav」

    AnimatedSideNavは、動きがオシャレなアニメーションによる…

  5. syncscroll

    JavaScript

    2つ以上のスクロールエリアを同時にスクロールできる「syncscroll」

    syncscrollは2つ以上のスクロールエリアを同時にスクロールでき…

  6. Changing Background Color while scrolling

コメント

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

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

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP