Fontsize : [ Large Size ] / [ Default Size ]

Home : Blog(What's New / Memo)

index > 更新履歴 > その他 > 更新 ナビゲーションに昇降モーション追加

更新 ナビゲーションに昇降モーション追加

現在このサイトは移転のため更新停止しています。
新しい記事はVERSIONFIVEにて更新されていきますのでそちらをご利用下さい。

また一部のエントリは新しいサイトに一部修正加筆されて再掲されています。[再掲されているエントリ一覧]

以前のエントリーでナビゲーションを固定表示(IEを除くモダンブラウザ対象)にしたのですが、やっぱりなんか味気がなかったので、今度はページをスクロールすると、ナビゲーションがタイミングがずれてついてくるようなモーションを追加してみました。うまくいってないときは数回リロードしてみてくださいm(__)m

これでちょっとは面白みが出たような気がしますがどうでしょうか。なんせjavascriptはあんまりわからないので、コーディングは手探りでした。(といってもあるライブラリを使っているのですが、これは続きに。)

ってことで安定してないかもしれません。スクロール時に重いかもしれません(>_<)閲覧してみて重かった方は、「重いぞー」とかコメント下さるとありがたいです。

今回は、外国のサイトCross-Browser.comさまが配布されているX Libraryというjavascriptのライブラリ(色んな関数が入ったjsファイル)を利用して作っています。

javascriptってブラウザ間やそのバージョンによって関数が違ったり、独自拡張やらで複数のブラウザで同じように見せるのが面倒なんです。僕もそれに悩まされてあんまり勉強してないんですよ!

その問題を解決してくれるのが、このX Library。このライブラリには、クロスブラウジングを可能にするjavascriptの基本的な関数の代替版が多数登録されています。つまり、このライブラリのメソッドを利用してjavascriptを組めば、僕らはクロスブラウザ問題を考えずに記述できてしまうという本当に素晴らしい代物なんです。

ですが、解説が英語なんであんまり詳しい説明はできません。爆
登録されているメソッドの概要の日本語訳が以下のサイトさまに掲載されています。

X Library(クロスブラウザJavaScriptライブラリ)メソッド一覧 by Collection & Copy

また、こんな膨大なライブラリを読み込んだらサイトが重くなっちゃうよ、という方も安心な、使用したメソッドのみを注釈したjsファイルを生成してくれるWindowsコマンドラインソフトも付いています。これは便利です。
以下のサイトさまで紹介されています。

Javascriptのクロスブラウザライブラリ by Trivial Tracks

でも残念ながら、国内のサイトではあまりこのX Libraryについて書かれたものが発見できませんでした。最大の障害はやはり言語でしょうか。
誰か翻訳してくれないかなー('-')

更新履歴 > その他 | - | -

[ Skip To Top ]



Sub Contents

Weblog Navigation

Latest Entries
Category
Recent Comments
Recent Trackback
Archives
Recommend

Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト 「Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト」

WEBの歴史からXHTML,CSSの解説さらにはアクセシビリティにも触れられているまさに「教科書」

Serene Bach オフィシャルガイド~カスタマイズ自在のウェブログツール 「Serene Bach オフィシャルガイド~カスタマイズ自在のウェブログツール」

Serene Bachユーザ必読のガイドブック

世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイル 「世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイル」

有名サイトのCSSデザインテクニックが学べます

Joined

Other