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

プレビュー用のプラグインです。
タブレットや、スマートフォンなんかでサイトの紹介をするときに非常に便利です。
モックアップの中で自動で上下し始めます
ひとまずどんなものなのかは、デモを参照してもらうのが一番です。
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>
ね、簡単でしょう?
これで面倒なスマホ画面やタブレット画面を手軽にお見せすることができるようになりますね。
それでは、また。