アニメーション効果ありのレスポンシブボックス「Box to Full Width」
当ページのリンクには広告が含まれています。
スポンサーリンク
簡単にレスポンシブなボックスがつくれちゃうjQueryプラグイン「Box to Full Width」を紹介します。
jQueryプラグイン「Box to Full Width」
jQueryプラグイン「Box to Full Width」は、アニメーション効果付きのレスポンシブボックスが作成できるプラグインです。
スポンサーリンク
デモをご覧ください。ブラウザを縮めるとdivタグで囲まれたボックスがレスポンシブに動くよ〜。
デモのソース（HTML + jQuery）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="boxes2fullwidthのデモでーす。">
<title>boxes2fullwidth - jQueryプラグインまとめのカルマ</title>
<style>
#content{width:100%; position:relative; height:auto; background:#99FF33}
.box{width:200px; background:#CCCCCC; }
</style>
</head>
<body>
<div>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- jquery 970x90 demo -->
<ins class="adsbygoogle"
style="display:inline-block;width:970px;height:90px"
data-ad-client="ca-pub-1282149765378839"
data-ad-slot="1037393908"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<h1>boxes2fullwidthのデモでーす。</h1>
<p>ブラウザを縮めると……</p>
<div id="content">
<div class="box">秋の田のかりほの庵の苫をあらみ わが衣手は露にぬれつつ</div>
<div class="box">あしびきの山鳥の尾のしだり尾の ながながし夜をひとりかも寝む</div>
<div class="box">鵲の渡せる橋に置く霜の 白きを見れば夜ぞ更けにける</div>
<div class="box">白露に風の吹きしく秋の野は つらぬきとめぬ玉ぞ散りける </div>
<div class="box">陸奥のしのぶもぢずりたれゆえに 乱れそめにしわれならなくに</div>
<div class="box">あはれともいふべき人は思ほえで 身のいたずらになりぬべきかな</div>
<div class="box">あらざらむこの世のほかの思ひ出に いまひとたびの逢ふこともがな</div>
<div class="box">朝ぼらけ宇治の川霧たえだえに あらはれわたる瀬々の網代木</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.box2fullWidth.js"></script>
<script language="javascript">
$('#content').box2fullWidth({
minwidth:400,
who:'div',
margin:5,
duration:350,
boxdelay:15,
bottomMargin:20,
positionComplete:function(){ console.log("end!")}
});
</script>
</body>
</html>
詳細はこちらからどうぞ。
» jQuery Box to Full Width
スポンサーリンク