TOP  >  WebDesign  >  コンテンツを折り畳んでくれるjavascript集「10 Transition Effects: The art of Showing/Hiding Content」
2009年05月07日

コンテンツを折り畳んでくれるjavascript集「10 Transition Effects: The art of Showing/Hiding Content」

限りあるスペースを有効に使いたい。コンテンツを沢山盛り込みたいけど、文字情報を溢れさせたくないなど、コンテンツを格納したいと言う方におすすめなのが今回紹介する「10 Transition Effects: The art of Showing/Hiding Content」です。

expand-collapse01
jquery-fade-infade-out

様々なタイプの格納型のjavascriptがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

jQuery CSS Toggle Effect
jQueryとCSSで作るアコーディオンメニューです。シンプルなので色々とカスタマイズができそうです。

expand-collapse02
 
 
 
 
 
jQuery pageSlide
サイドからページをスライドさせて表示させる方式のエフェクトです。

expand-collapse002
 
 
 
 
 
MOOSLIDE – AJAX CONTENT SLIDE
物理的な演出でスライドするエフェクトのスライダー。上からと下からと選べるようになっています。

expand-collapse0002
 
 
上記の他にも様々なjavascriptが公開されています。上手く使えば非常に印象的なWEBになるかと思います。実装方法の解説などを含め基本的には英語で書かれていますが、ソースファイルがダウンロードできるようになっていますので、英語が苦手な方でも特に問題なく使えるかと思います。沢山の情報量があるWEBサイトをスッキリと見せたい、より印象的に見せたいと言う方は是非どうぞ。

10 Transition Effects: The art of Showing/Hiding Content | DevSnippets

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればこちらからご連絡ください。即刻削除いたします。
posted 03:07  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る