サイト移転しました → GLOSSY

     
  1. >
  2. >
  3. Appleっぽい、…
  • 最終更新日:
  • 投稿者: @signpostme

Appleっぽい、1ページごとに魅せるサイトを簡単に作れるjQueryプラグイン「One Page Scroll」

AppleのiPhone 5sの公式サイトのような1ページのスクロールを簡単に実装できるプラグイン「One Page Scroll」をご紹介します。大きい写真を背景に、タイポグラフィを中心としたデザインは今となっては定番ですね。サクッと実装することができるので、ぜひ試してみてください。

ops01

「One Page Scroll」は、1ページごとのスクロールを簡単に実装することができるjQueryプラグインです。

どういったプラグインなのかは、実際にデモサイトをご覧ください。

要素ごとに指定できるので、特に何も考えずに実装することができます。オプションを指定すれば、無限スクロールやスクロールアニメーションの変更なども可能です。

ダウンロード

プラグイン本体は配布元Githubより。

https://github.com/peachananr/onepage-scroll

実装

jQueryのバージョンは1.9.1を使用すると良いでしょう(最新版のjQueryでは実行できませんでした)

jquery.onepage-scroll.js と onepage-scroll.css を読み込ませます。

<script src=”js/jquery.onepage-scroll.min.js”></script>

<link href=”css/onepage-scroll.css” rel=”stylesheet”>

親要素にクラス「main」を設定し、子要素を「section」タグで囲います。この「section」で囲まれた内容が1ページ分になります。「section」を増やしていけば、増やした分ページを増やすことができます。

<body>

<div class=”main”>
<section>…</section>
<section>…</section>

</div>

</body>

あとは、JavaScriptでプラグインを呼び出せばOK。

<script>
$(“.main”).onepage_scroll();
</script>

これだけで実装することができます。また、また、引数にオプションを指定することで、簡単にカスタマイズすることができます。詳しいオプションの種類はこちらを参照してください。

新着記事を見る

TOP