ドラッグで移動する画像ギャラリー

officehojoのWebサイトを更新しました。今までアニメーションの動きが悪かったので、プラグインを変更したら少し見やすくなりました。全ページマイナーチェンジをしましたが、Portfolioページだけちょっとした遊びを追加したので、こちらで実装方法を紹介します。

Packeryで軽量なグリッドレイアウトを実装
Webデザインに使えるマテリアル

Packeryで軽量なグリッドレイアウトを実装

今回使ったのは「Packery」という可変グリッドレイアウトのプラグインです。今まで使っていたminigridというプラグインはイマイチ動きが悪かったのでこちらを採用してみたところ、簡単に導入できたのでお勧めします。

さらに画像をドラッグすると自由に移動できる「Draggabilly」というプラグインも入れました。このプラグインはいろんな場面で使えそうです。

officehojo Aboutの作品リストで実装中

こちらのページで取り入れている動きは下記の3つ。

画像全部がふわっと下から上に登場する（アニメーション：フェードイン）
高さが違う画像でも上に積み上がっていく（Packery：可変グリッドレイアウト）
画像がドラッグで移動する（Draggabilly）

画像をフェードインさせるアニメーション

フェードインさせたい要素を指定し、アニメーションを追加。私の場合は.cardsというクラス名にアニメーションをかけています。

.cards{
   animation-duration: 1s;
   animation-name: fadein;
 }

上がアニメーションを作動させる時間。1sは1秒です。下がアニメーションの名前（なんでもOK）。

さらにキーフレームで詳細を設定。「@keyframes 名前」で指定してあげます。

@keyframes fadein {
0% {
    opacity: 0;  
    transform: translateY(100px);
   }
100% {
    opacity: 1;
    transform: translateY(0);
   }
}

opacity:0は透明、1は不透明です。translateYは縦方向、translateXは横方向に出現。100pxは移動する距離。

まとめると、「縦方向（下から上）に」「1秒かけて」「透明から不透明に変わりながら」「100px進む」となります。

Packeryによる可変グリッドレイアウト（画像を並べる）

ここで必要なのは「packery.pkgd.min.js」というファイルです。Packeryオフィシャルサイトからダウンロードしましょう。

任意のフォルダに入れたら、htmlの<head>内、もしくは</body>の直前にタグを入れます。（パスの指定方法はまた別の記事で紹介します）

<script src="packery.pkgd.min.js"></script>

そして、その下に下記のスクリプトを入れます。

<script>
var $container = $('.cards');
     $container.packery({
     itemSelector: '.card',
     gutter: 15
 });
</script>

gutter: というところで間隔（px）を指定できます。クラス名は変更してOKです（.cards と .card の部分）。上の記述では、一つの画像を「.card」、それをまとめたグループを「.cards」として指定しています。htmlはこんな感じ。

<div class=".cards">
  <div class=".card"></div>
  <div class=".card"></div>
</div>

これでカードレイアウトの完成です。

Draggabillyで画像をドラッグで移動できるようにする

追加のプラグイン「Draggabilly」をダウンロードする。使うのは「draggabilly.pkgd.min.js」というファイルです。

先ほど入れたpackery.pkgd.min.jsの下に入れます。

<script src="packery.pkgd.min.js"></script>
<script src="draggabilly.pkgd.min.js"></script>

こんな感じになります。そして追加のscriptを入れます。

<script>
var $container = $('.cards').packery({
     columnWidth: 0,
     rowHeight: 0
 });
 $container.find('.card').each( function( i, itemElem ) {
     var draggie = new Draggabilly( itemElem );
     $container.packery( 'bindDraggabillyEvents', draggie );
 });
</script>

スクリプトはまとめてOK。

スマホ版ではスクロールできる余白を作って置かないと、画像が移動して下に進めないというイライラアイテムになるので注意です。

※現在はデザインをリニューアルしています↓