QR Code Business Card

【jQuery】簡単便利なフロートパネル!販促やフログのアクセスアップに効果的!

 jQueryでフロートパネルを書いてみました!上からにゅーッと出てくるパネルです。jQueryを使えば簡単に作ることができますよー。オススメ商品を並べたり、ブログの人気エントリーを並べてアクセスアップしたり、お問い合わせフォームを表示させたりといろいろな用途に便利に使えます!簡単な割に効果的なパーツです!


jQueryを準備

 このフロートパネルは、jQueryを使っていますので、まずは公式サイトからダウンロードして下さい。

jQuery.com






フロートパネル(上部)

jQuery フロートパネル(上部)

 上部にニューッと出てくるフロートパネルです。jQueryを使えば簡単に実現できます。動きは下記のデモをご覧下さい。デモでは「パネルON/OFF」で表示させています。初期は非表示です。

フロートパネル(上部)デモ



フロートパネル応用デザイン例

フロートパネル(上部)デザイン例 デモ

 さらっとデザインした画像を入れてみるとこうなります(スミマセン……ただの画像入れただけです)。アイデア次第ではどうにでも応用できますね!



ソース


【HTML,JavaScript】


【css】



ソース解説


【JavaScript:15~20行目】


 jQueryのアニメーションの機能を使用しています。パネルの位置はCSSで、「position: absolute;」の絶対配置として指定していますので、上の「’top’:’0px’」で位置のスタイルシートを書き換え、パネルの表示位置を変更します。「’duration’: 200」はアニメーションの速度、「’easing’: ‘swing’」は速度が段々速くなったり、遅くなったりする速度の増減の具合を表しています。


【JavaScript:14~28行目】


 上は「#switch」をクリックする毎に(処理1)と(処理2)を繰り返します。前述の絶対配置を書き換えることによって、パネルの表示と非表示を繰り返します。





フロートパネル(下部)

フロートパネル(下部)

 今度はフロートパネルを下部に表示します。絶対配置の指定を「top」から「bottom」に変更し、下からの位置を指定することによって、下部からパネルを表示させます。

jQuery フロートパネル(下部)デモ


ソース


【HTML,JavaScript】


【css】



ソース解説


【JavaScript:17,24行目】
 位置の指定を下部表示用に変更しています。

【css:8行目】
 パネルの初期位置を変更しています。





フロートパネル(下部)タイマーによる表示

フロートパネル(下部)タイマーによる表示

 フロートパネルを表示させるきっかけ(イベント)を、「#switch」のクリックにしていましたが、タイマーにすることも可能です。

jQuery フロートパネル(下部)タイマー3秒後表示 デモ


ソース


【HTML,JavaScript】



ソース解説


【JavaScript:15行目】
 「.delay(3000)」を追加するとタイマー遅延で実行します。1000で1秒を表します。ブログなど30秒くらいにしておくと良いかもしれません。






おわりに
 フロートパネルを表示するイベントは、他にもスクロール量でも可能だと思います。例えばブログだと、「記事を半分くらい読んだらパネルを表示する」とか面白いかもしれませんね。ご要望があればまた書きたいと思います。










SNSでもご購読できます。

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)