スマホやタブレットのサイトを、モックアップ付きで簡単にレビューする事が出来るjQueryプラグイン

モックアップの中で自動で上下し始めます

ひとまずどんなものなのかは、デモを参照してもらうのが一番です。
jQuery Animated Screenshots Demo

コードも簡単

VersatilityWerks/Animated-Screenshots · GitHub
こちらからダウンロードしたファイルをまず読み込みます。
あとは以下のようなコードをコピペするだけ。

<!-- Include the CSS -->
<link rel="stylesheet" type="text/css" href="animatedScreenshots.css" />

<!-- iPad -->
<div style='width: 775px'> <!-- Set to any width (percent, pixel, etc)-->
<div class='ipadWrapper'><div><div>
<img src="URL/TO/IMAGE.png" class="animatedIPAD"> <!-- Swap out with your Image -->
</div></div></div>
</div>

<!-- iPhone -->
<div style='width: 320px'> <!-- Set to any width (percent, pixel, etc) -->
<div class='iphoneWrapper'><div><div>
<img src="URL/TO/IMAGE.png" class="animatedIPHONE"> <!-- Swap out with your Image -->
</div></div></div>
</div>

<!-- Include the jQuery -->
<script src="animatedScreenshots.min.js"></script>

<!-- Initialize the Plugin -->
<script>
$(function(){
$('.animatedIPAD').animateScreenshot({repeat: true, speed: 1000, timeout: 500});
$('.animatedIPHONE').animateScreenshot({repeat: true, speed: 10000, timeout: 500});
});
</script>

ね、簡単でしょう？
これで面倒なスマホ画面やタブレット画面を手軽にお見せすることができるようになりますね。

それでは、また。