久し振りにHTML関連です。
所属のクラブから依頼があってサイト構築の予定なんですが、なかなか全体着手できずで、取り急ぎのイベントページだけ作って仮アップしました。
掲載する内容もイベントの本サイトの方に行けば詳しく書かれているのでエリアの紹介を兼ねて簡単に1ページのみの構成(あまりに簡素すぎ・・・笑)白無垢ではちょっと寂しいかなと思って背景画像をフルスクリーン表示にしてボリュームあるようにしてみました。
http://www.nutspress.com/demo/upwings
今回使用したスクリプトはBACKSTRETCHで、軽量かつ設置が簡単、ページ全体の背景だけでなく指定した要素にも対応、スライドショーでの表示も可能となっています。
【設置方法】
1.BACKSTRETCHで.jsファイルをダウンロード
2.HTMLを作成して.jsファイルを呼び込む
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/jquery.backstretch.min.js"></script> |
3.呼び出す画像をJSで指定する
1 2 3 |
$(function(){ $("body").backstretch("images/sky.jpg"); }); |
以上、スリーステップで設置完了です。非常に簡単(笑)
要素自体に指定する場合や、スライドショーを利用する場合はJSの記述を変更していくだけです。
参考サイト:jQuery ウィンドウ全画面や特定要素サイズに合わせて背景画像を設置する素晴らしいプラグイン【BACKSTRETCH】
さて、、、これから本サイトの構築作業やっていくんですけど3月中になんとか形にしたいところ。
0 comments
No comments yet