タグ

ブックマーク / gihyo.jp (4)

  • 第9回 ページ内リンクをスムーズにスクロールさせるには | gihyo.jp

    ease系のJavaScriptプラグインで気持ちいい動きを演出 1ページの中に複数のページ要素を配置し、ページ内リンクで移動するタイプのサイトを目にするようになってきました。たとえば2007年度のグッドデザイン賞 コミュニケーションデザイン部門を受賞した石川県の温泉「多田屋」のサイトは、Flashを使い、1枚の大きな絵の中をスクロールして移動するUIとなっています。 図1 石川県の温泉「多田屋」のサイト 最近では、Flashではなく、JavaScriptを使って静的なページの中を遷移するタイプのサイトも見かけるようになりました。たとえば「Pline Studios of Architecture」はとても美しいUIとなっています。 図2 JavaScriptでページ内を移動する「Pline Studios of Architecture」 実装にはMITライセンスのscrollto.js

    第9回 ページ内リンクをスムーズにスクロールさせるには | gihyo.jp
    irisjp
    irisjp 2010/09/28
    ページ内リンクをスムーズに移動させるテクニック。
  • 第15回 プロトタイプと継承#2 | gihyo.jp

    こんにちは、太田です。前回は__proto__を使ってJavaScriptにおけるプロトタイプについて解説しました。今回はそこから発展して継承の方法を学びます。 JavaScriptにおける継承 まず、目標とする形を確認しておきましょう。やはり、前回同様Google ChromeのデベロッパーツールかSafariのウェブインスペクタのコンソールにて、次のコードを実行してみてください。 dirによるElementの解析 dir(document.createElement('span')) 実行結果は次の通りです。 図1 Chromeでの実行結果#1 こちらの通り、WebKitではspan要素はそれ自身にいくつものプロパティを持っています。もっと下のほうを見てみると、 図2 Chromeでの実行結果#2 さらに、span要素にも__proto__があり、それはHTMLElementのprot

    第15回 プロトタイプと継承#2 | gihyo.jp
  • 第5回 jQuery UIによるユーザインターフェースの改良 | gihyo.jp

    今回使用する「Dialog」「⁠Draggables」「⁠Droppables」「⁠Sortables」に必要なファイルは以下の通りです。 themes/ jquery-1.2.3.min.js jquery.dimensions.js ui.mouse.js ui.resizable.js ui.dialog.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.droppable.ext.js ui.sortable.ext.js ui.sortable.js jQuery UI 1.5bを使うために、今回は同梱されているjQuery 1.2.3を使うことにします。バージョンが上がりますが、これまでのサンプルの動作に影響はありません。 ライブラリの設定 ライブラリの各ファイルを、head要素の子要素に以下のように指定します(

    第5回 jQuery UIによるユーザインターフェースの改良 | gihyo.jp
    irisjp
    irisjp 2010/08/21
    マウス操作やUIを拡張するjQueryライブラリ解説。
  • 第7回 Google Chrome拡張とHTML5 #1 | gihyo.jp

    こんにちは、太田です。今回はGoogle Chrome拡張に使えるHTML5関連技術の解説をお送りします。 Google ChromeはWebKit(Safari)と連携して、HTML5とその周辺技術の実装を積極的に進めています。一般的なウェブサイトでは、互換性の問題からHTML5などの最新実装を積極的に使用することは困難ですが、Chrome拡張ではそういった問題にとらわれずに最新の技術を試すことができます。今回から数回はそういったHTML5関連の話題を取り上げます。 Chrome拡張で使えるHTML5 HTML5は2010年1月時点で策定途中の段階です。既に一部のブラウザで実装されている仕様であっても、(⁠実装によるフィードバックを受けて)仕様が修正される可能性があります。多くのブラウザで実装されていて実質的に確定している部分もありますが、まだほとんど実装されていない仕様や、実装はされた

    第7回 Google Chrome拡張とHTML5 #1 | gihyo.jp
  • 1