drk design | Webデザイン/グラフィックデザイン/韓国関連

Javascript / CSS / Flash

ここではデザインとは違う側面からウェブサイトを楽しくする「技術(テクノロジー)」をご紹介します。
ご紹介する技術(テクノロジー)は飽くまでも「基本形」なので、その「大きさ」「形」「色」や「量」などを変えることでその表情は無限に変わってきます。
詳細は下の各タイトルをクリックしてご覧ください。

NEW! Flash - Fullscreen

◆全Flashページのフルスクリーン表示です。やっぱ全画面表示のページで出てくるとインパクトがあるし、フラッシュページだと自由なデザインや仕掛けが出来て面白い。
最近では大企業の新商品サイトによくつかわれるようになりましたね。

Gallery (Mosaic Change)

◆表示画像の切り替え効果です。サムネイルをマウスオーバーすると、拡大画像が一旦荒いモザイク画像になってからシュワシュワ~っとだんだん現われてきます。

(※ただし、この Javascript は「Internet Explorer」専用だと思われます。それ以外のブラウザではおそらく機能致しませんので御注意ください。)

Smooth Scroll

◆このサイトでも使っている機能。ページ内を上下に行ったり来たり、好きな個所へスルスル~っと移動できるスグレモノ。よく、ページトップへ戻る時に使われているJavascript。

Menu

Flash - Rotating Obje

◆これはトップメニューなどに使える、奥行きのある空間の中での動きを表現するFlash効果。オブジェクトが3次元的にグルグル回っています。回っているオブジェクトがマウスの動きに反応するのでユーザーの目を引きます。
また、グルグル回っているプログラムを少しいじることで、オブジェクトの動きにいろいろなバリエーションができて、なかなか興味深いです。

Accordion

◆省スペースのため、見たい一つのパーツだけが見えて、その他のパーツはアコーディオンのように順次折りたたんで隠せるJavascript。クリックするとスーッとスライドする動きがオモシロイ。

Flash - Scrolling Gallery (horizontal)

◆内容的には下の「Slide Contents」でやってることと同じなんですが、Flashで作った方がいろいろと細かい演出ができて、やっぱり作っていてオモシロイです。
ただ、ここでどうしても「Web標準」との葛藤をすることになります。Flashのフルスクリーン・サイトとかも珍しくなくなってきた今、やっぱりFlashを使ってないと地味なサイトになってしまうし。
ん~ん、では実際にクライアントはどちらの「サイト作り」を好むのだろうか・・・。

Slide Contents

◆クリックすると、スライドショーみたいに表示内容が横に流れていくJavascript。

Headline News

◆たくさんの箇条書き情報を1行ずつ順番に表示します。
表示内容が多くてあまりスペースがない場合、ページの上の方で見せる最新ニュースなどに適しているでしょう。枠など変えればいろいろな演出のバリエーションが考えられます。

Gallery

◆このサイトでも使ってる機能。小さな画像のサムネイル(ボタン)をクリックすると、ページ全体が黒の半透明スクリーンになって、その中に拡大画像が出てくる。これは目立つ!

Flash - Tic-Tac Movie

◆チクタク、チクタク……と、秒針のようなリズムで動くFlashムービーです。
人間の習性として、規則的に動くものに惹かれる習性があります。Flashでそのリズムをキープしながらいろいろなオブジェクトをデザインし、動かしていきます。

Hiding Contents

このサイトでも使っている機能。ニュース記事などでタイトルだけを露出しておいて、そのタイトルをクリックするとその下に本文がスルスルーっと出て来るJavascript。
◆タイトルをクリックすると >>> 隠してある内容がスルスルーっと出て来る。
◆タイトルをクリックすると >>> 見えている内容がスルスルーっと隠れる。

Cross Fade

◆バナー広告みたいに、表示内容がフェードイン/フェードアウトしながら変わっていくJavascript。

Photo Description

◆マウスオーバーすると画像内にコメントが出てくるJavascriptです。こんな出し方もありかと…。:)

Flash - Slide Menu

◆このサイトでもトップメニューで使っているスライドメニュー効果。マウスの動きに反応するのでインタラクティブで面白い。もちろんJavascriptでも作れるんだろうけど、随分前から作り方をあれこれ考えていて、やっとまともなのが出来た。

Flash - Page Turn over

本のページをめくるFlashアニメーションの基本形です。
実際にサイト内で使う時にはページのサイズを変えたり、実際の本の周りで起こる現象をいろいろと加えていくと、より臨場感のある演出が出来ると思います。

Tip

◆ある文字をマウスオーバーすると、その文字の説明がポインターの横に出る機能。専門用語などの説明をする時に便利。


Javascript / CSS / Flash

your comment please!

写真馬鹿!

カッコイイ写真を紹介します!
♦「写真馬鹿!」のページへ

Internet Explorer 7

やっぱ IE7 だろっ!!
バージョン7以前のIE(Internet Explorer)ではWebサイトのページが正しく表示されませんので、
今すぐ IE7ダウンロードページ から“7”を入手してください!

Cool Sites

Resistered by Yahoo!

当サイトはYahoo!JAPANの「グラフィックデザイナー」のページにカテゴリ登録されています。
掲載ページはこちらです→

my flickr page!!