タグ

2012年2月10日のブックマーク (3件)

  • [JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher

    デモページ:Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロード サイトの「Download」よりファイル一式をダウンロードします。 一式には必要なファイル全て(jqeury.jsも)が含まれています。 Step 2: 外部ファイル 外部ファイルを下記のように<head>~</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi

  • 画像を使う - MDC

    他の canvas 要素を使う 普通の画像と同様に document.getElementsByTagName メソッドか document.getElementById メソッドを使って他の canvas 要素にアクセスできます。入力元の canvas を使う前に使おうとしている canvas に何かが描かれているか確認してください。 これのより実践的な利用方法の一つは2番目の canvas 要素を他の大きな canvas のサムネイルビューとして使うことです。 一から画像を作る 最後の選択肢はスクリプトの中で新たな Image オブジェクト作ることです。このアプローチの主な短所は画像が読み込まれるのを待つ必要があるのでスクリプトが途中で停止しないために何らかの形の画像の先読みが必要ということです。 基的に、新しい画像オブジェクトを作るにはこのようにします: var img = n

  • 『canvas』要素の勉強をする時の参考サイトまとめました | HTML5でサイトをつくろう

    HTML5の『canvas』要素 今回の標題でもあるcanvas要素は、HTML5の新要素の中で最も注目されている要素の1つなので、私もこれから学習していくのがとても楽しみです。 まずcanvas要素について知るために参考サイトを見つけることから始めました。調べるとすぐにサンプルなどが数多くヒットし、その中には目を奪われる表現や複雑な処理を行っているモノがいくつもありました。また、サンプルは非常に多いのですがちゃんとしたサイトでの事例はまだまだ少ないのが現状だということも知ることができました。まずは焦らず基礎から勉強していこうと思います。 『canvas』要素のサンプルまとめ 今回調べた『canvas』要素を使ったコンテンツをいくつかピックアップしましたのでご紹介します。 HTML5 Canvas and Audio Experiment 音楽に合わせて複数のオブジェクトが円になったり、マ

    『canvas』要素の勉強をする時の参考サイトまとめました | HTML5でサイトをつくろう