SeeKeR5084

URLはウェブログ"The Strange Storage"です。
私の脳内記憶専用の外部ストレージとして使用しています。

Works

Sliding Top Menu

以前作成したTop Menuを新たに作り変えました。 〔変更箇所〕 ・メニューの角丸め。 前回のメニューの角は、画像を使って丸を表現していたために、メニュー自体のロードが遅く、また色の変更も自由にできませんでした。そこで今回はCSSで角丸を再現しました。 ・アニメーション メニューを開く際のアニメーションを変更しました。 ・イベント管理方法 特にのonloadイベントに関するお話。前回まではイベントと要素を一対一で対応付けていたため、同じ要素に複数のイベントを付加すると、イベント同士が干渉し合って上手く動作しませんでした。今回イベントの付加方法を変更したため、この問題は解決されました。 ・メニュー項目 前回では、メニュー内に表示する項目をJavaScriptで動的に生成してからメニューに挿入していました。今回からは、タグ内に

Image Zoomer

画像に拡大アニメーションをくっ付ける関数。この画像拡大アニメーションはJavaScritpだけで実現しています! 【適用方法は簡単です】 リンク先が画像であるにはさまれたを見つけると、そのに拡大アニメーションを(勝手に)くっ付けます。HTMLタブ参照。 【ちょっと説明】 拡大される画像はのsrcではなく、のhrefのリンク先画像の方が拡大されます。よって、ページに表示されている画像とは違う画像(のリンク先画像)を拡大表示させることも出来ます。 【逃げ方】 にid="nozoom"を加えると拡大アニメーションがくっ付きません。 【こだわりの一部】 拡大後にページ全体を覆うオーバーレイは、ページレイアウトを崩さないようにするため、背景色と同じ色で表示されます。背景色を取得して適用する様子を確認できるよう、5種類の背景色を用意しました。 【操作方法】 画像拡大アニメーションが適用された画像をクリックして拡大。拡大後、拡大された画像をクリックして閉じます。 【おすすめと対応状況】 サンプルはぜひフルスクリーンでどうぞ。 Chrome, Opera, Firefox, Safari, IEで動作確認済みですが、旧バージョンだと動作しない場合があります。最新版のブラウザでお楽しみ頂けるとうれしいです。

  • 2603
  • 1

Top Menu

トップメニューを作成しました。 [操作] ・MENUをクリックしてメニューを展開。 ・CLOSEをクリックしてメニューを縮小。 [編集] ・メニュー内容の編集は、コード先頭の定義部分(var ~)を自分好みに変更して頂ければ適用されるように作成しました。(一部HTML可) ・編集可能な項目は、Title / Contents / MENU / CLOSEです。 ・メニューの横幅は、MenuTableWidth = 値[px]; ・必要に応じてzIndexも変更可能。 ・メニューをページに固定する場合は、MenuPosition = "absolute"; ・または、表示領域に固定する場合は、MenuPosition = "fixed"; ・オプションで透明度(0~100[%])も変更可能です。 [追記] ・約60fpsで描画する設定です。 ・現在、横幅をpxだけでなく%でも指定できるように編集中。

  • 1922
  • 1

Skills

Hot tags

Categories

HTML / CSS / JavaScript