超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』

SMINT

メニューをクリックするとスルスルっと縦スクロールしていって、コンテンツの部分でとまるワンページスクロールのサイトを作りたい方にぴったりのjQueryプラグインです。

スクロールさせても、ナビゲーションバーがページの上部に固定されます。

サンプルをご覧下さい。

→　超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』サンプル

ワンページスクロールサイトの人気はまだまだ続いていますね。ワンページスクロールサイトは訪問者にとって迷いにくいデザインです。必要な情報を確実に見て貰いたいという場合には有効です。

一から作ろうとすると意外と手間のかかるナビゲーション付きワンページスクロールサイトですが、このjQueryプラグインを使用すると簡単です。

それでは、設置方法の説明をします。

こちらのサイトから一式ダウンロードしてきましょう。こちらのサイトもこのjQueryプラグインを利用して作ってあるみたいですね。

SMINT is a simple plugin for lovers of one page websites
http://www.outyear.co.uk/smint/

ヘッダー部分にCSSとJSファイルの設定をします。

<link href="css/demo.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" 	src="js/jquery.smint.js"></script>
<script type="text/javascript">
$(document).ready( function() {
    $('.subMenu').smint({
    	'scrollSpeed' : 1000 //　スクロールするスピード
    });
});
</script>

$(document).ready( function() {

$('.subMenu').smint({

'scrollSpeed' : 1000 //　スクロールするスピード

});

</script>

そして＜body＞部分にコンテンツを記述します。まずはメニュー部分を作ります。

  <div class="subMenu" >
    <div class="inner">
        <a href="#" id="sTop" class="subNavBtn">Home</a>
        <a href="#" id="s1" class="subNavBtn">Section 1</a>
        <a href="#" id="s2" class="subNavBtn">Section 2</a>
        <a href="#" id="s3" class="subNavBtn">Section 3</a>
        <a href="#" id="s4" class="subNavBtn">Section 4</a>
        <a href="#" id="s5" class="subNavBtn end">Section 5</a>
    </div>
  </div>

<a href="#" id="s1" class="subNavBtn">Section 1</a>

<a href="#" id="s2" class="subNavBtn">Section 2</a>

<a href="#" id="s3" class="subNavBtn">Section 3</a>

<a href="#" id="s4" class="subNavBtn">Section 4</a>

<a href="#" id="s5" class="subNavBtn end">Section 5</a>

</div>

次にコンテンツ部分を記述します。

<div class="section sTop">

    <div class="inner">
        <h1>テキスト</h1>
        <p>テキストなどのコンテンツ</p>

    </div>
    <br class="clear">
</div>

<div class="section s1">
    <div class="inner">
        <h1>Section 1</h1>

    </div>

</div>

<div class="section s2">
    <div class="inner">
        <h1>Section 2</h1>

    </div>

</div>

・・・・以下繰り返し。

<p>テキストなどのコンテンツ</p>

</div>

</div>

<h1>Section 1</h1>

</div>

<h1>Section 2</h1>

</div>

・・・・以下繰り返し。

これで、ワンページスクロールサイトが作れてしまいます。コンテンツを工夫したり、CSSのスタイルを変更したりしてオリジナルサイトを作ってみましょう。

サンプルのソースを書いておきます。どうぞご参考まで。

<!DOCTYPE html>
<html>
<head>
<title>超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』サンプル　│　ぱんにゃっと/H&Y</title>

<meta name = "keywords" content = "" />
<meta name = "description" content = "" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1 user-scalable=no">

<link href="css/demo.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" 	src="js/jquery.smint.js"></script>

<script type="text/javascript">

$(document).ready( function() {
    $('.subMenu').smint({
    	'scrollSpeed' : 1000
    });
});

</script>

</head>

<body>

	<div class="wrap">

  <div class="subMenu" >
    <div class="inner">
        <a href="#" id="sTop" class="subNavBtn">Home</a>
        <a href="#" id="s1" class="subNavBtn">Section 1</a>
        <a href="#" id="s2" class="subNavBtn">Section 2</a>
        <a href="#" id="s3" class="subNavBtn">Section 3</a>
        <a href="#" id="s4" class="subNavBtn">Section 4</a>
        <a href="#" id="s5" class="subNavBtn end">Section 5</a>
    </div>

	</div>

<div class="section sTop">

    <div class="inner">
        <h1>超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』サンプル</h1>
        <p>メニューをクリックするとスルスルっと縦スクロールしていって、コンテンツの部分でとまるワンページスクロールのサイトを作りたい方にぴったりのjQueryプラグインです。</p>

    </div>
    <br class="clear">
</div>

<div class="section s1">

    <div class="inner">

        <h1>Section 1</h1>

    </div>

</div>

<div class="section s2">
    <div class="inner">

        <h1>Section 2</h1>

    </div>

</div>

	<div class="section s3">
		<div class="inner">

		<h1>Section 3</h1>

		</div>

	</div>

	<div class="section s4">
		<div class="inner">

			<h1>Section 4</h1>

		</div>

	</div>

	<div class="section s5">
		<div class="inner">

		<h1>Section 5</h1>

		</div>

	</div>

</div>
</body>
</html>

100

101

102

<!DOCTYPE html>

<html>

<head>

<title>超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』サンプル　│　ぱんにゃっと/H&Y</title>

$(document).ready( function() {

$('.subMenu').smint({

'scrollSpeed' : 1000

});

</script>

</head>

<body>

<a href="#" id="s1" class="subNavBtn">Section 1</a>

<a href="#" id="s2" class="subNavBtn">Section 2</a>

<a href="#" id="s3" class="subNavBtn">Section 3</a>

<a href="#" id="s4" class="subNavBtn">Section 4</a>

<a href="#" id="s5" class="subNavBtn end">Section 5</a>

</div>

<h1>超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』サンプル</h1>

<p>メニューをクリックするとスルスルっと縦スクロールしていって、コンテンツの部分でとまるワンページスクロールのサイトを作りたい方にぴったりのjQueryプラグインです。</p>

</div>

</div>

<h1>Section 1</h1>

</div>

<h1>Section 2</h1>

</div>

<h1>Section 3</h1>

</div>

<h1>Section 4</h1>

</div>

<h1>Section 5</h1>

</div>

</body>

</html>

あわせてお読みください

横スクロールさせたい時の簡単便利なjQueryプラグイン「Smooth Vertical or Horizontal Page Scrolling with jQuery」

Smooth Vertical or Horizontal Page Scrolling with jQuery 他のサイトと差をつけて、サイトを横スクロール…

スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」

jQueryプラグイン「stickUp」はページの上部にメニューを固定して表示させることができるjQueryプラグインです。ワンページスクロールサイトのみなら…

Parallax（パララックス）スクロール効果を実現できるJavaScript「skrollr」

Prinzhorn / skrollr 最近、パララックス効果（視差効果）を利用したワンページスクロールサイトをよく見かけるようになりました。スクロールするこ…

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』

→　超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』サンプル

あわせてお読みください

コメントを残すコメントをキャンセル

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

人気記事ランキング

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』

→ 超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』サンプル

あわせてお読みください

コメントを残す コメントをキャンセル

→　超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』サンプル

コメントを残すコメントをキャンセル