写真が次々と動く!アニメーションギャラリーがつくれるAnimated Responsive Image Grid!レスポンシブ対応!

写真をたくさん並べてみせるのにいい感じのライブラリ「Animated Responsive Image Grid」のご紹介です。
写真がランダムに動いてきりかわる
まずはデモを御覧ください。
写真がランダムに動いてきりかわります。トップページのメインイメージで使ってもかっこいいですね。レスポンシブ対応で、スマホでもきちんと動きます。幅100%のデザインにも使えますし、スピードなどを変えられるオプションも豊富なのがいいところ。なかなか、こういうライブラリは少ないので貴重です。
作り方
こちらのページから「Download source」でソース一式をダウンロード。
解凍したら、cssフォルダとjsフォルダから必要なものをコピー。
<link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.gridrotator.js"></script>
写真表示部分のHTMLをつくります。
<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow"> <ul> <li><a href="#"><img src="images/medium/1.jpg" alt="Whatever works"/></a></li> <li><a href="#"><img src="images/medium/2.jpg" alt="Anything else"/></a></li> <!-- ... --> </ul> </div>
あとは実行するだけ。
$(function() { $( '#ri-grid' ).gridrotator(); });
Animated Responsive Image Grid
[sc name=”engeneer”]
SHARE
PROFILE

入江 慎吾
イリテク株式会社代表取締役 / メンターマッチングサービスMENTAを運営(月間流通額700万突破)/ 累計20個以上のWEBサービスやアプリを開発 / CAMPFIREとコミュニティツールVoyageを共同開発中 / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営(詳しいプロフィール)
イリテク株式会社代表取締役 / メンターマッチングサービスMENTAを運営(月間流通額700万突破)/ 累計20個以上のWEBサービスやアプリを開発 / CAMPFIREとコミュニティツールVoyageを共同開発中 / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営(詳しいプロフィール)