今日の人気記事

  1. 簡単にドロップダウンメニューがつくれる「Superfish」
  2. アニメーションでテキストが切り替わる「Words Rotator」
  3. グラフにマウス操作で動かせる目盛りを実装「2D Slider and Range」
  4. 年月の選択ボタンを実装「Multiple Month Picker」
  5. 指定した要素をドラッグして移動「tinyDraggable」

モザイク状に画像を並べる「Mosaic Flow」

スポンサーリンク

さまざまなサイズの画像をモザイク状に並べるプラグイン「Mosaic Flow」を紹介します。

jQueryプラグイン「Mosaic Flow」

このプラグインを使えば、Webサイト一面にさまざまなサイズ画像を並べることができます。

レスポンシブ対応で、画像にマウスオーバーすることで画像「タイトル」を表示することもできます。

スポンサーリンク

それではデモページの画面いっぱいの画像をご覧ください。

「Mosaic Flow」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Mosaic Flow のデモでーす。">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mosaic Flow - jQueryプラグイン</title>
<style>
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.mosaicflow__column {
  float:left;
}
.mosaicflow__item {
  position:relative;
}
.mosaicflow__item img {
  display:block;
  width:100%;
  max-width:500px;
  height:auto;
}
.mosaicflow__item p {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  margin:0;
  padding:5px;
  background:hsla(0,0%,0%,.5);
  color:#fff;
  opacity:0;
}
.mosaicflow__item:hover p {
  opacity:1;
}
</style>
</head>
<body>
<h1>Mosaic Flow のデモでーす。</h1>

<div class="mosaicflow" data-item-height-calculation="attribute">
  <div class="mosaicflow__item">
    <img src="images/01-red.png" />
    <p>赤です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/02-orange.png" />
    <p>橙です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/03-yellow.png" />
    <p>黄色です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/04-green.png" />
    <p>緑です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/05-blue.png" />
    <p>青です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/06-indigo.png" />
    <p>藍です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/07-purple.png" />
    <p>紫です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/01-red.png" />
    <p>赤です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/02-orange.png" />
    <p>橙です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/03-yellow.png" />
    <p>黄色です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/04-green.png" />
    <p>緑です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/05-blue.png" />
    <p>青です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/06-indigo.png" />
    <p>藍です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/07-purple.png" />
    <p>紫です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/01-red.png" />
    <p>赤です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/02-orange.png" />
    <p>橙です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/03-yellow.png" />
    <p>黄色です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/04-green.png" />
    <p>緑です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/05-blue.png" />
    <p>青です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/06-indigo.png" />
    <p>藍です。</p>
  </div>
  <div class="mosaicflow__item">
    <img src="images/07-purple.png" />
    <p>紫です。</p>
  </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mosaicflow.js"></script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)