画像を大胆に大きく使ってサイトをカッコよく見せる方法があります。
今回は、web初心者向けにwebサイト上で配布しているスクリプトを使って背景の画像がフェードイン・フェードアウトをするjQueryを実装します。
URLhttp://srobbin.com/jquery-plugins/backstretch/
ページコンテンツ
jQueryを動かすために STEP1
head内にいつもおなじみののコードを書いてください。
|
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
ファイルをダウンロード STEP2
「Download Backstretch Now」がありますのでクリックしてください。
「jquery.backstretch.min.js」が表示されますので、自分のローカルファイルにコピーしてください。
HTMLに実際に動く記述を書きます STEP3
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(function(){ $.backstretch( ["images/022/01.png", "images/022/02.png"], {duration: 3000, fade: 1250} ); }); </script> |
HTMLを設置します STEP4
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body> <div id="content"> <h1>あいうえお</h1> <h2>あいうえお</h2> <h3>あいうえお</h3> <h4>あいうえお</h4> <ul> <li>かきくけこ</li> <li>かきくけこ</li> <li>かきくけこ</li> <li>かきくけこ</li> </ul> </div> </body> |
特に気をつけることはありませんが、背景画像の上に背景白ベースで半透明のコンテンツを作りたくて記述しています。
CSSを記述します STEP5
|
1 2 3 4 5 6 7 |
#content { width: 880px; margin: 0 auto; padding: 10px 40px 20px 40px; background: #FFF; background: rgba(255, 255, 255, 0.85); } |
jquery.backstretch.min.jsのjQueryファイルを付けます STEP6
|
1 |
<script src="js/022/jquery.backstretch.min.js"></script> |
STEP1でjQueryのコードの下に追加します。
まとめ
[サンプル] 背景画像をフェードイン・フェードアウトさせる
よくわからなかった人もいるかもしれませんが、背景に画像を置いてコンテンツを作るサイトをちょくちょく見ますのでぜひ試してみてください。
