背景画像を動かすことでインパクトのあるサイトが構築できます。
Vegas Background jQuery Pluginはフルスクリーンで背景をスライドさせられます。
さらにドットのオーバーレイをかけられるので、カッコイイ感じになります。
背景画像をスライドショーさせるJavaScript「Vegas Background jQuery Plugin」
使用方法
Vegas Background jQuery Pluginからファイル一式をダウンロード。
<link rel="stylesheet" href="jquery.vegas.css" media="all" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.vegas.js"></script>
<script>
$(function(){
$.vegas('slideshow', {
backgrounds:[
{ src:'画像パス1', fade:1000 },
{ src:'画像パス2', fade:1000 },
{ src:'画像パス3', fade:1000 }
//以下画像分
]})
('overlay', {
src:'overlays/01.png' //オーバーレイ画像
});
});
</script>
あとは通常通りにhtmlを記述して問題ありません。
モノクロ画像の方が映えるかもしれませんね。
背景画像をスライドショーさせるJavaScript「Vegas Background jQuery Plugin」サンプル
sponsors
コメントする
記事作成:2011年10月 5日 09:45
記事URL:http://www.skuare.net/2011/10/javascriptvegas_background_jqu.html
TOP > javascript > 背景画像をスライドショーさせるJavaScript「Vegas Background jQuery Plugin」