Webデザインラボ当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。2017/04/19こんにちは(・∀・)今回ご紹介するサンプルは、マウスの動きに追随して背景画像や要素を動かすプラグインです。スマホの場合はマウスの動きの代わりに端末を傾けることによって反応するセンサーによって背景画像や要素を動かすことができます。マウスの動きやセンサーの動きに追随して動く要素マウスの動きやセンサーの動きに追随して背景画像や要素が動くサンプルです。JavaScriptの通常版とjQuery版があります。今回は通常版を使用します。サンプルparallax.min.jsを使用します。ダウンロードしてHTMLの<head>内に読み込みます。class="txt">www.webdlab.com/</div></li></ul><!--sample-demo--></div>data-friction-xは横方向の抵抗です。0.0~1.0の範囲で指定できます。data-friction-yは縦方向の抵抗です。0.0~1.0の範囲で指定できます。どちらも値が小さいとゆっくりスムースな動きになります。data-scalar-xは横方向の移動距離を指定します。指定できる値は数値で、範囲は0~です。data-scalar-yは縦方向の移動距離を指定します。指定できる値は数値で、範囲は0~です。どちらも値が大きいと動く範囲が長くなります。動かしたい要素にdata-depth属性を記述し、クラスlayerも記述します。data-depthの値は0.00~1.00まで指定できます。値の数値が大きいと動く距離も多くなります。表示される順番は後から記述した要素が一番上に表示されます。#fff;}JavaScript次のコードを</body>の直前に記述します。Parallax(demo);</script>このプラグインには通常のJavaScript版の「parallax.min.js」とjQuery版の「jquery.parallax.min.js」が選べるようにJSファイルが同梱されています設置する際はお間違えの無いようご注意ください。Resultサンプルデモはこちらサンプルは通常のJavaScript版です。ちなみにjQuery版で組み込みたい場合の設置方法は次の通りです。snippetを入力します。src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>jquery.parallax.min.jsも使用します。こちらはダウンロードして同じくHTMLの<head>内に読み込みます。src="jquery.parallax.min.js"></script>次のコードを</body>の直前に記述します。{$("#demo").parallax();});</script>HTMLとCSSは通常版を参考にしてください。CSSは多少調整が必要です。当サンプルでは、背景画像を2つ、画像を1つ、それとテキストを記述してある要素を動かしています。この辺はご自由に調整してみてください。マウスの動きやセンサーの動きに追随して動く要素のフルスクリーン版マウスの動きやセンサーの動きに追随して背景画像や要素が動くサンプルのフルスクリーン版です。今回も同じく使用するプラグインは通常版のJavaScriptを使用します。サンプルparallax.min.jsを使用します。ダウンロードしてHTMLの<head>内に読み込みます。#fff;}JavaScript次のコードを</body>の直前に記述します。Parallax(demo2);</script>Resultサンプルデモはこちらサンプルは通常のJavaScript版です。こちらも同じくjQuery版で組み込みたい場合の設置方法は次の通りになります。snippetを入力します。src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>jquery.parallax.min.jsも使用します。こちらはダウンロードして同じくHTMLの<head>内に読み込みます。src="jquery.parallax.min.js"></script>次のコードを</body>の直前に記述します。{$("#demo2").parallax();});</script>HTMLとCSSは通常版を参考にしてください。こちらもCSSは多少調整が必要です。サンプル2でも同じく、背景画像を2つ、画像を1つ、それとテキストを記述してある要素を動かしています。こちらもその辺はご自由に調整してみてください。いかがでしたか、使い道は❓ですが、デザイン次第ではキャッチーな格好の良いコンテンツを作ることができそうですね。Webデザインラボ中の人NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからWebデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり。趣味はお酒を飲みながらの家でまったり音楽鑑賞とアウトドア系全般。最近は自転車にもハマってます。更新情報はTwitterかFacebookで配信してるのでフォローして確認してみて。