見た目をリッチにするJavaScriptの使い方

JavaScriptは、一昔前はタイマー等の使われ方が多かったと思います。
最近では、CSSのように見た目をリッチにするために使用されている例をよく見ます。
私が気になった素敵なJSを使用あるいは配布しているサイトを紹介します。

JavaScript(以下JS)は、クライアントサイドに依存するものなので、ブラウザの設定でJSの有効をOFFにしていたら動作しません。そのため、使いどころには注意が必要です。
しかし、CSSのように、見た目をリッチにするためだけに使うのであれば、機能的に劣るわけではないので、導入しやすいと思います。

1.スクロールがスムーズに動く

最近ではユーザビリティの観点から、「ページのトップへ戻る」ボタンやテキストをつけているサイトも多いと思います。
ページ内リンクというのは、実際どこへ移動しているのか、視覚的にわかりにくいところがあります。
しかし、ページ内リンク先に一瞬で遷移せず、スクロールしながら遷移すれば、今、ページのどの地点にいるのかわかりやすいですよね?

スムーススクロールのJSスクリプトあるいはPHPスクリプトを配布しているサイトは多いのですが、当サイトでも導入しているJSスクリプトを紹介します。

The Tiny Scrolling(s) - from The Lab of the weblog Central Scrutinizer

これは、上記URIからtiny-scrollings.jsをダウンロードして、header内に以下のソースを追記するだけです。


<script type="text/javascript" src="tinyscrolling.js"></script>

あとは、クラスの追加も必要なく、一般的なページ内リンクの設定をするだけです。ただし、リンク先がidで指定されていないといけません、確か。nameは使えなかったと思うので注意です。

2.スタイルシートあるいはblogのテーマを切り替える

いくつかのデザインを作成者のほうで用意しておくのも面白いかもしれません。
WordPressでは、テーマも変更できるので、スタイルシートだけでなく、構造自体を変えることができます。
以下のサイトでは、WordPressによってサイトが構成されていますが、3つのテーマを切り替えることができます。

Best Web Gallery

3つのテーマを切り替えることができます。

WordPressでテーマを切り替える場合は、theme-switcherというプラグインを使用するとよいと思います。
以下のページからは日本語版をダウンロードできるようです。

ThemeSwitcher 日本語版 « MMRT daily life

本家はこちらから。

ThemeSwitcher - WordPress Plugin Repository - Trac

使い方は以下の通り。

  1. 上記サイトからプラグインをダウンロード
  2. wp-content/pluginsディレクトリ内にプラグインを設置
  3. 管理ツールのプラグインから有効化する
  4. サイドバーなど切り替える場所に以下のコードを記述
    
    <?php wp_theme_switcher(); ?>
    
    
  5. すると、リスト形式で表示されます。この表示方法を上記サイトのようにカスタマイズしたい場合は、theme-switcher.phpを変更する場合がありますが、PHPとWordPressタグの知識が必要となります。

単純にスタイルシートを切り替えたい場合は、WWW WATCHさんの「CSS レイアウト切り替えスイッチ」を利用すると便利です。添付されているサンプル画像もかっこよくてお勧めです。

CSS レイアウト切り替えスイッチ | WWW WATCH

3.マウスオンしたときの動き

リンクテキストにカーソルを合わせたとき、ただテキストの色が変わるだけでなく、リッチな動きをするのも面白いですね。
上記で紹介したBest Web Galleryの3つテーマを切り替える真ん中のボタンをクリックしてみてください。
画像の下部にテキストリンクが画像が透過された形でありますよね。その部分にカーソルを合わせてください。
ゆっくりと透過率が下がっていき(画像上)、最後は下の画像が透過されず黒い背景となります(画像下)。

マウスオンすると透過率が変化します。

これは、 fadeTo()というフェードインさせるJS関数を使用しています。
Best Web Galleryでは、jQueryというライブラリと併用して以下のような書き方をしています。

$(document).ready(function(){	
	$('#full h3').fadeTo("fast", 0.6);
   
	$('#full h3').mouseover(function() {
		$(this).fadeTo("slow", 1);
	});
   
	$('#full h3').mouseout(function() {
		$(this).fadeTo("fast", 0.6);
	});
}

Best Web Galleryより引用

4.丸角の画像をJSで表示する

文字サイズ変更やエラスティックレイアウトなどによりテキスト表示部分が可変となると、丸角などの背景画像をCSSだけで表示するとどうしても無駄なdivを書かざるを得ない場合もあります。
しかし、JSを使用することにより、無駄に書いてしまうdiv要素をJSで出力するので、元々のHTMLコードはクリーンのままであるというメリットがあります。
また、JSが無効の場合はタダの線で囲まれて表示されるので、テキストが表示されないなどの不具合は起こりません。

Transparent rounded/custom corners and borders | Lab | 456 Berea Street

文字サイズやブラウザのサイズを変更してみてください。丸角画像がくずれることなく表示されます。

投稿日:2007年10月27日

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

top