ホームページを作る人のネタ帳

スマホやタブレットのサイトを、モックアップ付きで簡単にレビューする事が出来る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>

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

それでは、また。
yamada
Posted byyamada

Comments 0

There are no comments yet.

Leave a reply