skrollrを使ってパララックスのシングルページサイトを作ってみました

2022.1.16 更新

skrollrでパララックスしよう

本日は 、簡単にパララックス(視差効果)を実装できるjQueryプラグイン、skrollrを使ってパララックスのシングルページサイトを作ってみましたので、取り入れ方をご説明します。

前回の記事をお読みになるとスムーズに理解できますので、どうぞご覧ください。

パララックスが簡単に実装できる！ skrollr の使い方

skrollr.jsをhtmlファイルに読み込ませる

こちらが今回作成した、
パララックスでポートフォリオサイト
になります。まずはご覧ください。(なるべくPCでご覧下さいませ)

あるフォトグラファーのポートフォリオサイト、という設定です。パララックスは、画面いっぱいに画像を配置して見せるサイトには最適だと思います。

サイトを作るために用意するもの

• skrollrのJqueryプラグイン
• lightboxのJqueryプラグイン
• スライドショー用とサムネイル用に大きさの違う画像2種
• icomoonで必要なアイコンフォントセットを作り、ダウンロード(icomoonの使い方についてはこちらをご参照下さい)

top画面は、css3のアニメーションプロパティを使って画像を動かしています。作り方はこちらの記事を参考にしてみて下さい。

css3でスクリーンセーバー

bxsliderなどのJqueryを使うのもよいかもです。

さらにスクロールしていくと、スクロール量に応じてそれぞれのセクションが現れては消えるようになっています。イメージは紙芝居ですかね。
各セクションにskrollrのdata属性を付けて動かしています。

ページ内リンクをJqueryで制御する

このサイトを作っていて困ったのは、skrollrを使っているせいか(?)メニューボタンでのページ内リンクがうまくいかないという状態になってしまったことです。
そこで、ページ内リンクはjqueryで制御することにしました。

$(function() {
  $('#nav1').click(function () {
    $('body,html').animate({
      scrollTop: 0
    }, 500);
    return false;
  });

#nav1がクリックされたら、body(またはhtml)を、スクロール量０の位置まで、500ミリ秒かけてアニメーションさせよ。という内容です。

関数ではreturn文を使うことで、呼び出し元(この場合の呼び出し元＝#nav1)に値を返すことができます。
今回の場合の “return false;” とは、ブラウザの元々の動きを止めること。そのかわりにjQueryで動きを制御しています。

メニューボタンは5つなので、上の命令文を計5つ、上記のJqueryのscrollTop:の数値は、セクションそれぞれの最適なスクロール位置を調べて変更します。
idの#nav1、＃nav2…はメニューボタンそれぞれのaタグに付けました。こんな感じです↓

<li><a id="nav1" href="#top">top</a></li>			
<li><a id="nav2" href="#about">about</a></li>			
<li><a id="nav3" href="#archives">archives</a></li>
<li><a id="nav4" href="#posts">posts</a></li>
<li><a id="nav5" href="#contact">contact</a></li>

いかがでしたでしょうか？ skrollrを使うと、一見複雑そうなパララックスの動きも簡単に表現できてしまいますね。

動きのあるサイト作りを考えている方、ぜひ一度 skrollr をお試しください♪

また、簡単なパララックスならCSSだけでも出来ますので、こちらも併せてご覧ください。

position: sticky; がスクロールで要素を固定するのに便利すぎた件