本日は誕生日でした。(￣∀￣*)イヒッ
34歳ですよ〜・・・なのに、なぜか1歳上にサバを読み「35歳ですよ〜」とか言いそうになる・・。
なぜに上にさばを読む・・・orz
という、話じゃなくて。
色々な案件で使用している「 jQuery」。
本当に助かっています。
そんなわけで、今まで使ったスクリプトについてのご紹介。
//ページ内リンクをスムーズスクロール//
ScrollTo
私が現在制作しているサイトは、ほぼ100%これが使われてます。
「ページの上に戻る」をクリックするとスルスルと上部に移動。
あの感覚がたまりません。
//ポップアップウィンドウを開かせるのが嫌だ！そんな時//
ThickBox
個人的にポップアップウィンドウは好きじゃありません。
それでもどうしても別ウィンドウを出したい時に使用。
しかし、ブラウザの中央にボックスが来る仕様のためか、ブラックアウトした背景はスクロールしても、ボックス自体は固定で動きません。
高さがあるボックスを作ってしまった場合、モバイルPCでは内容を全部見られない恐れあり(￣▽￣;
//簡単な記述でロールオーバーを実現する//
input要素にも使えるjQueryのロールオーバープラグイン
使用部分を定義すれば、HTML側の記述は不要。通常時の画像を設定すれば良いだけです。おまけに「指定された箇所でも _on が付いている画像は無視」するというお利口さん。
//簡単な記述でロールオーバーを実現するPNG版//
IE6でもPNGで透過したいし簡単にロールオーバーさせたい
要はIE6対策なのですが、png画像を利用したロールオーバーの場合は「class=”png rollover”」、png画像には「class=”png”」、jpg・gifならば「class=”rollover”」、とそれぞれclass指定しなければならないのがタマに傷ですが、使い勝手は良いと思います。
このプラグインは「iepngfix.js」を利用してるのですが、本家サイトが消滅している模様。現在は非常に入手しづらいです。
そのため、こちらのサイトではDD_belatedPNG.jsを代替手段として用いる、紹介サイトに置いてある「iepngfix.js」を利用する、という2つの方法を紹介しています。
まあ、IE6が消滅してくれれば、面倒なことをしなくて済むんですけどね(￣▽￣*)
//クールなフォトギャラリーを作りたい！//
GALLERIA
非常に簡単に美しいフォトギャラリーが制作できます。
//ページがタテに長くなりすぎ！でも内容を削れない//
アコーディオン
色々と詰め込むと、どうしてもページは長くなります。
読みたいけどスクロールが長いと疲れるな・・という時に利用。
折りたたみ表示なのでQ&Aなんかに利用するといいかもしれません。と言うか、私はQ&Aに利用してます。
//ページがタテに長くなりすぎ！でも内容を削れないパート2//
JavaScriptで作るシンプルなタブメニュー「simpleTabs 」
これも上記と同じです。年度ごとの内容に使うのにはオススメですが、ページを移動するのではなく、ページ内のデーターを表示・非表示させるしくみのため、あまり内容が多いとページが重くなり、表示速度が遅くなる可能性があります。
・・・というのが、私が制作に使っている主なプラグインです。
ただ、誤解して欲しくないのが「じゃ、アンタは手抜きしてるのね(￣▽￣*)」って事です。
プラグインを利用することによって、美しい動きをするサイトを作ることが比較的簡単になったのは確かですが、あくまでも要素の一つにしか過ぎません。
プラグイン利用は制作補助。制作をしてくれるわけではありません。
そのあたりは「アプリケーションが資料を作ってくれるわけではない」と言うことと同じという所でしょうか。