ここがおすすめ

簡単なコードを書くだけで、かっこいいアニメーションでコンテンツを表示させることが出来ておすすめです。

サンプル

• bringins demo
  

公式サイト

• bringins
  
• jQuery
  

導入方法

このプラグインを使うには、

• 1.ファイルの取得と読み込み
• 2.htmlファイルへのプラグイン呼び出しの記述
• 3.htmlファイルに表示させるコンテンツを記述する
  

が必要になります。
以下、詳しく解説します。

必要ファイルの取得と読み込み

必要ファイルは

• bringins.js
• jQuery本体

bringins.jsは上記公式サイト内、Downloadボタンから。
jQuery本体はjQuery公式サイトより。

以上2ファイルをhtmlファイルに読み込ませます。

<script type="text/javascript" src="script/jquery-1.12.0.min.js"></script> 
<script type="text/javascript" src="script/bringins.js"></script>

htmlファイルへのプラグイン呼び出しの記述

続いて、プラグインを呼び出すためのコードをhtmlファイルに記述します。

$(document).ready(function() {
    $('#sampledata').bringins();
});

3.htmlファイルに表示させるコンテンツを記述する

最後に、htmlファイルに表示させたいコンテンツを記述します。

<div id="sampledata" class="bringins-content">
    Your content goes here...
</div>

動作させたい要素のIDとプラグイン呼び出しに記述するIDを合わせてください。この例だと”#sampledata”となっています。

ここがおすすめ

Pinterest風グリッドがかんたんに実装できておすすめです。
グリッド実装系プラグインの大御所「Masonry」と比較すると、容量の軽さ(わずか1KB!!)と、jQueryに依存しない点が特長です。

Waterfall.js動作デモ

• Waterfall.js – Pinterest Grid in Just 1KB
  

Waterfall.js公式サイト

• GitHub – raphamorim/waterfall.js: Tired of use creepy hacks or heavy ways to get a Grid based on Pinterest?
  

導入方法

Waterfall.jsを使うには、

• 1.ファイルの取得と読み込み
• 2.htmlファイルへのプラグイン呼び出しの記述
• 3.htmlでのグリッド部分のコード記述

が必要になります。
以下、詳しく解説します。

必要ファイルの取得と読み込み

必要なファイルは

• waterfall.min.js
  

waterfall.min.jsは上記「公式サイト」項目内Waterfall.js公式サイトよりダウンロードできます。

上記ファイルをhtmlに読み込ませます

<script src="//cdnjs.cloudflare.com/ajax/libs/waterfall.js/1.0.2/waterfall.min.js"></script>

この例ではCDNを使って外部サーバーにあるファイルを読み込んでいます。

htmlファイルへのプラグイン呼び出しの記述

続いて、プラグインを呼び出すためのコードをhtmlファイルに記述します。
html内に記述する場合はscriptタグで囲んで、配置場所は上記jsファイル読み込みの記述より後ろに。

waterfall('.grid');
// or
var grid = document.querySelector('.grid');
waterfall(grid);

htmlでのグリッド部分のコード記述

最後にグリッド表示させたい箇所のhtmlコードを記述します。
上記プラグイン呼び出しにある.gridと下記htmlコードのグリッド部分を同じクラス名のタグで囲むのがポイントです。

<div class="grid">
    <div class="item">Solid Snake</div>
    <div class="item">Riou</div>
    <div class="item">Jack Russel</div>
</div>

以上、Waterfall.jsの設定方法の説明でした。
オプション等は、上記公式サイトにて確認してください。

ここがおすすめ

大量のエフェクトパターンから簡単なコードでイメージホバーエフェクトを実装できておすすめです。

Pure CSS Image Hover Effect Library動作デモ

• Imagehover.css – A Pure CSS Image Hover Effect Library | imagehover.css
  

Pure CSS Image Hover Effect Library公式サイト

• Imagehover.css – A Pure CSS Image Hover Effect Library | imagehover.css
  

導入方法

Pure CSS Image Hover Effect Libraryを使うには、

• 1.ファイルの取得と読み込み
• 2.htmlの記述とクラスの付加

が必要になります。
以下、詳しく解説します。

必要ファイルの取得と読み込み

必要なファイルは

• imagehover.css(もしくはimagehover.min.css)
  

上記「公式サイト」項目内Pure CSS Image Hover Effect Library公式サイトよりダウンロードできます。

上記ファイルをhtmlに読み込ませます。
ファイルのパスはご自身の作業環境(ディレクトリー構成)に合わせて適宜変更してください。

<link href="imagehover.css” rel="stylesheet" />

htmlの記述とクラスの付加

続いて、Pure CSS Image Hover Effect Libraryの規定にそってhtmlの記述を行います。
imgタグとfigcaptionタグ、aタグをfigureタグで囲い、figureタグに動作させたいホバーエフェクトのクラス名を付加します。

<figure class="imghvr-fade">
　　<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
　　<figcaption>
　　　　<h3>Hello World</h3>
　　　　<p>Life is too important to be taken seriously!</p>
　　</figcaption>
　　<a href="javascript:;"></a>
</figure>

クラス名については、上記した「Pure CSS Image Hover Effect Library公式サイト」に、すべての動作とクラス名が記述されています。

以上、Pure CSS Image Hover Effect Libraryの設定方法の説明でした。
オプションなどの詳細は、上記公式サイトにて確認してください。