2014年9月26日のブックマーク (1件)

  • ブラウザの背景全体に画像を表示する(ランダム配置とアニメーション)【jQuery連載03】 | HTML5でサイトをつくろう

    今回はブラウザ全体に写真を配置したサンプルです。CSSなどでも背景に写真を配置することができますが、様々なウインドウサイズによって表示領域を制御するためにjQueryを使用して作成してみました。 一枚画像の表示だけでは簡単なので、背景画像をランダムに表示させたり、複数枚をフェードアニメーションで切り替えるサンプルを作成しています。 写真をメインにしたり、グラフィカルなサイトを作成する場合に便利なサンプルになっていると思います。 今回作成したサンプル 背景に写真を配置したサンプルを見る 背景画像をランダムにし一定時間でアニメーションさせるサンプルを見る ビジュアル画像をHTMLに読み込ませる 今回は背景に表示させる画像はCSSでの背景画像指定ではなく、表示させる領域を制御するためにdiv#background内にimg要素にて配置した画像を画面全体に表示させます。 画像が拡大縮小されるからと

    ブラウザの背景全体に画像を表示する(ランダム配置とアニメーション)【jQuery連載03】 | HTML5でサイトをつくろう