写真が次々と動く!アニメーションギャラリーがつくれる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
無料メルマガ<特典付き>
個人開発・ビジネスについての有益な情報を無料メルマガでお届けします。
個人開発のスキルアップにMENTA
MENTAはいろんなプロに相談できるNo1メンターサービスです。
僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。
YouTubeでも個人開発ノウハウを発信中!
PROFILE

入江 慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)