電網通信あみあみ

これならできちゃう!

【 魅力あるサイトを作成しよう(18) -- jQuery でできる色々な演出を見てみよう!4 】

更なるWebの勉強に勤しむあみですが・・・。

ami
左上に何か表示されてるね?
gen
うん、今回最初に紹介する「画面のスクロールに対応するメニュー」だよ。
ami
へえ、どういう時に活用できるのかな。
gen
そうだね。例えばサイドメニューを作っても、
ページ本文の内容が長くなってしまうと、
見えなくなって不便だよね。
ami
ami
確かに、メニューを見に上まで戻らなくちゃいけないね。
gen
でもこのサイドメニューは、メニューそのものが
スクロールに合わせて追いかけてきてくれるんだ。
ここまで読み進めてきても、ずっと表示されているだろう?
ami
本当だ、これなら上まで戻らなくても大丈夫!
gen
もちろん、長いスクロールの必要のないページでもそのまま使えるしね。
さて次は、ちょっと面白い機能を紹介しよう。
ami
どんな機能なの?
gen
指定した要素をぶるぶると震わせることができるプラグインだよ。
まずは、下の正方形を見てごらん。
ami
「オンマウス」と「クリック」の2つの正方形があるね。
オンマウス
クリック
gen
文字通り、指示に従ってみよう。
「オンマウス」はマウスポインタを乗せることで、
「クリック」はクリックすることで正方形が動き出すよ。
ami
本当だ、動いた。
しかもそれぞれ違う動きをしてる!
gen
JQueryを使えば、こんなこともできるんだ。
応用して振れ幅の大きさやスピード、動き出す条件を変えたり、
横揺れ縦揺れなんかの指定も可能だよ。
ami
このプラグインはどんな時に使えるかなー?
gen
例えばホームページで更新した部分のアイコンを動かして目立たせたり、
画像がたくさんある中で特に注目させたいものを
アクションさせたりすれば面白いんじゃないかな。
ami
ちょっとしたサプライズになるね!

次回をお楽しみに!

スクロールするサイドメニュー…出典:http://memocarilog.info/jquery/3100
要素を震わせる…出典:http://jackrugile.com/jrumble/

  • scrollmenu

  • 一番上へ

  • 一番下へ