Saetl.net

Simple And Easy TempLate

Backstretchの使い方

  1. 下記ページの 「Download Backstrech Now」 よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルではindex.html)にコードを記述。
    パスは上記ファイル構成の場合なので環境にあわせて変更>
    ・cssは使用しません。
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。
    <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード--> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <!--ダウンロードしたファイル--> 
    <script src="js/jquery.backstretch.js"></script> 
    <!--javascript追記-->
    <script>
    $.backstretch(["images/pot-holder.jpg", "images/coffee.jpg", "images/dome.jpg"], {
        fade: 750,
        duration: 4000
    });
    </script>
    
    ・<body></body>内のコードは必要ありません。
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル