タグ

ブックマーク / black-flag.net (2)

  • 画像ローディング中にLoadingアニメーションを表示するjQueryプラグイン「How to Create an Awesome Image Preloader 」|BLACKFLAG

    最近ではWebページ上に多くの画像を表示するような場合には、 読み込むまでにLoadingアニメーションを表示してユーザーのストレスを軽減させる手法をよく見かけますが、 それを簡単に組み込むことができるjQueryプラグイン 「How to Create an Awesome Image Preloader 」が便利そうだったので紹介してみます。 ≫How to Create an Awesome Image Preloader | Nettuts+ ≫DEMO:Image Preloader デモ画面上で動作を確認すると以下の様な感じに。 DEMO:Image Preloader 単純に画像ロード中にLoadingアニメーションを表示するだけでなく 完了後は画像が順々にフェードインしてくる加減が気持ちいい。 Loading中は該当要素に対して「.preloader」のクラスを付加して、

    画像ローディング中にLoadingアニメーションを表示するjQueryプラグイン「How to Create an Awesome Image Preloader 」|BLACKFLAG
  • jQueryで背景に動画をフルスクリーンで表示する方法|BLACKFLAG

    海外のサイトなどで最近たまに見かける、背景に動画をフルスクリーン表示して見せる手法。 背景全面に動画が流れることでページの演出をかなりダイナミックに見せることが出来ます。 この背景動画を簡単に実装できるjQueryプラグインもありますが YouTubeにアップされている動画が対象だったりで、 任意の動画ファイルを簡単に流すことができるものが見当たらなかったので 簡単に実験的に作ってみたのを紹介してみます。 動画を流す手法はHTML5の<video>タグとかも考えましたが 今回は動画再生はFlashで流すパターンにしています。 まずは動作のサンプルから。 下記リンクよりサンプル画面を表示してみてください。(別枠で表示されます) jQueryで背景に動画をフルスクリーンで表示するサンプルを別枠で表示 ※サンプルでの動画ファイルは容量を軽減する為に少々粗いものになっています。 ブラウザ枠をリサイ

    jQueryで背景に動画をフルスクリーンで表示する方法|BLACKFLAG
  • 1