去年あたりからはやってる、WEBサイトにパララックス効果を入れたデザインをちょっとやってみようかな～なんて思っていまして。で、またまたGoogle+をなんとなく見ていたんですが、仲良くさせてもらってるnishikawaさんから、「parallax.js」の存在を教えていただきました。

このライブラリを使えば、パララックス効果がカンタンに設置できます。僕のメインのサイトで実験しましたので、下記そのメモです。

メインサイトをパララックス効果あふれるデザインにしよう

というわけでして、前提は以下です。

私のメインのサイト「https://www.imamura.biz/」を、「parallax.js」を使ってパララックス効果をつけたデザインにする

そのまんまですね。あまり知識がないので、言葉の表現がこれでいいものかどうか、わかってはいません＾＾；それは、後から勉強しようと思います！ではでは、いきましょう。

「parallax.js」ファイル一式をダウンロードする

こちらにファイル一式があります。

ダウンロードはこちらです。

念のためダウンロード方法をさらっと。ページ右上に「Downloads」とあるリンクをクリック。

【リンクを押しましょう】

zip,tar.gzのどちらかで配布されています、ご使用の環境に合ったファイルをダウンロードします。

【ファイルをダウンロードしましょう】

私は、zipファイルをダウンロードしました。「stolksdorf-Parallaxjs-・・・.zip」を解凍すると、以下のファイルが入っています。その中に「demoフォルダ」が入っていますので、「demoフォルダ」開きましょう。

【demoフォルダを開いてください】

フォルダを開きましたか。では下の画像をみてください。

【「demo」フォルダの中にある「index.html」をChromeで開く】

「demoフォルダ」を開くとその中に、「index.html」っていうファイルがあります。index.htmlをクリックするとデモページが開きます。実際どんな動きなのかをブラウザを使って確認しましょう。

使うブラウザは、Google Chrome（以下　Chrome）が一番スムーズに動作するのでわかりやすいです。ChromeをPCにインストールされていない方、ダウンロードはこちらでできます。クリックしたら、デモサイトが開きます。

【デモページトップはこんな感じです】

ページ上下左右に矢印がありますね。クリックしましょう。

試しに、左の矢印をクリックしました。

【左の矢印をクリックしたところ】

静止画なので感覚が掴みづらいとは思いますが、実際に触られるとわかると思います。また、

• 画面にある矢印をクリック
• キーボードの矢印キー（↓↑→←）を押す

どちらかの方法でページがスムーズに切り替わり、合わせて背景も動きます。背景とコンテンツとが互いに遠近感を保ったまま切り替わる・・・視覚的に楽しめます。とてもオシャレですよね。これがよくあるパララックス効果の例・・・ってやつですかね。

できることはこれだけではないです。詳しくはご自身で、デモページをちらちらクリックしてご確認ください。いろいろなイベントが設定できることがわかります。全ての機能を設置したいのはやまやまなのですが、とりあえず今回は、

• 矢印をクリック（または、矢印キー入力）すると画面がスムーズに切り替わる
• 背景も画面に合わせて移動

っていう動作だけ設置しようと思います。ちょっと動きの理解が難しいと思うので、以下、イメージを作りました。まずは、今までのデザインです。

【これは、前のデザイン】

久々のメンテですなぁ。半年ぶりに触りました。

で、パララックス効果を設置したイメージは以下ですよ。

【矢印で、動きのイメージを想像】

指で差しているところがサイトを開いた時に初めに表示される箇所、つまりスタートです。画面切り替えが可能な箇所は矢印で示しています。（矢印がない箇所は切り替えができません）今まで1つだったページを、何枚かに区切って表示させようとしているんですね。

うーん、いまいちわかるような、わからないような。でしょうかね・・・表現が難しいです＾＾；これを「parallax.js」をつかって設置します。

というわけで、できました。

お暇でしたら、ご確認ください。https://www.imamura.biz/

ご確認いただけない、ページ移動がめんどいという方へ！

ちょっとキャプチャしましたんで、動画でご覧下さい。

まとめ

この「parallax.js」は設置に関しては、それほど難しくはありませんね。今のところ問題なのは、firefoxだと背景の動きがぎこちない、というかちょっと変な動きですね。これは今、解析中です。

ところで、サイトにパララックス効果を入れれば、キャンパスも画面サイズに捉われることなく、より自由なデザインができると思います。

逆に自由度が高まった分、今のままのデザインですとちょっと殺風景な気がしますね＾＾；せっかくのかっこいい表現が活かしきれていない感じです。ちょっとデザイン変えないとな～・・・

また、次回はこの「prallax.js」を使っていて、つまづいたことを題材にして続きを書こうと思いますんで、興味がありましたら是非是非ご参考下さい。それからでも実装は遅くはないとおもいます。

とはいえ、こういう新しい技術で遊ぶのはとても楽しいですね。興味がありましたら、是非挑戦ください。