• web制作
  • jQuery
  • スクロール
  • 全画面

【jQuery】要素を全画面表示してからスクロール

三浦
このエントリーをはてなブックマークに追加

jQueryはもうweb制作にはなくてはならないものになりましたね。

web上にも情報がたくさん載っているので、グーグル先生に聞けば大抵のことはすぐに分かります。
そのなかで個人的に結構使うんだけど、あまり紹介している記事とかないよなと思ったものをご紹介出来ればと思います。

チームサンタの三浦です。

フルスクリーンからのスクロール

デモページ

ちょっと上手く動きの説明が出来ないのでまずはデモページで確認して下さい。

背景画像などを画面サイズいっぱいに広げてから、セクションを切り替えてスクロールさせたい!もちろんリサイズしても大丈夫!
ってこと結構あると思うのですけど、意外に情報が少ないと感じたので、紹介出来ればと思い、今回の記事を書かせてもらいます。

HTML

<body>
<section id="s01">
<h1>全画面表示させたいセクション</h1>
</section>
<section>
<h1>別のセクションの始まり!</h1>
</section>
</body>

特に難しいことはありません。
全画面表示させたい<section>(もちろん<div>でも大丈夫です。)に好きなidを付けておけばそれだけでオッケーです。

jQuery

今回はjQueryを使用するので、head内等でjQueryを読み込みましょう。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

グーグルにホストされているjQueryを読み込む場合はサーバーにあげてからでないと動きの確認が出来ないことがあるので、
サーバーにあげずに手元(ローカル)で確認したい場合はjQueryの本体をダウンロードして読み込ませて下さい。

jQuery本家ダウンロードページ

その後に以下のスクリプトを書いてあげて下さい。

<script>
$(document).ready(function () {
    hsize = $(window).height();
    $("#s01").css("height", hsize + "px");
});
$(window).resize(function () {
    hsize = $(window).height();
    $("#s01").css("height", hsize + "px");
});
</script>

#s01の部分は自分でつけたidへ適宜変更してください。

これでidで指定したセクションは全画面表示になり、スクロールするとそれ以降のセクションが続いていくようになりました!!

簡単に動きの説明を致します。
最初の$(document).ready〜でサイトを開いたときのウインドウサイズを取得し、セクションの高さをウインドウいっぱいに広げてあげています。
その後の$(window).resize〜でウィンドウをリサイズされた場合にもう一度ウィンドウサイズを取得し、セクションの高さを調節しています。

以上、
背景を全画面表示させるスクリプトやスライダーなどと組み合わせるとより、動きが出て面白くなりますし、
いろいろアイディア次第で面白いことも出来そうです。

忘備録としてお役に立てて頂ければ幸いです。

rss登録
このエントリーをはてなブックマークに追加