skrollrでパララックスしよう！
更新していなかった間、な〜んにもしていなかった訳ではなく(^^;A 最近よく見るパララックスのシングルページサイトを作ってみました。
シングルページということで単調にならない様、ちょっとしたギミックを加えたかったので、前回の記事でやった簡単にパララックス(視差効果)を実装できるjQueryプラグイン、skrollrを使いました。
skrollrの使い方についてはこちらの記事をご参照下さい。
パララックスが簡単に実装出来る！skrollrの使い方
こちらが今回作成したskrollrを使ったパララックスのサイトです。
あるフォトグラファーのポートフォリオサイト、という設定です。(ご注意!PCでご覧下さい ><)
パララックスは、画面いっぱいに画像を配置して見せるサイトにはぴったりだと思います。
サイトを作るにあたり用意したもの
- skrollrとlightboxのJqueryプラグイン
- スライドショー用とサムネイル用に大きさの違う画像2種
- icomoonで必要なアイコンフォントセットを作り、ダウンロード。(icomoonの使い方についてはこちらをご参照下さい。私も記事書いておりますので宜しくです。)
top画面は、以前りんごの勉強会にて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>最後に、サイト作成中たくさんのアドバイスを下さったT先生、ありがとうございました！
