読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【27:Nikebetterworld Parallax Effect】パララックス+リンク押下でスムーズなスクロール | JQueryプラグイン

one's wayプロジェクト JQuery

f:id:seintoseiya:20150729175926p:plain
プロジェクトNo.27:Nikebetterworld Parallax Effect

背景画像のパララックスは以前自作しましたが、プラグインがあったので使ってみたいと思います。
また、同梱していたライブラリでサイト内遷移がヌルッと動くスムーズスクロールも実装してみました。

ライブラリのダウンロード

以下の公式サイトからライブラリファイルをダウンロードします。
Nikebetterworld Parallax Effect Demo - Ian Lunn - Front End Developer

今回ダウンロードしたのはjquery-parallax-1.1.3.zipです。
この中から使うのは以下のファイル。

  • jquery.parallax-1.1.3.js
  • jquery.localscroll-1.2.7-min.js
  • jquery.scrollTo-1.4.2-min.js (localscrollの中で使われいます)

以下のjqueryバージョンで動作が確認できました。

  • jquery1.6.4.min.js

(今までjquery-2.1.4.min.jsを使ってきましたが、これを使うとスムーズスクロールが動作しませんでした。メジャーバージョンはさすがに合わせないとダメか…)

基本的な使い方

HTML

まずはJSを呼び出し。

<script src="./js/jquery1.6.4.min.js"></script>
<script src="./js/jquery.parallax-1.1.3.js"></script>
<script src="./js/jquery.localscroll-1.2.7-min.js"></script>
<script src="./js/jquery.scrollTo-1.4.2-min.js"></script>

ナビゲーションと背景用のdiv領域を用意します。

<!-- ナビゲーション -->
<ul id="nav">
    <li><a href="#intro" title="Next Section"><img src="img/next.gif" alt="Link" /></a></li>
    <li><a href="#second" title="Next Section"><img src="img/next.gif" alt="Link" /></a></li>
    <li><a href="#third" title="Next Section"><img src="img/next.gif" alt="Link" /></a></li>
</ul>
<!-- セクション -->
<div id="intro">
	<!-- コンテンツ -->
</div>
<div id="second">
	<!-- コンテンツ -->
</div>
<div id="third">
	<!-- コンテンツ -->
</div>

CSS

背景画像をCSSから指定します。

#intro{
	background:url(img/c1.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 600px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

JavaScript

スムーズスクロール(localscroll, scrollTo)

#navに対してlocakScroll()関数を指定するだけで、スムーズスクロールが実装できます。

$('#nav').localScroll();
parallax

使い方は以下のとおり。

$('パララックスさせたい要素').parallax(xPosition, speedFactor, outerHeight):

  • xPosition - 要素の水平方向の表示位置
  • inertia - 垂直方向の相対的な速度 <例>0.1 はスクロールの1/10の速さ, 2 はスクロールの2倍の速さ, マイナスをつけると動く方向が反転
  • outerHeight (true/false) - 要素が表示領域のなかに入ったかを判定するのにouterHeight(borderやpaddingを含んだ高さ)を使用するかどうか
$('#intro').parallax("50%", 0.1);
$('#second').parallax("50%", 0.1);
$('#third').parallax("50%", 0.3);

実際にはスクロールすることで以下の0(表示位置)を変化させています。

background:url(img/c1.jpg) 50% 0 no-repeat fixed;

使ってみて思ったが背景画像のパララックスサイトは上記のfixedがキモなので、
特にこのプラグイン使う必要もないかも…
垂直方向の相対的な速度を変えたいという特殊な場合などがあれば、楽かもしれないですね。

全ソースはこちら

github.com

関連アプリ・書籍

jQuery入門道場

jQuery入門道場

jQuery レッスンブック jQuery2.X/1.X対応

jQuery レッスンブック jQuery2.X/1.X対応

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)