Webサイト全体を1ページで収めて、画面上をスライドさせてコンテンツ遷移するサイトは
最近よく見かけますが、その様なスライド移動をキーボードの操作から実行させることを可能とする
jQueryプラグイン「ASCENSOR.js」がなかなかおもしろかったので紹介してみます。

ASCENSOR.js


Jquery.ascensor.js

プラグインページのトップ画面にある
「Demo and how to use」のリンクをクリックすると
画面の右下にナビゲーションマップが表示されます。

ナビゲーションマップに合わせて、
キーボードの上下左右の矢印キーでスライドさせて
コンテンツ操作を行うことが可能となっています。

内部構成は、
1画面ごとにidで囲ったHTMLを用意して、

<div id="house">
        <div><!-- Etage1-->
                <div id="ContentName"></div><!-- Content of the floor 1-->
        </div>
        <div><!-- Etage2-->     
                <div id="ContentName"></div><!-- Content of the floor 2-->
        </div>
        <div><!-- Etage3-->
                <div id="ContentName"></div><!-- Content of the floor 3-->
        </div>  
        <div><!-- Etage4-->
                <div id="ContentName"></div><!-- Content of the floor 4-->
        </div>
        <div><!-- Etage5-->
                <div id="ContentName"></div><!-- Content of the floor 5-->
        </div>
</div>

プラグインファイルとスクリプトを実行させます。

◆SCRIPT
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo.js" type="text/javascript"></script> 
<script src="js/jquery.ascensor.js" type="text/javascript"></script>
<script src="js/myscript.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$('#house').ascensor();
});
</script>

基本部分はこれだけで、
その他、オプションも用意されているようです。

キーボード操作で画面遷移を行うのは特殊なUIになりますが、
実際に動かしてみると意外と使いやすく、
操作感がとても気持ち良く感じます。

どこかで機会があれば使ってみたいUIです。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

キーボード操作でページ遷移(スライドコンテンツ)を行うことができるjQueryプラグイン「ASCENSOR.js」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner