こんにちは。
今回はフルスクリーンで上下左右に移動できるjQueryプラグイン「jquery.fullContent」！です。
ブラウザいっぱいに表示したコンテンツを上下左右にアニメーションで切り替える事ができるjQueryプラグインを紹介します。
フルスクリーンで上下左右に移動できるjQueryプラグイン「jquery.fullContent」！
jquery.fullContent
jQueryプラグイン「jquery.fullContent」をダウンロードしてみよう！
http://www.zehfernandes.com/jquery.fullContent/#downloadにアクセスし、ボタンをクリックしてダウンロードします。
jQueryプラグイン「jquery.fullContent」を設置してみよう！
html部分を記述します。
idを付けますよ。
1 2 3 4 5 6 7 8 9 10 11 | <div id="container"> <div id="stage1"> </div> <div id="stage2"> </div> </div> |
リンクはこんな感じで、先程指定したidを使います。
1 | <a href="#stage2">Go to stage2</a> |
CSSを記述します。
スクロールバーを表示させたくない時は下記を加えますよ。
1 | body { overflow-x: hidden; overflow-y: hidden; } |
垂直スクロールが必要な場合は下記を記述します。
1 | stage1 { overflow-y: auto; } |
jQuery本体とjquery.easing.min.jsとjquery.scrollTo.jsとjquery.fullContent.jsを/bodyの手前に読み込みます。
1 2 3 4 | <script src="js/jquery-1.x.x.min.js" type="text/javascript"></script> <script src="js/jquery.easing.min.js" type="text/javascript"></script> <script src="js/jquery.scrollTo.js" type="text/javascript"></script> <script src="js/jquery.fullContent.js" type="text/javascript"></script> |
その下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | $('#container').fullContent({ stages: 'div', mapPosition: [{v: 1, h: 1}, {v: 1, h: 2}, {v: 2, h: 1}, {v: 2, h: 2}], stageStart: 1, speedTransition: 800, idComplement: 'page_', ease: 'easeOutQuad' }); |
jQueryプラグイン徹底活用 プロのデザインアイデアとテクニック
いかがでしたか。水平・垂直にコンテンツを配置できるので、迫力のあるサイトを作る事ができますね。
以上でフルスクリーンで上下左右に移動できるjQueryプラグイン「jquery.fullContent」！でした。
