最近よく見るパララックスのシングルページサイトを作ってみました。シングルページということで単調にならない様、ちょっとしたギミックを加えたかったので、前回の記事でやった簡単にパララックス(視差効果)を実装できるjQueryプラグイン、skrollrを使いました。skrollrの使い方についてはこちらの記事をご参照下さい。こちらが今回作成した↓↓↓パララックスでポートフォリオサイトです。あるフォトグラファーのポートフォリオサイト、という設定です。パララックスは、画面いっぱいに画像を配置して見せるサイトにはぴったりだと思います。サイトを作るにあたり用意したものskrollrとlightboxのJqueryプラグインスライドショー用とサムネイル用に大きさの違う画像2種icomoonで必要なアイコンフォントセットを作り、ダウンロード。(icomoonの使い方についてはこちらをご参照下さい。私も記事書いておりますので宜しくです。)top画面は、以前りんごの勉強会にてcss3のアニメーションプロパティを使ってスクリーンセーバーを作った時と同じで要領で、画像を動かしています。作り方はこちらの記事を参考にしてみて下さい。css3でスクリーンセーバーbxsliderなどのJqueryを使うのもよいかもです。スクロールしていくと、スクロール量に応じてそれぞれのセクションが現れては消えるようになっています。イメージは紙芝居ですかね。各セクションにskrollrのdata属性を付けて動かしています。ページ内リンクをJqueryで制御するこのサイトを作っていて困ったのは、skrollrを使っているせいなのか(?)メニューボタンでのページ内リンクがうまくいかないという状態になってしまったことです。そこで、ページ内リンクはjqueryで制御することにしました。});#nav1がクリックされたら、body(またはhtml)を、スクロール量0の位置まで、500ミリ秒かけてアニメーションさせよ。関数ではreturn文を使うことで、呼び出し元(この場合の呼び出し元=#nav1)に値を返すことができます。ブラウザの元々の動きを止めること。そのかわりにjQueryで動きを制御しています。メニューボタンは5つなので、上の命令文を計5つ、上記のJqueryのscrollTop:の数値は、セクションそれぞれの最適なスクロール位置を調べて変更します。idの#nav1、#nav2...はメニューボタンそれぞれのaタグに付けました。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。%d人のブロガーが「いいね」をつけました。